diff --git a/assets/css/1.php b/assets/css/1.php deleted file mode 100644 index fefd77e..0000000 --- a/assets/css/1.php +++ /dev/null @@ -1,31 +0,0 @@ - \ No newline at end of file diff --git a/assets/css/2.php b/assets/css/2.php deleted file mode 100644 index 77a4fec..0000000 --- a/assets/css/2.php +++ /dev/null @@ -1,67 +0,0 @@ - \ No newline at end of file diff --git a/assets/css/3.php b/assets/css/3.php deleted file mode 100644 index fb5f418..0000000 --- a/assets/css/3.php +++ /dev/null @@ -1,45 +0,0 @@ - \ No newline at end of file diff --git a/assets/css/4.php b/assets/css/4.php deleted file mode 100644 index 1a6aa7e..0000000 --- a/assets/css/4.php +++ /dev/null @@ -1,45 +0,0 @@ - \ No newline at end of file diff --git a/assets/css/5.php b/assets/css/5.php deleted file mode 100644 index a9272a7..0000000 --- a/assets/css/5.php +++ /dev/null @@ -1,44 +0,0 @@ - \ No newline at end of file diff --git a/assets/css/global.php b/assets/css/global.php deleted file mode 100644 index 60e7bc2..0000000 --- a/assets/css/global.php +++ /dev/null @@ -1,75 +0,0 @@ - \ No newline at end of file diff --git a/assets/css/ssi-wpjm-admin.css b/assets/css/ssi-wpjm-admin.css index 70b6810..89c529f 100644 --- a/assets/css/ssi-wpjm-admin.css +++ b/assets/css/ssi-wpjm-admin.css @@ -9,4 +9,121 @@ img.ssi-image { } .wp-core-ui .ssi-hidden { display: none; +} +.ssi-wpjm-input--image, +.ssi-wpjm-input--gallery { + display: none; +} +.ssi-wpjm-image, +.ssi-wpjm-gallery-image{ + border: 4px solid #CCCCCC; + padding: 4px; + margin-top: 20px; + margin-bottom: 20px; +} +.ssi-wpjm-image-wrapper { + position: relative; + width: 25em; +} +.ssi-wpjm-image-wrapper img { + max-width: 100%; + height: auto; + box-sizing: border-box; +} +.ssi-wpjm-image--remove, +.ssi-wpjm-gallery--remove { + position: absolute; + font-size: 28px; + cursor: pointer; +} + +.ssi-wpjm-gallery-item { + display: inline-block; + margin: 0; + margin-right: 32px; +} +.ssi-wpjm-input-description { + font-style: italic; +} +.form-table .ssi-wpjm-gallery-button, +.form-table .ssi-wpjm-image-button { + margin-bottom: 8px; +} + +.setting-type--section { + border-top: 1px solid #CCCCCC; +} +.ssi-wpjm-settings-form .setting-type--section th { + flex-basis: 100%; + font-size: 130%; + font-weight: bold; +} +.ssi-wpjm-settings-form .setting-type--section { + gap: 0; +} + +.ssi-wpjm-settings-form .setting-type--hidden { + display: none; +} + +.ssi-wpjm-settings-form tr { + display: flex; + flex-wrap: wrap; + column-gap: 2em; +} +.ssi-wpjm-settings-form th { + padding: 20px 0 0; + flex-basis: 25%; +} +.ssi-wpjm-settings-form td { + padding: 15px 0; +} +.ssi-wpjm-settings-form .form-table { + width: 100%; +} + +@media screen and (min-width: 1000px) { + .ssi-wpjm-settings-form .form-table { + width: calc(100% - 520px - 4em); + } +} + + +.ssi-wpjm-template-preview { + + max-width: var(--hdsmi-template--width); + +} + +@media screen and (min-width: 1000px) { + + .ssi-wpjm-template-preview { + + position: fixed; + bottom: 3em; + right: 2em; + + } + +} + +.ssi-wpjm-template-preview .hdsmi-template { + + --hdsmi-template--width: 80vw; + box-shadow: 20px 20px 40px rgba(0,0,0,0.2); + +} + +@media screen and (min-width: 600px) { + + .ssi-wpjm-template-preview .hdsmi-template { + + --hdsmi-template--width: 520px; + + } + +} + +.ssi-wpjm-error { + color: red; } \ No newline at end of file diff --git a/assets/css/ssi-wpjm-generate.css b/assets/css/ssi-wpjm-generate.css new file mode 100644 index 0000000..d18f27c --- /dev/null +++ b/assets/css/ssi-wpjm-generate.css @@ -0,0 +1,319 @@ +/** + * CSS rules that apply to all templates. + */ +body { + margin: 0; + padding: 0 +} + + .hdsmi-template { + + --hdsmi-template--width: 100vw; + --hdsmi-template--unit: calc(var(--hdsmi-template--width) / 100); + --hdsmi--text--color: white; + --hdsmi--text--background-color: transparent; + --hdsmi--background-color: rgb(23, 139, 145); + --hdsmi--font-family: sans-serif; + --hdsmi--font-size: 6; + --hdsmi--title--font-size: 6; + --hdsmi--title--font-weight: inherit; + --hdsmi--title--text-transform: inherit; + --hdsmi--location--font-size: 4; + --hdsmi--location--font-weight: inherit; + --hdsmi--location--text-transform: inherit; + --hdsmi--salary--font-size: 3; + --hdsmi--salary--font-weight: inherit; + --hdsmi--salary--text-transform: inherit; + --hdsmi--image--background-blend-mode: none; + --hdsmi--logo--height: 4; + --hdsmi--logo--width: auto; + + width: var(--hdsmi-template--width); + aspect-ratio: 120/63; + display: grid; + place-items: center; + background-color: var(--hdsmi--background-color); + +} + +.hdsmi-template__inner { + position: relative; + aspect-ratio: 120/63; + width: 100% +} +.hdsmi-template__text { + font-size: calc(var(--hdsmi--font-size) * var(--hdsmi-template--unit)); + line-height: var(--hdsmi--line-height); + font-family: var(--hdsmi--font-family); + color: var(--hdsmi--text--color) +} +.hdsmi-template__title { + color: var(--hdsmi--title--color,var(--hdsmi--text--color)); + font-size: calc(var(--hdsmi--title--font-size, var(--hdsmi--font-size)) * var(--hdsmi-template--unit)); + font-weight: var(--hdsmi--title--font-weight); + text-transform: var(--hdsmi--title--text-transform) +} +.hdsmi-template__location { + color: var(--hdsmi--location--color,var(--hdsmi--text--color)); + font-size: calc(var(--hdsmi--location--font-size, var(--hdsmi--font-size)) * var(--hdsmi-template--unit)); + font-weight: var(--hdsmi--location--font-weight); + text-transform: var(--hdsmi--location--text-transform) +} +.hdsmi-template__salary { + color: var(--hdsmi--salary--color,var(--hdsmi--text--color)); + font-size: calc(var(--hdsmi--salary--font-size, var(--hdsmi--font-size)) * var(--hdsmi-template--unit)); + font-weight: var(--hdsmi--salary--font-weight); + text-transform: var(--hdsmi--salary--text-transform) +} +.hdsmi-template__logo { + height: calc(var(--hdsmi--logo--height) * var(--hdsmi-template--unit)); + width: var(--hdsmi--logo--width) +} +.hdsmi-template__image { + display: block; +} + +/* Template 1 */ + +.hdsmi-template.hdsmi-template--1 { + --hdsmi--template--font-weight: bold; + --hdsmi--line-height: 1.5; + --hdsmi--line-gap: .1em; +} +.hdsmi-template--1 .hdsmi-template__inner { + display: flex; + align-items: center; + width: 100% +} +.hdsmi-template--1 .hdsmi-template__text { + width: 66.66%; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: calc(2 * var(--hdsmi-template--unit)); + padding: calc(3 * var(--hdsmi-template--unit)) +} + +.hdsmi-template--1 .hdsmi-template__text > * { + display: block; +} + +.hdsmi-template--1 .hdsmi-template__text > * > [class*="__inner"] { + display: inline; + line-height: var(--hdsmi--line-height); + padding: calc( ( ( (1em * var(--hdsmi--line-height)) - 1em) / 2) - (var(--hdsmi--line-gap) / 2) ) calc(2 * var(--hdsmi-template--unit)); + background-color: var(--hdsmi--text--background-color); + -webkit-box-decoration-break: clone; + box-decoration-break: clone +} + +.hdsmi-template--1 .hdsmi-template__image { + align-self: stretch; + width: 33%; + height: auto; + object-fit: cover +} +.hdsmi-template--1 .hdsmi-template__logo { + position: absolute; + top: calc(3 * var(--hdsmi-template--unit)); + right: calc(3 * var(--hdsmi-template--unit)) +} + +/* Template 2 */ + +.hdsmi-template--2 { + --hdsmi--location--font-size: 2.5; + --hdsmi--line-height: 1.25; +} +.hdsmi-template--2 .hdsmi-template__inner { + display: flex; + flex-direction: column; + justify-content: flex-end +} +.hdsmi-template--2 .hdsmi-template__image { + position: absolute; + z-index: 0; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + object-fit: cover +} +.hdsmi-template--2 .hdsmi-template__text { + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + gap: calc(2 * var(--hdsmi-template--unit)); + padding: 0 calc(6 * var(--hdsmi-template--unit)) calc(4 * var(--hdsmi-template--unit)) +} +.hdsmi-template--2 .hdsmi-template__text:after { + content: ''; + position: absolute; + z-index: -1; + top: calc(-10 * var(--hdsmi-template--unit)); + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(#00000000,var(--hdsmi--text--background-color) 70%,var(--hdsmi--text--background-color)) +} +.hdsmi-template--2 .hdsmi-template__title { + order: 2 +} +.hdsmi-template--2 .hdsmi-template__location { + text-transform: uppercase; + order: 1; + margin-top: auto +} +.hdsmi-template--2 .hdsmi-template__salary { + order: 3; + font-weight: 700 +} +.hdsmi-template--2 .hdsmi-template__logo { + position: absolute; + top: calc(3 * var(--hdsmi-template--unit)); + left: calc(6 * var(--hdsmi-template--unit)) +} + +/* Template 3 */ + +.hdsmi-template--3 { + --hdsmi--title--font-weight: bold; + --hdsmi--line-height: 1.25; +} +.hdsmi-template--3 { + --hdsmi--title--font-size: 4; + --hdsmi--location--font-size: 3; + --hdsmi--logo--height: 6; +} +.hdsmi-template--3 .hdsmi-template__text { + width: calc(66.6 * var(--hdsmi-template--unit)); + z-index: 2; + position: absolute; + bottom: calc(4 * var(--hdsmi-template--unit)); + left: calc(4 * var(--hdsmi-template--unit)); + background-color: var(--hdsmi--text--background-color); + padding: calc(2 * var(--hdsmi-template--unit)); + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: calc(2 * var(--hdsmi-template--unit)) +} +.hdsmi-template--3 .hdsmi-template__title { + width: 100% +} +.hdsmi-template--3 .hdsmi-template__salary { + /* margin-left: auto */ +} +.hdsmi-template--3 .hdsmi-template__image { + width: calc(66.6 * var(--hdsmi-template--unit)); + height: calc(40 * var(--hdsmi-template--unit)); + position: absolute; + z-index: 1; + top: calc(5 * var(--hdsmi-template--unit)); + right: 0; + bottom: calc(5 * var(--hdsmi-template--unit)); + object-fit: cover +} +.hdsmi-template--3 .hdsmi-template__logo { + position: absolute; + top: calc(3 * var(--hdsmi-template--unit)); + left: calc(3 * var(--hdsmi-template--unit)) +} + +/* Template 4 */ + +.hdsmi-template--4 { + --hdsmi--title--font-size: 4; + --hdsmi--location--font-size: 2.5; + --hdsmi--salary--font-size: 2.5; + --hdsmi--logo--height: 5; + --hdsmi--line-height: 1.25; +} +.hdsmi-template--4 .hdsmi-template__inner { + display: grid; + align-items: end; + justify-items: center +} +.hdsmi-template--4 .hdsmi-template__image { + width: 100%; + height: 100%; + position: absolute; + z-index: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + object-fit: cover; +} +.hdsmi-template--4 .hdsmi-template__text { + position: relative; + z-index: 1; + max-width: 66.66%; + background-color: var(--hdsmi--text--background-color); + padding: calc(4 * var(--hdsmi-template--unit)); + margin: calc(4 * var(--hdsmi-template--unit)) 1calc(5 * var(--hdsmi-template--unit)); + text-align: center; + display: flex; + flex-direction: column; + gap: calc(2 * var(--hdsmi-template--unit)) +} +.hdsmi-template--4 .hdsmi-template__logo { + position: absolute; + top: calc(3 * var(--hdsmi-template--unit)); + z-index: 0 +} + +/* Template 5 */ + +.hdsmi-template--5 { + --hdsmi--line-height: 1.5; + --hdsmi--line-gap: .1em; + --hdsmi--title--font-size: 5; + --hdsmi--location--font-size: 3; + --hdsmi--logo--height: 3; +} +.hdsmi-template--5 .hdsmi-template__text { + line-height: calc(.1 * var(--hdsmi-template--unit)); + width: calc( (50 * var(--hdsmi-template--unit)) + (8 * var(--hdsmi-template--unit))); + position: absolute; + top: 50%; + left: calc(50% - calc(10 * var(--hdsmi-template--unit))); + transform: translateY(-50%); + padding-top: calc(var(--hdsmi--logo--height) * var(--hdsmi-template--unit)); +} + +.hdsmi-template--5 .hdsmi-template__text > * { + display: block; + margin: .5em 0; +} + +.hdsmi-template--5 .hdsmi-template__text > * > [class*="__inner"] { + display: inline; + line-height: var(--hdsmi--line-height); + padding: calc( ( ( (1em * var(--hdsmi--line-height)) - 1em) / 2) - (var(--hdsmi--line-gap) / 2) ) calc(2 * var(--hdsmi-template--unit)); + + background-color: var(--hdsmi--text--background-color); + -webkit-box-decoration-break: clone; + box-decoration-break: clone +} +.hdsmi-template--5 .hdsmi-template__text > :after { + content: "\A"; + white-space: pre-line +} +.hdsmi-template--5 .hdsmi-template__title { + +} +.hdsmi-template--5 .hdsmi-template__image { + width: calc(50 * var(--hdsmi-template--unit)); + height: 100%; + object-fit: cover +} +.hdsmi-template--5 .hdsmi-template__logo { + position: absolute; + top: calc(3 * var(--hdsmi-template--unit)); + right: calc(3 * var(--hdsmi-template--unit)) +} diff --git a/assets/img/google-font-family-example.jpg b/assets/img/google-font-family-example.jpg new file mode 100644 index 0000000..03d3840 Binary files /dev/null and b/assets/img/google-font-family-example.jpg differ diff --git a/assets/img/google-font-url-example.jpg b/assets/img/google-font-url-example.jpg new file mode 100644 index 0000000..096daf6 Binary files /dev/null and b/assets/img/google-font-url-example.jpg differ diff --git a/assets/img/no-image.jpg b/assets/img/no-image.jpg new file mode 100644 index 0000000..d2fcabd Binary files /dev/null and b/assets/img/no-image.jpg differ diff --git a/assets/js/ssi-wpjm-admin.js b/assets/js/ssi-wpjm-editor.js similarity index 73% rename from assets/js/ssi-wpjm-admin.js rename to assets/js/ssi-wpjm-editor.js index 835314e..13b9cad 100644 --- a/assets/js/ssi-wpjm-admin.js +++ b/assets/js/ssi-wpjm-editor.js @@ -24,17 +24,27 @@ // what happens on success. success: function( response, status, request ) { - // set the image src to the response. - $( '.ssi-image' ).attr( 'src', response.url ); + // if the response is a success. + if ( false !== response.success ) { - // change the media id in the delete button. - $( '.delete-ssi-image-button' ).data( 'media-id', response.id ); + // set the image src to the response. + $( '.ssi-image' ).attr( 'src', response.url ); - // remove the hidden class for the delete button. - $( '.delete-ssi-image-button' ).removeClass( 'ssi-hidden' ); + // change the media id in the delete button. + $( '.delete-ssi-image-button' ).data( 'media-id', response.id ); + + // remove the hidden class for the delete button. + $( '.delete-ssi-image-button' ).removeClass( 'ssi-hidden' ); + + // add the hidden class for the add button. + $( '.generate-ssi-image-button' ).addClass( 'ssi-hidden' ); + + } else { - // add the hidden class for the add button. - $( '.generate-ssi-image-button' ).addClass( 'ssi-hidden' ); + $( '.ssi-wpjm-error' ).remove(); + $( '.ssi-wpjm-spinner' ).before( '

' + response.error + '

' ); + + } // hide the deploy spinner. $( '.ssi-wpjm-spinner' ).hide(); @@ -44,8 +54,8 @@ /* what happens on success */ error: function( response ) { - console.log( 'Error' ); - console.log( response ); + // hide the deploy spinner. + $( '.ssi-wpjm-spinner' ).hide(); } @@ -103,8 +113,8 @@ /* what happens on success */ error: function( response ) { - console.log( 'Error' ); - console.log( response ); + // hide the deploy spinner. + $( '.ssi-wpjm-spinner' ).hide(); } diff --git a/assets/js/ssi-wpjm-settings.js b/assets/js/ssi-wpjm-settings.js new file mode 100644 index 0000000..6b480e7 --- /dev/null +++ b/assets/js/ssi-wpjm-settings.js @@ -0,0 +1,313 @@ +(function( $ ) { + + // Add Color Picker to all inputs that have .ssi-wpjm-input--color-picker + $( function() { + $( '.ssi-wpjm-input--color-picker' ).wpColorPicker(); + }); + + $('body').on('click', '.ssi-wpjm-image-button', function(e) { + e.preventDefault(); + + // get the previous input. + var inputID = $( this ).prev(); + var imgID = $( inputID ).prev().children('img')[0]; + + ssi_wpjm_image_uploader = wp.media({ + title: 'Image', + button: { + text: 'Use this image' + }, + multiple: false + }).on('select', function() { + + var attachment = ssi_wpjm_image_uploader.state().get('selection').first().toJSON(); + $( inputID ).val(attachment.id); + $( imgID ).attr( 'src', attachment.sizes.full.url ); + }) + .open(); + }); + + $('body').on('click', '.ssi-wpjm-image--remove', function(e) { + + // get the previous input. + var img = $( this ).prev(); + + $( img ).attr( 'src', $( this ).data( 'placeholder' ) ); + $( '#' + $( this ).data( 'input-id' ) ).val(''); + + }); + + $('body').on('click', '.ssi-wpjm-gallery-button', function(e) { + + e.preventDefault(); + + // get the current values. + currentValue = $( this ).prev().val(); + + // if current value is currently empty. + if ( currentValue === '' ) { + currentValues = []; + } else { + currentValues = currentValue.split( ',' ); + } + + // get the current gallery images stored. + var galleryImageIds = $( this ).prev(); + + // get the gallery wrapper element. + var galleryWrapper = galleryImageIds.prev(); + + ssi_wpjm_gallery_uploader = wp.media({ + title: 'Image', + button: { + text: 'Use this image' + }, + multiple: true + }).on('select', function() { + + var attachments = ssi_wpjm_gallery_uploader.state().get('selection').toJSON(); + + // loop through each of the attachments selected. + $.each( attachments , function( index, val ) { + + // if this attachment id is not already in the current values array. + if ( currentValues.indexOf( val.id + '' ) !== 0 ) { + + // add attachment ID to the array. + currentValues.push( val.id ); + + // output a new figure and image element on the page. + + // create a new figure element. + imageFigure = $( '
' ); + + // create the removal span. + removeSpan = $( '' ); + removeSpan.attr( 'data-image-id', val.id ); + + // add the span for removing. + $( imageFigure ).prepend( removeSpan ); + + imageEl = $( '' ) + imageEl.attr( 'src', val.sizes.thumbnail.url ); + + // add a new image to the figure. + $( imageFigure ).prepend( imageEl ); + + // append to the gallery wrapper. + $( galleryWrapper ).prepend( imageFigure ); + + + } + + }); + + // convert the current values array to a new values string. + newValues = currentValues.toString(); + + // set the input to the new current values. + $( galleryImageIds ).val( newValues ); + + }) + .open(); + + }); + + $('body').on('click', '.ssi-wpjm-gallery--remove', function(e) { + + // get the previous input. + var img = $( this ).prev(); + var figure = $( img ).parent(); + + // remove this image. + figure.remove(); + + // get the current value of the background images input. + // NEED TO FIND THIS DYNAMICALLY BASED ON WHERE WE ARE ON CLICK! + var currentImages = $( '#ssi_wpjm_background_images-input').val(); + var currentImagesArray = currentImages.split( ',' ); + + var imageID = $( this ).data( 'image-id' ); + + // find the key of this image id in the current images array. + var key = currentImagesArray.indexOf( imageID + '' ); + + // remove the imageID from the current images array. + currentImagesArray.splice( key, 1 ); + + // NEED TO FIND THIS DYNAMICALLY BASED ON WHERE WE ARE ON CLICK! + $( '.ssi-wpjm-input--gallery' ).val( currentImagesArray ); + + }); + + + + + + + /* Live preview settings */ + + /* Logo size */ + var logoSize = document.querySelector("#ssi_wpjm_logo_size"); + + logoSize.addEventListener("change", function() { + document.querySelector(".hdsmi-template").style.setProperty("--hdsmi--logo--height", this.value); + }); + + /* Text color */ + $('#ssi_wpjm_text_color').iris({ + //hide: false, + change: function(event, ui) { + // event = standard jQuery event, produced by whichever control was changed. + // ui = standard jQuery UI object, with a color member containing a Color.js object + + // update customproperty on 'Clear' button press. + $('.wp-picker-clear').on('click', function(){ + + // update the custom property. + document.querySelector(".hdsmi-template").style.setProperty("--hdsmi--text--background-color", 'transparent'); + + }); + + // update the custom property. + document.querySelector(".hdsmi-template").style.setProperty("--hdsmi--text--color", ui.color.toString()); + + // update the color preview background color. + $(this).parents('.wp-picker-container').find('.button.wp-color-result').css('background-color', ui.color.toString()); + + } + }); + + /* Text background color */ + //var added_clearer = false; + $('#ssi_wpjm_text_bg_color').iris({ + //hide: false, + change: function(event, ui) { + // event = standard jQuery event, produced by whichever control was changed. + // ui = standard jQuery UI object, with a color member containing a Color.js object + + // update customproperty on 'Clear' button press. + $('.wp-picker-clear').on('click', function(){ + + // update the custom property. + document.querySelector(".hdsmi-template").style.setProperty("--hdsmi--text--background-color", 'transparent'); + + }); + + // update the custom property. + document.querySelector(".hdsmi-template").style.setProperty("--hdsmi--text--background-color", ui.color.toString()); + + // update the color preview background color. + $(this).parents('.wp-picker-container').find('.button.wp-color-result').css('background-color', ui.color.toString()); + + } + }); + + + /* Background color */ + $('#ssi_wpjm_bg_color').iris({ + //hide: false, + change: function(event, ui) { + // event = standard jQuery event, produced by whichever control was changed. + // ui = standard jQuery UI object, with a color member containing a Color.js object + + // update customproperty on 'Clear' button press. + $('.wp-picker-clear').on('click', function(){ + + // update the custom property. + document.querySelector(".hdsmi-template").style.setProperty("--hdsmi--text--background-color", 'transparent'); + + }); + + // update the custom property. + document.querySelector(".hdsmi-template").style.setProperty("--hdsmi--background-color", ui.color.toString()); + + // update the color preview background color. + $(this).parents('.wp-picker-container').find('.button.wp-color-result').css('background-color', ui.color.toString()); + + } + }); + + /* Title font size */ + var titleFontSize = document.querySelector("#ssi_wpjm_title_size"); + + titleFontSize.addEventListener("change", function() { + document.querySelector(".hdsmi-template").style.setProperty("--hdsmi--title--font-size", this.value); + }); + + /* Location font size */ + var locationFontSize = document.querySelector("#ssi_wpjm_location_size"); + + locationFontSize.addEventListener("change", function() { + document.querySelector(".hdsmi-template").style.setProperty("--hdsmi--location--font-size", this.value); + }); + + /* Salary font size */ + var salaryFontSize = document.querySelector("#ssi_wpjm_salary_size"); + + salaryFontSize.addEventListener("change", function() { + var newFontSize = this.value; + document.querySelector(".hdsmi-template").style.setProperty("--hdsmi--salary--font-size", newFontSize); + }); + + /* Template choice */ + var templateChoice = document.querySelector("#ssi_wpjm_template"); + + templateChoice.addEventListener("change", function() { + + var template = document.querySelector(".hdsmi-template"); + + template.classList.remove('hdsmi-template--1', 'hdsmi-template--2', 'hdsmi-template--3', 'hdsmi-template--4', 'hdsmi-template--5'); + + template.classList.add("hdsmi-template--" + this.value); + + }); + + /* Logo file */ + $('img.ssi-wpjm-image').on('load', function () { + $('.hdsmi-template__logo').attr('src', $('img.ssi-wpjm-image').attr('src')); + }); + + /* Background images */ + + $('img.ssi-wpjm-gallery-image').on('load', function () { + + imgSrc = $(this).attr('src'); + fullImgSrc = imgSrc.replace("-150x150", ""); + $('.hdsmi-template__image').attr('src', fullImgSrc); + + }); + + $(document).on('click', '.ssi-wpjm-gallery-image', function () { + + // get the image source. + imgSrc = $(this).attr('src'); + fullImgSrc = imgSrc.replace("-150x150", ""); + + // set template image source. + $('.hdsmi-template__image').attr('src', fullImgSrc); + + }); + + /* Placeholder text fields */ + $('.hdsmi-template__text > * ').on('focusout', function () { + + //console.log('Focusout'); + + // find the inner element + editableText = $(this).find('[contenteditable="true"]'); + + // get the content. + thisContent = editableText.text(); + //console.log(thisContent); + + // get the data-input value. + dataInputValue = editableText.data('input'); + //console.log(dataInputValue); + + // set the input value. + $('#' + dataInputValue).val(thisContent); + + }); + +})( jQuery ); \ No newline at end of file diff --git a/endpoints/generate-html.php b/endpoints/generate-html.php new file mode 100644 index 0000000..de89a14 --- /dev/null +++ b/endpoints/generate-html.php @@ -0,0 +1,254 @@ + ssi_wpjm_get_template(), + 'post_id' => $post_id, + 'bg_color' => ssi_wpjm_get_bg_color(), + 'bg_text_color' => ssi_wpjm_get_text_bg_color(), + 'text_color' => ssi_wpjm_get_text_color(), + 'title_size' => ssi_wpjm_get_title_font_size(), + 'location_size' => ssi_wpjm_get_location_font_size(), + 'salary_size' => ssi_wpjm_get_salary_font_size(), + 'google_font_url' => ssi_wpjm_get_google_font_url(), + 'google_font_family' => ssi_wpjm_get_google_font_family(), + 'logo_size' => ssi_wpjm_get_logo_size(), + 'image' => wp_get_attachment_image_url( ssi_wpjm_get_random_image_id(), 'full' ), + 'logo' => wp_get_attachment_image_url( ssi_wpjm_get_logo_id(), 'full' ), +); + +// if the current post has a featured image. +if ( has_post_thumbnail( $args['post_id'] ) ) { + + // set the image url to that of the featured image. + $args['image'] = get_the_post_thumbnail_url( $args['post_id'], 'full' ); + +} + +// allow the args to be filtered. +$args = apply_filters( 'ssi_wpjm_endpoint_generate_args', $args ); + +// set the location of the template file, making it filterable. +$template_location = apply_filters( 'ssi_wpjm_endpoint_generate_template_location', SSI_WPJM_LOCATION . '/templates/', $args ); + +// start output buffering. +ob_start(); + +?> + + + + + + + + + + + + + + + + + + +'; diff --git a/endpoints/generate.php b/endpoints/generate.php deleted file mode 100644 index 82b6173..0000000 --- a/endpoints/generate.php +++ /dev/null @@ -1,173 +0,0 @@ - get_option( 'ssi_wpjm_template' ), - 'job_post' => $job_post, - 'bg_color' => get_option( 'ssi_wpjm_bg_color' ), - 'bg_text_color' => get_option( 'ssi_wpjm_text_bg_color' ), - 'text_color' => get_option( 'ssi_wpjm_text_color' ), - 'image' => wp_get_attachment_image_url( ssi_wpjm_get_random_image_id(), 'full' ), - 'logo' => wp_get_attachment_image_url( get_option( 'ssi_wpjm_logo_id' ), 'full' ), -); - -// allow the args to be filtered. -$args = apply_filters( 'ssi_wpjm_endpoint_generate_args', $args ); - -// set the location of the template file, making it filterable. -$template_location = apply_filters( 'ssi_wpjm_generate_template_location', SSI_WPJM_LOCATION . '/templates/', $args ); -$template_css_location = apply_filters( 'ssi_wpjm_generate_template_css_location', SSI_WPJM_LOCATION . '/assets/css/', $args ); - -// start output buffering. -ob_start(); - -// load the template markup, passing our args. -load_template( SSI_WPJM_LOCATION . '/assets/css/global.php', true, $args ); - -// if our template exists. -if ( file_exists( $template_css_location . $args['template'] . '.php' ) ) { - - // load the template markup, passing our args. - load_template( $template_css_location . $args['template'] . '.php', true, $args ); - -} - -// if our template exists. -if ( file_exists( $template_location . $args['template'] . '.php' ) ) { - - // load the template markup, passing our args. - load_template( $template_location . $args['template'] . '.php', true, $args ); - -} - -// get the contents of the buffer, the template markup and clean the buffer. -$text = ob_get_clean(); - -// find all of the strings that need replacing. -preg_match_all( "/\[[^\]]*\]/", $text, $matches ); - -// if we have matches. -if ( $matches !== false ) { - - // loop through the matches. - foreach ( $matches[0] as $match ) { - - // remove the brackets for the string. - $match_value = str_replace( '[', '', $match ); - $match_value = str_replace( ']', '', $match_value ); - - // if this is a meta replace. - if ( strpos( $match_value, 'meta' ) !== false ) { - - // remove the meta: string - $match_key = str_replace( 'meta:', '', $match_value ); - - // get the value of this meta. - $match_value = get_post_meta( $args['job_post'], $match_key, true ); - - // filter the match post value. - $match_value = apply_filters( 'ssi_wpjm_template_' . $match_key, $match_value, $match_key ); - - // replace the original text string with the new - $text = str_replace( $match, $match_value, $text ); - - } - - // if this is a tax replace. - if ( strpos( $match_value, 'tax' ) !== false ) { - - // remove the tax: string - $match_key = str_replace( 'tax:', '', $match_value ); - - // get the value of this meta. - $match_value = wp_strip_all_tags( - get_the_term_list( - $args['job_post'], - $match_key, - '', - ', ', - '' - ) - ); - - // filter the match post value. - $match_value = apply_filters( 'ssi_wpjm_template_' . $match_key, $match_value, $match_key ); - - // replace the original text string with the new - $text = str_replace( $match, $match_value, $text ); - - } - - // if this is a post field replace. - if ( strpos( $match_value, 'post' ) !== false ) { - - // remove the tax: string - $match_key = str_replace( 'post:', '', $match_value ); - - // get the value of this meta. - $match_value = get_post_field( $match_key, $args['job_post'] ); - - // if we have no job post id. - if ( empty( $args['job_post'] ) ) { - - // set the match value to the site title. - $match_value = get_bloginfo( 'title' ); - - } - - // filter the match post value. - $match_value = apply_filters( 'ssi_wpjm_template_' . $match_key, $match_value, $match_key ); - - // replace the original text string with the new - $text = str_replace( $match, $match_value, $text ); - - } - - // if we have a logo. - if ( empty( $args['logo'] ) ) { - - // set the logo to a transparent image. - $args['logo'] = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='; - - } - - // if we have a image. - if ( empty( $args['image'] ) ) { - - // set the image to a transparent image. - $args['logo'] = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='; - - } - - // if we have a template. - if ( empty( $args['template'] ) ) { - - // default the template. - $args['template'] = '1'; - - } - - // replace the logo string. - $text = str_replace( '[logo]', $args['logo'], $text ); - - // replace the template string. - $text = str_replace( '[template]', $args['template'], $text ); - - // replace the image string. - $text = str_replace( '[image]', $args['image'], $text ); - - } - -} - -echo $text; diff --git a/inc/admin-menu.php b/inc/admin-menu.php new file mode 100644 index 0000000..39b01b4 --- /dev/null +++ b/inc/admin-menu.php @@ -0,0 +1,161 @@ + + +
+ +

+ + + +
+ + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + +
+ + + +

+ +

+ + + +
+ + + +
+ + false, - 'error' => __( 'No license key provided.', 'simple-social-image-wpjm' ), - ); - - } - - $social_image_html_url = home_url( '/ssi-wpjm/v1/generate-html/' ); - $social_image_html_url = add_query_arg( - array( - 'job_id' => absint( $request['post_id'] ), - 'timestamp' => time(), - ), - $social_image_html_url - ); - - // set the URL of the simple social images api. - $api_url = ssi_wpjm_generate_api_url(); - - // add the paramters to the api_url. - $api_url = add_query_arg( - apply_filters( - 'ssi_wpjm_api_url_query_args', - array( - 'license_key' => sanitize_text_field( $license_key ), - 'site_url' => home_url(), - 'url' => urlencode( $social_image_html_url ), - 'element' => '.hdsmi-template', - 'ttl' => 300, - ), - ), - $api_url - ); - - // send the request to the api. - $response = wp_remote_get( - $api_url, - array( - 'sslverify' => false, - ) - ); - - // if there was an error. - if ( is_wp_error( $response ) || wp_remote_retrieve_response_code( $response ) !== 200 ) { - - // output error. - return array( - 'success' => false, - 'error' => __( 'Request returned an error.', 'simple-social-image-wpjm' ), - ); - - } - - // get the body of the request, decoded as an array. - $response = json_decode( wp_remote_retrieve_body( $response ), true ); - - // if we have no url returned. - if ( empty( $response['url'] ) ) { - - // output error. - return array( - 'success' => false, - 'error' => __( 'No image was generated.', 'simple-social-image-wpjm' ), - ); - - } - - // we are outside of WP Admin so need to include these files. - require_once( ABSPATH . 'wp-admin/includes/media.php' ); - require_once( ABSPATH . 'wp-admin/includes/file.php' ); - require_once( ABSPATH . 'wp-admin/includes/image.php' ); - - // grab the image and store in the media library. - $image_id = media_sideload_image( $response['url'], absint( $request['post_id'] ), '', 'id' ); - - // if we have an image set. - if ( ! is_wp_error( $image_id ) ) { - - // save meta data indicating this is image generated by hd og images. - update_post_meta( $image_id, 'ssi_wpjm_image', true ); - - // get the current image id for the og:image. - $current_image_id = get_post_meta( absint( $request['post_id'] ), 'ssi_wpjm_image_id', true ); - - // if we have a current image. - if ( ! empty( $current_image_id ) ) { - - // delete the attachment. - wp_delete_attachment( $current_image_id ); - - } - - // store the image ID as meta against the job. - update_post_meta( absint( $request['post_id'] ), 'ssi_wpjm_image_id', $image_id ); - - } - - return apply_filters( - 'ssi_wpjm_generated_social_image', - array( - 'id' => $image_id, - 'url' => wp_get_attachment_image_url( $image_id, 'ssi_image' ), - ), - $request - ); + return ssi_wpjm_generate_social_image( $request['post_id'] ); } diff --git a/inc/enqueue.php b/inc/enqueue.php new file mode 100644 index 0000000..21ed8ee --- /dev/null +++ b/inc/enqueue.php @@ -0,0 +1,87 @@ + esc_url_raw( rest_url() ), + 'nonce' => wp_create_nonce( 'wp_rest' ) + ) + ); + + // register the js. + wp_enqueue_script( + 'ssi_wpjm_editor_js', + SSI_WPJM_LOCATION_URL . '/assets/js/ssi-wpjm-editor.js', + array( 'jquery' ), + SSI_WPJM_VERSION, + true + ); + + } + + // register the admin css. + wp_enqueue_style( + 'ssi_wpjm_admin_css', + SSI_WPJM_LOCATION_URL . '/assets/css/ssi-wpjm-admin.css', + array(), + SSI_WPJM_VERSION + ); + + // if this is the ssi settings page. + if ( $hook === 'job_listing_page_ssi-wpjm-settings' ) { + + // if we have a value for a google font url. + if ( ! empty ( ssi_wpjm_get_google_font_url() ) ) { + + // enqueue the google font style on the settings page. + wp_enqueue_style( + 'ssi_wpjm_google_font_url', + ssi_wpjm_get_google_font_url(), + ); + + } + + // enqueue the template css for the preview to work. + wp_enqueue_style( + 'ssi_wpjm_template_css', + SSI_WPJM_LOCATION_URL . '/assets/css/ssi-wpjm-generate.css', + ); + + // add the color picker css file + wp_enqueue_style( 'wp-color-picker' ); + + // include our custom jQuery file with WordPress Color Picker dependency + wp_enqueue_script( + 'ssi_wpjm_admin_js', + SSI_WPJM_LOCATION_URL . '/assets/js/ssi-wpjm-settings.js', + array( 'wp-color-picker' ), + false, + true + ); + + // if the media js is not already enqueued. + if ( ! did_action( 'wp_enqueue_media' ) ) { + wp_enqueue_media(); + } + + } + +} + +add_action( 'admin_enqueue_scripts', 'ssi_wpjm_enqueue_scripts' ); diff --git a/inc/functions.php b/inc/functions.php new file mode 100644 index 0000000..18e8808 --- /dev/null +++ b/inc/functions.php @@ -0,0 +1,383 @@ + + + + + +
+ +
+
+
+ + + + + + + + + +
+ + + + +
+
+ +
+ ID; + } + + // get the license key. + $license_key = get_option( 'ssi_wpjm_license_key' ); + + // if we have no license key. + if ( empty( $license_key ) ) { + + // output error. + return array( + 'success' => false, + 'error' => __( 'No license key provided.', 'simple-social-image-wpjm' ), + ); + + } + + $social_image_html_url = home_url( '/ssi-wpjm/v1/generate-html/' ); + $social_image_html_url = add_query_arg( + array( + 'post_id' => absint( $post_id ), + 'timestamp' => time(), + ), + $social_image_html_url + ); + + // set the URL of the simple social images api. + $api_url = ssi_wpjm_generate_api_url(); + + // add the paramters to the api_url. + $api_url = add_query_arg( + apply_filters( + 'ssi_wpjm_api_url_query_args', + array( + 'license_key' => sanitize_text_field( $license_key ), + 'site_url' => home_url(), + 'url' => urlencode( $social_image_html_url ), + 'element' => '.hdsmi-template', + 'ttl' => 300, + ), + ), + $api_url + ); + + // send the request to the api. + $response = wp_remote_get( + $api_url, + array( + 'sslverify' => false, + 'timeout' => 30, + ) + ); + + // if there was an error. + if ( is_wp_error( $response ) ) { + + // output error. + return array( + 'success' => false, + 'error' => $response->get_error_message(), + ); + + } + + // get the body of the request, decoded as an array. + $response = json_decode( wp_remote_retrieve_body( $response ), true ); + + // if we have no url returned. + if ( empty( $response['url'] ) ) { + + // output error. + return $response; + + } + + // we are outside of WP Admin so need to include these files. + require_once( ABSPATH . 'wp-admin/includes/media.php' ); + require_once( ABSPATH . 'wp-admin/includes/file.php' ); + require_once( ABSPATH . 'wp-admin/includes/image.php' ); + + // grab the image and store in the media library. + $image_id = media_sideload_image( $response['url'], absint( $post_id ), '', 'id' ); + + // if we have an image set. + if ( ! is_wp_error( $image_id ) ) { + + // save meta data indicating this is image generated by hd og images. + update_post_meta( $image_id, 'ssi_wpjm_image', true ); + + // get the current image id for the og:image. + $current_image_id = get_post_meta( absint( $post_id ), 'ssi_wpjm_image_id', true ); + + // if we have a current image. + if ( ! empty( $current_image_id ) ) { + + // delete the attachment. + wp_delete_attachment( $current_image_id ); + + } + + // store the image ID as meta against the job. + $result = update_post_meta( absint( $post_id ), 'ssi_wpjm_image_id', $image_id ); + + } + + return apply_filters( + 'ssi_wpjm_generated_social_image', + array( + 'success' => true, + 'id' => $image_id, + 'url' => wp_get_attachment_image_url( $image_id, 'ssi_image' ), + ), + $post_id + ); + +} + +/** + * Outputs the meta tags in the head for open graph and twitter images. + */ +function ssi_wpjm_render_tags() { + + // if this is not a single job. + if ( ! is_singular( 'job_listing' ) ) { + return; + } + + // get the social sharing image url. + $ssi_image_url = ssi_wpjm_ssi_get_image_url(); + + // if we have no URL. + if ( '' === $ssi_image_url ) { + return; + } + + // set an array of tags to render. + $tags = array(); + + // if we are rendering open graph tags. + if ( apply_filters( 'ssi_wpjm_render_og_image_tags', true ) === true ) { + + // merge the current tags with our tags array. + $tags = array_merge( + $tags, + array( + 'og:image' => $ssi_image_url, + 'og:image:width' => 1200, + 'og:image:height' => 630, + ) + ); + + } + + // if we are rendering twitter tags. + if ( apply_filters( 'ssi_wpjm_render_twitter_image_tags', true ) === true ) { + + // merge the current tags with our tags array. + $tags = array_merge( + $tags, + array( + 'twitter:image' => $ssi_image_url, + 'twitter:card' => 'summary_large_image', + ) + ); + + } + + // if we don't have any tags to output. + if ( empty( $tags ) ) { + return; + } + + echo '' . PHP_EOL; + + // loop through each tag. + foreach ( $tags as $property => $content ) { + + // create a filter name for this tag. + $filter = 'ssi_wpjm_meta_' . str_replace( ':', '_', $property ); + + // filter the tag + $content = apply_filters( $filter, $content ); + + // set the meta tag to name for twitter and property for open graph. + $label = strpos( $property, 'twitter' ) === false ? 'property' : 'name'; + + // if we have any content. + if ( $content ) { + + // print the tag screen. + printf( + '' . PHP_EOL, + esc_attr( $label ), + esc_attr( $property ), + esc_attr( $content ) + ); + + } + + } + + echo '' . PHP_EOL; + +} + +add_action( 'wp_head', 'ssi_wpjm_render_tags' ); diff --git a/inc/helpers.php b/inc/helpers.php new file mode 100644 index 0000000..6e70f4b --- /dev/null +++ b/inc/helpers.php @@ -0,0 +1,339 @@ +ID; + + } + + // get the image id stored as meta. + $image_id = get_post_meta( $post_id, 'ssi_wpjm_image_id', true ); + + // if we have no image id. + if ( empty( $image_id ) ) { + return 0; + } + + // get the image url for the associated meta. + $image_url = wp_get_attachment_image_url( $image_id, 'ssi_image' ); + + // if we have no image url. + if ( $image_url === false ) { + return 0; + } + + // go this far, we must have an image. + return apply_filters( 'ssi_wpjm_has_image', $image_id, $post_id ); + +} + +/** + * Returns the image url of a posts social image. + * + * @param integer $post_id The ID of the post to return the image of. Defaults to current post. + * @return string The image URL or an empty string if the post does not have an image. + */ +function ssi_wpjm_ssi_get_image_url( $post_id = 0 ) { + + // if no post ID is provided. + if ( 0 === $post_id ) { + $post_id = get_the_ID(); + } + + // if this post does not have an image. + if ( 0 === ssi_wpjm_has_image( $post_id ) ) { + return ''; + } + + // return the image url. + return apply_filters( + 'ssi_wpjm_ssi_image_url', + wp_get_attachment_image_url( + get_post_meta( $post_id, 'ssi_wpjm_image_id', true ), + 'ssi_image' + ), + $post_id + ); + +} + +/** + * Sorts an array by the order paramter. + */ +function ssi_wpjm_array_sort_by_order_key( $a, $b ) { + + // if no order paramter is provided. + if ( ! isset( $a['order'] ) ) { + + // set the order to 10. + $a['order'] = 10; + + } + + // if no order paramter is provided. + if ( ! isset( $b['order'] ) ) { + + // set the order to 10. + $b['order'] = 10; + + } + + // if the first array element is the same as the next. + if ( $a['order'] === $b['order'] ) { + return 0; + } + + // return -1 is the first array element is less than the second, otherwise return 1. + return ( $a['order'] < $b['order'] ) ? -1 : 1; + +} + +/** + * Returns an array of all the registered settings. + */ +function ssi_wpjm_get_settings() { + + $settings = apply_filters( + 'ssi_wpjm_settings', + array() + ); + + // sort the settings based on the order parameter. + uasort( $settings, 'ssi_wpjm_array_sort_by_order_key' ); + + // return the settings. + return $settings; + +} + +/** + * Gets the current active template selected. + * + * @return string The template name. + */ +function ssi_wpjm_get_template() { + + return apply_filters( + 'ssi_wpjm_template', + get_option( 'ssi_wpjm_template' ) + ); + +} + +/** + * Gets the current active text color. + */ +function ssi_wpjm_get_text_color() { + + return apply_filters( + 'ssi_wpjm_text_color', + get_option( 'ssi_wpjm_text_color' ) + ); + +} + +/** + * Gets the current active text background color. + */ +function ssi_wpjm_get_text_bg_color() { + + return apply_filters( + 'ssi_wpjm_text_bg_color', + get_option( 'ssi_wpjm_text_bg_color' ) + ); + +} + +/** + * Gets the current active background color. + */ +function ssi_wpjm_get_bg_color() { + + return apply_filters( + 'ssi_wpjm_bg_color', + get_option( 'ssi_wpjm_bg_color' ) + ); + +} + +/** + * Gets the currently uploaded logo attachment ID. + */ +function ssi_wpjm_get_logo_id() { + + return apply_filters( + 'ssi_wpjm_logo_id', + get_option( 'ssi_wpjm_logo' ) + ); + +} + +/** + * Gets the currently set logo size. + */ +function ssi_wpjm_get_logo_size() { + + return apply_filters( + 'ssi_wpjm_logo_size', + get_option( 'ssi_wpjm_logo_size' ) + ); + +} + +/** + * Gets the currently uploaded logo attachment IDs as an array. + * + * @return array An array of attachment IDs or an empty array if no images added. + */ +function ssi_wpjm_get_background_images() { + + // get the background images. + $bg_images = get_option( 'ssi_wpjm_background_images' ); + + // if we have no bg images. + if ( empty( $bg_images ) ) { + return array(); + } + + return apply_filters( + 'ssi_wpjm_background_images', + explode( ',', $bg_images ) + ); + +} + +/** + * Gets the current title font size. + */ +function ssi_wpjm_get_title_font_size() { + + return apply_filters( + 'ssi_wpjm_title_font_size', + get_option( 'ssi_wpjm_title_size' ) + ); + +} + +/** + * Gets the current location font size. + */ +function ssi_wpjm_get_location_font_size() { + + return apply_filters( + 'ssi_wpjm_location_font_size', + get_option( 'ssi_wpjm_location_size' ) + ); + +} + +/** + * Gets the current salary font size. + */ +function ssi_wpjm_get_salary_font_size() { + + return apply_filters( + 'ssi_wpjm_salary_font_size', + get_option( 'ssi_wpjm_salary_size' ) + ); + +} + +/** + * Gets the title placeholder text. + */ +function ssi_wpjm_get_title_placeholder_text() { + + return apply_filters( + 'ssi_wpjm_title_placeholder_text', + get_option( 'ssi_wpjm_title_placeholder_text' ) + ); + +} + +/** + * Gets the location placeholder text. + */ +function ssi_wpjm_get_location_placeholder_text() { + + return apply_filters( + 'ssi_wpjm_location_placeholder_text', + get_option( 'ssi_wpjm_location_placeholder_text' ) + ); + +} + +/** + * Gets the salary placeholder text. + */ +function ssi_wpjm_get_salary_placeholder_text() { + + return apply_filters( + 'ssi_wpjm_salary_placeholder_text', + get_option( 'ssi_wpjm_salary_placeholder_text' ) + ); + +} + +/** + * Gets the current Google font URL. + */ +function ssi_wpjm_get_google_font_url() { + + return apply_filters( + 'ssi_wpjm_google_font_url', + get_option( 'ssi_wpjm_google_font_url' ) + ); + +} + +/** + * Gets the current Google font family. + */ +function ssi_wpjm_get_google_font_family() { + + // get the font family from settings. + $font_family = get_option( 'ssi_wpjm_google_font_family' ); + + // if the font family is empty. + if ( empty( $font_family ) ) { + + // set to default system family for sans serif. + $font_family = 'sans-serif;'; + + } + + return apply_filters( + 'ssi_wpjm_google_font_family', + $font_family + ); + +} + +/** + * Grabs a random image ID from those added to the settings page. + */ +function ssi_wpjm_get_random_image_id() { + + // get the image ids from options. + $images = ssi_wpjm_get_background_images(); + + $image_id_key = array_rand( $images, 1 ); + $image_id = $images[ $image_id_key ]; + + return absint( $image_id ); + +} diff --git a/inc/loader.php b/inc/loader.php index daeb735..c5dbc63 100644 --- a/inc/loader.php +++ b/inc/loader.php @@ -17,4 +17,19 @@ require_once( $includes_file ); } -} \ No newline at end of file +} + +// load in all the required plugin files. +$plugins_fies = glob( plugin_dir_path( __FILE__ ) . '/plugins/*.php' ); + +// if we have any plugin files. +if ( ! empty( $plugins_fies ) ) { + + // loop through each file. + foreach ( $plugins_fies as $plugin_file ) { + + // require this file in the plugin. + require_once( $plugin_file ); + + } +} diff --git a/inc/meta-box.php b/inc/meta-box.php index f16599f..31a671b 100644 --- a/inc/meta-box.php +++ b/inc/meta-box.php @@ -11,7 +11,7 @@ function ssi_wpjm_add_ssi_jobs_meta_box() { add_meta_box( 'ssi_wpjm', - __( 'Simple Social Images', 'simple-social-image-wpjm'), + __( 'Simple Social Images', 'simple-social-image-wpjm' ), 'ssi_wpjm_jobs_meta_box_output', 'job_listing', 'normal', @@ -27,74 +27,113 @@ function ssi_wpjm_add_ssi_jobs_meta_box() { */ function ssi_wpjm_jobs_meta_box_output( $post ) { - // default social image id. - $social_image_id = 0; + // if this is not a published post. + if ( $post->post_status !== 'publish' ) { + + ?> +

