1

I'm trying to work out a solution for responsive background images in Wordpress to use on my clients' sites.

This is what I got:

1) I created some custom thumbnail sizes:

function custom_image_sizes() {
    add_image_size ( 'small_regular', 832, 800, true );
    add_image_size ( 'small_retina', 1664, 1600, true );
    add_image_size ( 'big_regular', 1728, 800, true );
    add_image_size ( 'big_retina', 3456, 1600, true );
}
add_action( 'after_setup_theme', 'custom_image_sizes' );

2) Now I'm trying to use them in my template with inline media queries, like this:

$small_regular = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( 832, 800, ) );
$big_regular = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( 1728, 800, ) );
echo "<style type='text/css'>";
echo ".entry-featured-image { background-image: url('{$big_regular[0]}'); }";
echo "@media screen and (max-width:48em) { .entry-featured-image { background-image: url('{$small_regular[0]}.'); } }";
echo "</style>";

The point is: inline media queries are working, but they always show the same image size (832x800) no matter what.

How do I fix that?

  • You have one additional period there: url('{$small_regular[0]}.');. – kaiser Sep 1 '14 at 18:36
2

Use this. you will need to call thumbnail sizes.

$small_regular = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID), 'small_regular' );
$big_regular = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID), 'big_regular' );
echo "<style type='text/css'>";
echo ".entry-featured-image { background-image: url('" . $big_regular[0] . "'); }";
echo "@media screen and (max-width:48em) { .entry-featured-image { background-image: url('" . $small_regular[0] . "'); } }";
echo "</style>";

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.