#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>

License

Panchesco/manners

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages