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?
url('{$small_regular[0]}.');
.