3. Template functions

We have 3 new template functions:

rwd_attachment_image

rwd_attachment_image(
    $attachment = null,
    $size = 'thumbnail',
    $tag = 'picture',
    $attr = array(),
);

Type	Variable	Description
WP_Post|int|null	$attachment	Atatchment object, Attachment ID or null. In case of null the function will search current post featured image.
string|array	$size	Image size name or array of sizes. We will check this option in more details below.
string	$tag	Available options are 'picture' and 'img'. The html tag, which will be used for image generation. Default 'picture'.
array	$attr	Additional html attributes to be used for main tag (for example "class", "id", etc.).

Basic usage example:

rwd_attachment_image( $attchment, 'image', 'picture' );

In this case the plugin will generate a simple tag code with responsive options:

<picture>
        <source srcset="image-desktop.jpg, image-desktop-2x.jpg 2x" media="(min-width: 1281px)"><!-- 1920px image!-->
        <source srcset="image-landscape.jpg, image-landscape-2x.jpg 2x" media="(min-width: 981px)"><!-- 1280px !-->
        <source srcset="image-tablet.jpg, image-tablet-2x.jpg 2x" media="(min-width: 415px)"><!-- 980px image!-->
        <img srcset="image-mobile.jpg, image-mobile-2x.jpg 2x" alt="test"> <!-- 414px image!-->
</picture>

Generated code example in case of img tag usage: rwd_attachment_image( $attachment, 'image', 'img' );

<img sizes="(min-width: 1281px) 1920px, (min-width: 981px) 1280px, (min-width: 415px) 980px, 414px"
     srcset="examples/images/medium.jpg 414w,
     examples/images/medium-2x.jpg 828w,
     examples/images/large.jpg 980w,
     examples/images/large-2x.jpg 1960w,
     examples/images/extralarge.jpg 1280w,
     examples/images/extralarge-2x.jpg 2560w,
     examples/images/desctop.jpg 1920w,
     examples/images/desctop-2x.jpg 3840w" alt="...">

$size option as array:

Sometimes mobile images are different from desktop images and there is a need to use another attachment image for smaller sizes. To support this feature you can pass array here and specify which size uses another attachment ID or object. Let's check the example:

rwd_attachment_image(
    $featured_image_id,
    array(
        'visual',  // main size, which should be rendered; it should have a zero key!
        'mobile' => $mobile_image_id, // rewrite a key under 'visual' main size to use another image 
    ),
    'picture',
    array(        // Additional attributes. For the detailed information see the next page. 
        'id'    => 'picture-id',
        'class' => 'some-class',
    )
);

If you need to get generated HTML code without printing it on the page, you can use the get_rwd_attachment_image() function with the same parameters.

Important: If you use retina multipliers we do not recommend using 'img' tag with the sized array. In this case, the browser will automatically decide which image will be rendered and you won't get the same images on the specific resolution in all browsers/devices.

Additional attributes

Attribute	Value	Description
id	string	Specifies an image container ID
class	string	Additional image container class.
alt	string	Specifies an alternate text for an image. If alt text option specified in admin side, alt text will be taken from post_meta '_wp_attachment_image_alt'. Default: empty.
title	string	Image title. If not specified in additional attributes, the title will be taken from the attachment name. Default: attachment name
		And other valid HTML attributes.

For example:

$attr = array(
    'title' => 'Post title',
    'alt'   => 'Post meta: alt text',
    'id'    => 'image-id',
    'class' => 'some-additional-class',
);

rwd_attachment_image(
    $attachment,       // Attachment object or Attachment ID
    'header-section',  // Image size defined in configuration array
    'picture',         // Tag
    $attr              // Additional attributes
);

// Result example
<picture id="image-id" class="some-additional-class">
    <source srcset="image-desktop.jpg, image-desktop-2x.jpg 2x" media="(min-width: 1281px)"><!-- 1920px image!-->
    <source srcset="image-landscape.jpg, image-landscape-2x.jpg 2x" media="(min-width: 981px)"><!-- 1280px !-->
    <source srcset="image-tablet.jpg, image-tablet-2x.jpg 2x" media="(min-width: 415px)"><!-- 980px image!-->
    <img srcset="image-mobile.jpg, image-mobile-2x.jpg 2x" alt="Post meta: alt text" title="Post title"> <!-- 414px image!-->
</picture>

If you not needed to specify the whole list of attributes, you can add a separate attribute directly:

rwd_attachment_image(
    $attachment,       // Attachment object or Attachment ID
    'header-section',  // Image size defined in configuration array
    'picture',         // Tag
    array(             // Additional attributes
        'alt'   => 'Specific alt text',
        'class' => 'some-additional-class',
    )
);

// Result example
<picture class="some-additional-class">
    <source srcset="image-desktop.jpg, image-desktop-2x.jpg 2x" media="(min-width: 1281px)"><!-- 1920px image!-->
    <source srcset="image-landscape.jpg, image-landscape-2x.jpg 2x" media="(min-width: 981px)"><!-- 1280px !-->
    <source srcset="image-tablet.jpg, image-tablet-2x.jpg 2x" media="(min-width: 415px)"><!-- 980px image!-->
    <img srcset="image-mobile.jpg, image-mobile-2x.jpg 2x" alt="Specific alt text"> <!-- 414px image!-->
</picture>

rwd_attachment_background

rwd_attachment_background( $selector, $attachment = null, $size = 'thumbnail' )

Type	Variable	Description
string	$selector	CSS selector to be used inside inline styles code.
WP_Post|int|null	$attachment	Atatchment object, Attachment ID or null. In case of null the function will search current post featured image.
string|array	$size	Image size name or array of sizes. Same as for rwd_attachment_image().

This function generates CSS styles and places them inside "buffer". This buffer will be printed in wp_footer().

If you want to print it earlier you can use the next template function:

rwd_print_styles

rwd_print_styles()

This function print styles from buffer, which were generated in rwd_attachment_background().

Next: Generated code samples