#Manners Tools for using ExpressionEngine image manipulations with responsive images in the templates.
##Installation
###EE2
- Download and unzip the package directory into /system/expressionengine/third_party/manners
###EE3
- Download and unzip the package directory into /system/user/addons/manners
- If you're using EE3, install the plugin in CP > Add-ons Manager
##Usage: Tag Pairs
###{exp:manners:srcset_wrap} Add srcset string of image image manipulations to img tags wrapped in this tag pair.
Image manipulations are passed to the srcset attributes for images in your templates.
####Parameters
| Parameter | Required? | Description | Default | Options |
|---|---|---|---|---|
| directory_id | See notes | ID of directory to look for image manipulations in | ||
| directory_name | See notes | Name of directory to look for image manipulations in | ||
| short_names | No | Pipe delimited list of short names of image manipulations to include in the returned srcset |
||
| break_lines | No | Break returned srcset string into lines? | y | y, n |
| extra | No | Any extra text to add to img tag |
###Notes
For srcset to be applied, either a valid directory_id or directory_name parameter must be present.
#####Example
Add a srcset to the img tags in a block of template content.
- In your template HTML, wrap the block of content you want the srcset attribute applied to img tags.
{exp:channel:entries
channel="blog"
url_title="{segment_3}"
disable="pagination"}
<article>
{exp:manners:srcset_wrap
directory_name="Source Set"
short_names="phone|tablet|desktop|hdef"
break_lines="y"}
{custom_field}
{/exp:manners:srcset_wrap}
</article>
{exp:channel:entries}
##Usage: Single Tags
###{exp:manners:srcset} Add a srcset string of image manipulations to img tags wrapped in this tag.
####Parameters
| Parameter | Required? | Description | Default | Options |
|---|---|---|---|---|
| file_id | Yes | file_id to return manipulations for | ||
| short_names | No | Pipe delimited list of short names of image manipulations to include in the returned srcset |
||
| break_lines | No | Break returned srcset string into lines? | y | y, n |
#####Example
Add srcset to an img tag in a template.
- In your template HTML, wrap an img tag in the tag pair for a custom field you uploaded an image to.
- Set the default file manipulation in the src attribute.
- Create a srset attribute and place the {exp:manners:srcset} in it.
- Set the file_id and short_names parameters.
<div class="section-banner">
{myimage_custom_field}
<img src="{url:phone}"
srcset="{exp:manners:srcset file_id="{file_id}" short_names="{phone|tablet|desktop|hdef}" break_lines="y"}"
alt="Section Name">
{/myimage_custom_field}
</div>