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?

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

1 Answer 1

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 and acknowledge you have read our privacy policy.

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