Genesis Backstretch Featured Image

  • Hi,
    I’ve setup RWP on a Genesis Child Theme and so far everything is working great.

    I’m now trying to get my post cover background images to also resize. As these are outside of the content area it’s my understanding that the get_post_thumbnail_id function can be altered to allow resizing by the plugin.

    Below is the function used to call the background image, i’m just not sure how to modified
    your example to work with this.

    // if the post has a featured image, send it to Backstretch else use a default one

		if ( has_post_thumbnail() ) {
			wp_localize_script( 'backstretch-init', 'BackStretchImg', array( 'src' => wp_get_attachment_url( get_post_thumbnail_id() ) ) );
		}
		else {
			wp_localize_script( 'backstretch-init', 'BackStretchImg', array( 'src' => 'https://www.mydomain.com/wp-content/uploads/2015/04/94.jpg' ) );
		}

    Any help is much appreciated.
    Best regards
    Darrell

    p.s Great Plugin.

    https://www.ads-software.com/plugins/responsify-wp/

Viewing 1 replies (of 1 total)
  • Plugin Author stefanledin

    (@stefanledin)

    Hi Darrell! How good to hear that you find RWP useful! ??

    Yes, RWP is per default applied to thumbnails and content that is inserted through the editor. The rwp_img() function for example can be used to generate responsive images in other places of your templates. Or in this case, rwp_style() would be the one to choose since it’s a background image you wanna create.

    However, I assume that it is the Backstretch jQuery plugin that you’re using? The problem is that Backstretch wants to have a single URL passed to it.
    From the demo:

    $("#demo").backstretch("https://dl.dropbox.com/u/515046/www/garfield-interior.jpg");

    In order to make the background image responsive, you’ll need to be able to change this URL depending on the screen width.
    A quick and dirty example:

    <script type="text/javascript">
var background = ($(window).width() > 768) ? 'url-to-large.jpg' : 'url-to-small.jpg';
$("#demo").backstretch(background);
</script>

    I’m afraid this isn’t something RWP can help you with. It’s rather something for the Backstretch people to take a look at.

Viewing 1 replies (of 1 total)
  • The topic ‘Genesis Backstretch Featured Image’ is closed to new replies.