+ ID ); + } else { - // get the URL for the current social image. - $social_image_url = wp_get_attachment_image_url( $social_image_id, 'ssi_image' ); + // default social image id. + $social_image_id = 0; - // if we don't have a social image URL. - if ( empty ( $social_image_url ) ) { + // get the current social image for this post. + $social_image_id = ssi_wpjm_has_image( $post->ID ); - // set the url of the image to the placeholder. - $social_image_url = SSI_WPJM_LOCATION_URL . '/assets/img/social-placeholder.jpg'; + // get the URL for the current social image. + $social_image_url = wp_get_attachment_image_url( $social_image_id, 'ssi_image' ); - } + // if we don't have a social image URL. + if ( empty ( $social_image_url ) ) { - ?> -

- - + // set the url of the image to the placeholder. + $social_image_url = SSI_WPJM_LOCATION_URL . '/assets/img/social-placeholder.jpg'; - $post->ID, + '_wpnonce' => wp_create_nonce( 'wp_rest' ), + ), + $endpoint_url + ); - // if the is a current social image set. - if ( $social_image_id !== 0 ) { + ?> +

ID ) ) . '">preview it first if you like.', 'simpe-social-images-wpjm' ); ?>

- // we should be showing the button so remove the hide class. - $key = array_search( 'delete-ssi-image-button--hidden', $delete_button_class, true ); + + + - // output the delete button. - ?> + " id="delete-ssi-image" data-endpoint-url="" data-media-id="" data-placeholder-img=""> - - + // set class for the delete button. + $delete_button_class = array( + 'button-secondary', + 'delete-ssi-image-button', + 'ssi-hidden', + ); + + // if there is a current social image set. + if ( $social_image_id !== 0 ) { - + // if we have found the class. + if ( $key !== false ) { - + // remove the class from the array. + unset( $delete_button_class[ $key ] ); - + // output the delete button. + ?> - + - + + + + + + + + social->facebook->getImage(); + + // if we have a custom open graph image set. + if ( ! empty( $custom_og_image ) ) { + + // prevent this plugin outputting an og image. + add_filter( 'ssi_wpjm_render_og_image_tags', '__return_false' ); + + } + + // return the meta tags. + return $facebook_tags; +} + +add_filter( 'aioseo_facebook_tags', 'ssi_wpjm_aioseo_change_open_graph_tags' ); + +/** + * Change Twitter image output with All in one SEO if necessary. + * + * @param string $url URL of the image. + */ +function ssi_wpjm_aioseo_change_twitter_tags( $twitter_tags ) { + + // if this is not a single job. + if ( ! is_singular( 'job_listing') ) { + return $twitter_tags; + } + + // get custom twitter images. + $custom_twitter_image = \aioseo()->social->twitter->getImage(); + + // if we have a custom twitter image set. + if ( ! empty( $custom_twitter_image ) ) { + + // prevent this plugin outputting a twitter image. + add_filter( 'ssi_wpjm_render_twitter_image_tags', '__return_false' ); + + } + + // return the meta tags. + return $twitter_tags; +} + +add_filter( 'aioseo_twitter_tags', 'ssi_wpjm_aioseo_change_twitter_tags' ); diff --git a/inc/plugins/rank-math-seo.php b/inc/plugins/rank-math-seo.php new file mode 100644 index 0000000..6e36415 --- /dev/null +++ b/inc/plugins/rank-math-seo.php @@ -0,0 +1,89 @@ + 'ssi_wpjm_license_key', - 'label' => __( 'License Key', 'simple-social-images-wpjm' ), - 'desc' => __( 'Enter your license key for the Simple Social Images service. You can signup for a license here.', 'simple-social-images-wpjm' ), - 'type' => 'text', - 'attributes' => array(), - ), - array( - 'name' => 'ssi_wpjm_template', - 'std' => '', - 'label' => __( 'Template', 'simple-social-images-wpjm' ), - 'desc' => __( 'Choose your template for the social sharing images that are generated.', 'simple-social-images-wpjm' ), - 'type' => 'select', - 'options' => array( - '1' => __( 'Template 1', 'simple-social-images-wpjm' ), - '2' => __( 'Template 2', 'simple-social-images-wpjm' ), - '3' => __( 'Template 3', 'simple-social-images-wpjm' ), - '4' => __( 'Template 4', 'simple-social-images-wpjm' ), - '5' => __( 'Template 5', 'simple-social-images-wpjm' ), - ), - 'attributes' => array(), - ), - array( - 'name' => 'ssi_wpjm_text_color', - 'label' => __( 'Text Colour', 'simple-social-images-wpjm' ), - 'desc' => __( 'Enter the hex code of your text colour. The text on your image will be this colour.', 'simple-social-images-wpjm' ), - 'type' => 'text', - 'attributes' => array(), - ), - array( - 'name' => 'ssi_wpjm_text_bg_color', - 'label' => __( 'Text Background Colour', 'simple-social-images-wpjm' ), - 'desc' => __( 'Enter the hex code of your text background colour. The colour behind your text on your image will be this colour.', 'simple-social-images-wpjm' ), - 'type' => 'text', - 'attributes' => array(), - ), - array( - 'name' => 'ssi_wpjm_bg_color', - 'label' => __( 'Background Colour', 'simple-social-images-wpjm' ), - 'desc' => __( 'Enter the hex code of your background colour.', 'simple-social-images-wpjm' ), - 'type' => 'text', - 'attributes' => array(), - ), - array( - 'name' => 'ssi_wpjm_images', - 'label' => __( 'Image IDs', 'simple-social-images-wpjm' ), - 'desc' => __( 'Enter a comma seperated list of WordPress attachment IDs of the images you want to be randomly used when your image is generated.', 'simple-social-images-wpjm' ), - 'type' => 'text', - 'attributes' => array(), - ), + // get the registered settings. + $settings = ssi_wpjm_get_settings(); + + // if we have no settings. + if ( empty( $settings ) ) { + return; + } + + // set up default option args. + $defaults = array( + 'label' => '', + 'option_name' => '', + 'input_type' => 'text', + 'type' => 'string', + 'description' => '', + 'sanitize_callback' => null, + 'show_in_rest' => false, + 'order' => 10, + ); + + // loop through each setting. + foreach ( $settings as $setting ) { + + // merge the args with defaults. + $args = wp_parse_args( $setting, $defaults ); + + // if no setting key is set. + if ( '' === $args['option_name'] ) { + + // don't register the setting. + continue; + + } + + // register this setting. + register_setting( + 'ssi_wpjm_settings', // setting group name. + $args['option_name'], // setting name - the option key. array( - 'name' => 'ssi_wpjm_logo_id', - 'label' => __( 'Logo Attachment ID', 'simple-social-images-wpjm' ), - 'desc' => __( 'Enter the attachment IDs of the image you want to use as the logo.', 'simple-social-images-wpjm' ), - 'type' => 'text', - 'attributes' => array(), - ), - ), - array( - 'before' => __( 'Simple Social Images generates a automatic, beautiful and branded image for each job which, if the job is shared on social media, for example LinkedIn, shows as the preview image for the job. This really makes your jobs stand out from the crowd in social media feeds. Enter your settings below.', 'simple-social-image-wpjm' ), + 'type' => $args['type'], + 'group' => 'ssi_wpjm_settings', + 'description' => $args['description'], + 'sanitize_callback' => $args['sanitize_callback'], + 'show_in_rest' => $args['show_in_rest'], + ) + ); + + } + +} + +add_action( 'admin_init', 'ssi_wpjm_register_settings' ); + +/** + * Registers the plugins default settings. + * + * @param array $settings The current array of settings. + * @return array $settings The modified array of settings. + */ +function ssi_wpjm_register_default_settings( $settings ) { + + $settings['license_key'] = array( + 'option_name' => 'ssi_wpjm_license_key', + 'label' => __( 'License Key', 'simple-social-images-wpjm' ), + 'description' => sprintf( __( 'Enter your %1$sSimple Social Images%2$s license key. This is required in order to generate your social sharing images.', 'simple-social-images-wpjm' ), '', '' ), + 'input_type' => 'text', + 'order' => 10, + ); + + $settings['template_section'] = array( + 'option_name' => 'ssi_wpjm_template_section', + 'label' => __( 'Template Settings', 'simple-social-images-wpjm' ), + 'input_type' => 'section', + 'order' => 12, + ); + + $settings['template'] = array( + 'option_name' => 'ssi_wpjm_template', + 'label' => __( 'Select a Template', 'simple-social-images-wpjm' ), + 'description' => __( 'Choose which template to use.', 'simple-social-images-wpjm' ), + 'input_type' => 'select', + 'options' => array( + '1' => __( 'Template 1', 'simple-social-images-wpjm' ), + '2' => __( 'Template 2', 'simple-social-images-wpjm' ), + '3' => __( 'Template 3', 'simple-social-images-wpjm' ), + '4' => __( 'Template 4', 'simple-social-images-wpjm' ), + '5' => __( 'Template 5', 'simple-social-images-wpjm' ), ), + 'order' => 15, ); - // return the settings array. + $settings['colors_section'] = array( + 'option_name' => 'ssi_wpjm_colors_section', + 'label' => __( 'Colour Settings', 'simple-social-images-wpjm' ), + 'input_type' => 'section', + 'order' => 20, + ); + + $settings['text_color'] = array( + 'option_name' => 'ssi_wpjm_text_color', + 'label' => __( 'Text Colour', 'simple-social-images-wpjm' ), + 'description' => __( 'Enter or choose the text colour.', 'simple-social-images-wpjm' ), + 'input_type' => 'color_picker', + 'order' => 30, + ); + + $settings['text_bg_color'] = array( + 'option_name' => 'ssi_wpjm_text_bg_color', + 'label' => __( 'Text Background Colour', 'simple-social-images-wpjm' ), + 'description' => __( 'Enter or choose the text background colour.', 'simple-social-images-wpjm' ), + 'input_type' => 'color_picker', + 'order' => 40, + ); + + $settings['bg_color'] = array( + 'option_name' => 'ssi_wpjm_bg_color', + 'label' => __( 'Background Colour', 'simple-social-images-wpjm' ), + 'description' => __( 'Enter or choose the background colour.', 'simple-social-images-wpjm' ), + 'input_type' => 'color_picker', + 'order' => 50, + ); + + $settings['logo_section'] = array( + 'option_name' => 'ssi_wpjm_logo_section', + 'label' => __( 'Logo Settings', 'simple-social-images-wpjm' ), + 'input_type' => 'section', + 'order' => 60, + ); + + $settings['logo'] = array( + 'option_name' => 'ssi_wpjm_logo', + 'label' => __( 'Image', 'simple-social-images-wpjm' ), + 'description' => __( 'Upload your logo to display on your images.', 'simple-social-images-wpjm' ), + 'input_type' => 'image', + 'order' => 70, + ); + + $settings['logo_size'] = array( + 'option_name' => 'ssi_wpjm_logo_size', + 'label' => __( 'Size', 'simple-social-images-wpjm' ), + 'description' => __( 'Select a size for the logo.', 'simple-social-images-wpjm' ), + 'input_type' => 'range', + 'min' => '4', + 'max' => '12', + 'step' => '0.1', + 'order' => 80, + ); + + $settings['background_images_section'] = array( + 'option_name' => 'ssi_wpjm_background_images_section', + 'label' => __( 'Background Images Settings', 'simple-social-images-wpjm' ), + 'input_type' => 'section', + 'order' => 90, + ); + + $settings['background_images'] = array( + 'option_name' => 'ssi_wpjm_background_images', + 'label' => __( 'Add Images', 'simple-social-images-wpjm' ), + 'description' => __( 'Upload background images to use on your template. Each template uses the background image slightly differently. Images are chosen at random from the images uploaded here, assuming your job does not have a featured image.', 'simple-social-images-wpjm' ), + 'input_type' => 'gallery', + 'order' => 100, + ); + + $settings['fonts_section'] = array( + 'option_name' => 'ssi_wpjm_font_sizes_section', + 'label' => __( 'Font Settings', 'simple-social-images-wpjm' ), + 'input_type' => 'section', + 'order' => 110, + ); + + $settings['title_size'] = array( + 'option_name' => 'ssi_wpjm_title_size', + 'label' => __( 'Title Size', 'simple-social-images-wpjm' ), + 'description' => __( 'Select a size for the title.', 'simple-social-images-wpjm' ), + 'input_type' => 'range', + 'min' => '2', + 'max' => '8', + 'step' => '0.5', + 'order' => 120, + ); + + $settings['location_size'] = array( + 'option_name' => 'ssi_wpjm_location_size', + 'label' => __( 'Location Size', 'simple-social-images-wpjm' ), + 'description' => __( 'Select a size for the location.', 'simple-social-images-wpjm' ), + 'input_type' => 'range', + 'min' => '2', + 'max' => '8', + 'step' => '0.5', + 'order' => 130, + ); + + $settings['salary_size'] = array( + 'option_name' => 'ssi_wpjm_salary_size', + 'label' => __( 'Salary Size', 'simple-social-images-wpjm' ), + 'description' => __( 'Select a size for the salary.', 'simple-social-images-wpjm' ), + 'input_type' => 'range', + 'min' => '2', + 'max' => '8', + 'step' => '0.5', + 'order' => 140, + ); + + $settings['google_font_url'] = array( + 'option_name' => 'ssi_wpjm_google_font_url', + 'label' => __( 'Google Font URL', 'simple-social-images-wpjm' ), + 'description' => __( 'Enter the URL of the Google font you wish to use.', 'simple-social-images-wpjm' ), + 'description' => sprintf( __( 'Enter the URL of the Google font. %1$sSee an example of what is required%2$s (the highlighted text).', 'simple-social-images-wpjm' ), '', '' ), + 'input_type' => 'text', + 'sanitize_callback' => 'sanitize_url', + 'order' => 150, + ); + + $settings['google_font_family'] = array( + 'option_name' => 'ssi_wpjm_google_font_family', + 'label' => __( 'Google Font Family', 'simple-social-images-wpjm' ), + 'description' => sprintf( __( 'Enter the name of the Google font family. %1$sSee an example of what is required%2$s (the highlighted text).', 'simple-social-images-wpjm' ), '', '' ), + 'input_type' => 'text', + 'order' => 160, + ); + + $settings['title_placeholder_text'] = array( + 'option_name' => 'ssi_wpjm_title_placeholder_text', + 'label' => __( 'Title Placeholder Text', 'simple-social-images-wpjm' ), + 'input_type' => 'hidden', + 'order' => 170, + ); + + $settings['salary_placeholder_text'] = array( + 'option_name' => 'ssi_wpjm_salary_placeholder_text', + 'label' => __( 'Salary Placeholder Text', 'simple-social-images-wpjm' ), + 'input_type' => 'hidden', + 'order' => 170, + ); + + $settings['location_placeholder_text'] = array( + 'option_name' => 'ssi_wpjm_location_placeholder_text', + 'label' => __( 'Location Placeholder Text', 'simple-social-images-wpjm' ), + 'input_type' => 'hidden', + 'order' => 170, + ); + + // return the registered settings array. return $settings; } -add_filter( 'job_manager_settings', 'ssi_wpjm_register_settings', 10, 1 ); +add_filter( 'ssi_wpjm_settings', 'ssi_wpjm_register_default_settings' ); + +/** + * Controls the output of text input setting. + * + * @param array $setting an array of the current setting. + * @param mixed $value the current value of this setting saved in the database. + */ +function ssi_wpjm_setting_input_type_text( $setting, $value ) { + + // handle output for a text input. + ?> + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + 'ssi-wpjm-image', + 'id' => $setting['option_name'] . 'image', + ) + ); + + } else { + + ?> + + + + + +
+ + + + + + + +
+ + + +
+ + 'ssi-wpjm-gallery-image', + //'id' => $setting['option_name'] . '-image', + ) + ); + + ?> + + + +
+ + + +
+ + + + + + + + + + +

