MasterPress

Menu

WOOF_Image :: picture( Arguments $args )

Returns:

  • String The HTML
    based markup for picturefill.

Outputs markup for use with the picturefill responsive images library by Scott Jehl, which allows you to specify a number of images to use at different media query breakpoints, as well as images for high-resolution displays. 

This method accepts a number of shorthand argument keys to quickly output the necessary media query min-width, max-width, and min-device-pixel ratio media query declarations, as well as smart values for these keys to define either separate image files to use, or a resize operation on this image. 

Note: MasterPress includes the picturefill.js and matchmedia.js libraries which can be enqueued with the following identifiers, anytime before wp_head().

wp_enqueue_script(‘mp-matchmedia’);
wp_enqueue_script(‘mp-picturefill’);

Example:

Parameters:

  • Arguments $args

    An arguments array or string which accepts the following possible parameters:

    Note: See below this list for the meaning of the (DIM) and (FILE) placeholder values.

    • min-WIDTH: (DIM) or (FILE) – outputs a min-width breakpoint where WIDTH is the desired min-width (without px prefix) e.g. min-400
    • max-WIDTH: (DIM) or (FILE) – outputs a max-width breakpoint where WIDTH is the desired max-width e.g. min-400
    • min-WIDTH1-max-WIDTH2: (DIM) or (FILE) – outputs a min-width and max-width breakpoint where WIDTH1 is the desired min-width and WIDTH2 is the desired max-width. e.g. min-480-max-768
    • 2x: (DIM) or (FILE) or “true” – outputs a high resolution specification for the image – with no width breakpoints. If this argument is “true”, the method will assume that THIS image is the 2x size, and will output the standard size image as a 50%-resized version of this.
    • 2x-min-WIDTH: (DIM) or (FILE) – outputs a min-width high-resolution breakpoint where WIDTH is the desired min-width (without px prefix) e.g. 2x-min-400
    • 2x-max-WIDTH: (DIM) or (FILE) – outputs a max-width high-resolution breakpoint where WIDTH is the desired max-width (without px prefix) e.g. 2x-min-400
    • 2x-min-WIDTH1-max-WIDTH2: (DIM) or (FILE) – outputs a min-width and max-width high resolution breakpoint where WIDTH1 is the desired min-width and WIDTH2 is the desired max-width. e.g. 2x-min-480-max-768.
    • width: the width of the image, to add as a style attribute to the outer div. By default, picturefill will not add any widths or heights to the images, to allow them to be uses in responsive layouts. This can be an integer width, or set to “1x” to use the width of this image.
    • w:An alias for “width”

    The (DIM) placeholder above can be any of:

    • WIDTHxHEIGHT: to resize and crop to a desired WIDTH and HEIGHT.
    • WIDTHx?: to resize to a desired WIDTH and scale the height proportionally
    • ?xHEIGHT: to resize to a desired HEIGHT and scale the width proportionally

    The (FILE) placeholder above can be any of:

    • An absolute URL – a URL including domain and protocol. e.g. http://domain.com/wp-content/themes/my-theme/image.jpg
    • A root relative URL – A URL with leading slash, taken from the root of the current site e.g. /wp-content/themes/my-theme/image.jpg
    • A file or path relative to THIS image – e.g. file.jpg will be regarded as a URL in the same directory as THIS image object, 2x/image.jpg will be taken as a folder in the same folder as this image.
    • A suffix – if none of the above match, the string will be regarded as a suffix to add to the current image file name (just before the extension). For example, if you have a high resolution file in the same folder as this image, with the @2x suffix ( you could set “2x” => “@2x” )
    • A WOOF_Image object – if you pass the args as an array, you can also pass a WOOF_Image object to use for the URL.

Related Methods:

WOOF_Image::picture_2x

Latest From the Blog

MasterPress 1.1.4 now available

MasterPress 1.1.4 is now available. This release contains an important compatibility fix for WordPress 4.5 to allow correct detection of the taxonomy term editing screen. Without this fix, any custom fields you have attached to custom taxonomies will not be shown at all in the editing form. Note also that MasterPress will still detect the edit screen correctly in… 

Plugin Requirements

MasterPress requires a minimum of WordPress version 3.4, MySQL 5, and PHP version 5.2.4.

We also recommend that PHP is configured to use a memory limit of 64MB per request (128MB may be required for sites with higher complexity).

This plug-in is not compatible with the WordPress.com hosted service.

Three AM Web + IT