+ +

+ Simple Social Images. - * Version: 1.0 + * Version: 0.1 * Author: Highrise Digital * Author URI: https://highrise.digital/ * Text Domain: simple-social-images-wpjm @@ -14,7 +14,7 @@ // define variable for path to this plugin file. define( 'SSI_WPJM_LOCATION', dirname( __FILE__ ) ); define( 'SSI_WPJM_LOCATION_URL', plugins_url( '', __FILE__ ) ); -define( 'SSI_WPJM_VERSION', '1.0' ); +define( 'SSI_WPJM_VERSION', '0.1' ); /** * Function to run on plugins load. @@ -31,126 +31,3 @@ function ssi_wpjm_plugins_loaded() { // load in the loader file which loads everything up. require_once( dirname( __FILE__ ) . '/inc/loader.php' ); - -/** - * Grabs a random image ID from those added to the settings page. - */ -function ssi_wpjm_get_random_image_id() { - - // get the image ids from options. - $image_ids = get_option( 'ssi_wpjm_images' ); - - // convert the id string into an array. - $images = explode( ',', $image_ids ); - - $image_id_key = array_rand( $images, 1 ); - $image_id = $images[ $image_id_key ]; - - return absint( $image_id ); - -} - -/** - * Returns the URL of the SSI API to generate an image. - */ -function ssi_wpjm_generate_api_url() { - - return apply_filters( - 'ssi_wpjm_generate_api_url', - 'https://simplesocialimages.com/ssi-api/v1/generate/' - ); - -} - -/** - * Enqueues the admin js file. - * Only enqueued on the post edit screen for WPJM jobs. - */ -function ssi_wpjm_enqueue_scripts( $hook ) { - - // if this is not the post edit screen. - if ( $hook !== 'post.php' ) { - return; - } - - global $post_type; - - // if the post type is not job listing. - if ( $post_type !== 'job_listing' ) { - return; - } - - wp_localize_script( - 'wp-api', - 'wpApiSettings', - array( - 'root' => esc_url_raw( rest_url() ), - 'nonce' => wp_create_nonce( 'wp_rest' ) - ) - ); - - // register the js. - wp_enqueue_script( - 'ssi_wpjm_admin_js', - SSI_WPJM_LOCATION_URL . '/assets/js/ssi-wpjm-admin.js', - array( 'jquery' ), - SSI_WPJM_VERSION, - true - ); - - // register the admin css. - wp_enqueue_style( - 'ssi_wpjm_admin_css', - SSI_WPJM_LOCATION_URL . '/assets/css/ssi-wpjm-admin.css', - array(), - SSI_WPJM_VERSION - ); - -} - -add_action( 'admin_enqueue_scripts', 'ssi_wpjm_enqueue_scripts' ); - -/** - * Add the og:image size in WP. - * Allows images to be cropped to og:image size. - */ -function ssi_wpjm_add_image_size() { - - // add the og:image size. - add_image_size( 'ssi_image', 1200, 630, true ); - -} - -add_action( 'after_setup_theme', 'ssi_wpjm_add_image_size' ); - -function ssi_wpjm_has_image( $post_id = 0 ) { - - // if we have no post id to check. - if ( $post_id === 0 ) { - - // use current global post id. - global $post; - $post_id = $post->ID; - - } - - // get the image id stored as meta. - $image_id = get_post_meta( $post_id, '', true ); - - // if we have no image id. - if ( empty( $image_id ) ) { - return 0; - } - - // get the image url for the associated meta. - $image_url = wp_get_attachment_image_url( $image_id, 'ssi_image' ); - - // if we have no image url. - if ( $image_url === false ) { - return 0; - } - - // go this far, we must have an image. - return apply_filters( 'ssi_wpjm_has_image', $image_id, $post_id ); - -} diff --git a/templates/1.html b/templates/1.html new file mode 100644 index 0000000..5a6da6f --- /dev/null +++ b/templates/1.html @@ -0,0 +1,15 @@ +
+
+
+ + [post:post_title] + + [meta:_job_location] + + [meta:_job_salary] + +
+ + +
+
\ No newline at end of file diff --git a/templates/1.php b/templates/1.php deleted file mode 100644 index bd24861..0000000 --- a/templates/1.php +++ /dev/null @@ -1,11 +0,0 @@ -
-
-
- [post:post_title] - [meta:_job_location] - [meta:_job_salary] -
- - -
-
\ No newline at end of file diff --git a/templates/2.html b/templates/2.html new file mode 100644 index 0000000..5a6da6f --- /dev/null +++ b/templates/2.html @@ -0,0 +1,15 @@ +
+
+
+ + [post:post_title] + + [meta:_job_location] + + [meta:_job_salary] + +
+ + +
+
\ No newline at end of file diff --git a/templates/2.php b/templates/2.php deleted file mode 100644 index bd24861..0000000 --- a/templates/2.php +++ /dev/null @@ -1,11 +0,0 @@ -
-
-
- [post:post_title] - [meta:_job_location] - [meta:_job_salary] -
- - -
-
\ No newline at end of file diff --git a/templates/3.html b/templates/3.html new file mode 100644 index 0000000..5a6da6f --- /dev/null +++ b/templates/3.html @@ -0,0 +1,15 @@ +
+
+
+ + [post:post_title] + + [meta:_job_location] + + [meta:_job_salary] + +
+ + +
+
\ No newline at end of file diff --git a/templates/3.php b/templates/3.php deleted file mode 100644 index bd24861..0000000 --- a/templates/3.php +++ /dev/null @@ -1,11 +0,0 @@ -
-
-
- [post:post_title] - [meta:_job_location] - [meta:_job_salary] -
- - -
-
\ No newline at end of file diff --git a/templates/4.html b/templates/4.html new file mode 100644 index 0000000..5a6da6f --- /dev/null +++ b/templates/4.html @@ -0,0 +1,15 @@ +
+
+
+ + [post:post_title] + + [meta:_job_location] + + [meta:_job_salary] + +
+ + +
+
\ No newline at end of file diff --git a/templates/4.php b/templates/4.php deleted file mode 100644 index bd24861..0000000 --- a/templates/4.php +++ /dev/null @@ -1,11 +0,0 @@ -
-
-
- [post:post_title] - [meta:_job_location] - [meta:_job_salary] -
- - -
-
\ No newline at end of file diff --git a/templates/5.html b/templates/5.html new file mode 100644 index 0000000..5a6da6f --- /dev/null +++ b/templates/5.html @@ -0,0 +1,15 @@ +
+
+
+ + [post:post_title] + + [meta:_job_location] + + [meta:_job_salary] + +
+ + +
+
\ No newline at end of file diff --git a/templates/5.php b/templates/5.php deleted file mode 100644 index bd24861..0000000 --- a/templates/5.php +++ /dev/null @@ -1,11 +0,0 @@ -
-
-
- [post:post_title] - [meta:_job_location] - [meta:_job_salary] -
- - -
-
\ No newline at end of file