About Srcset Image Textformatter
Adds the srcset to images within a textarea
Category 1 | Markup Generation Markup modules that are called upon to generate or parse markup (like HTML). Markup modules are most often used on the front-end of a site (rather than admin). |
---|---|
Category 2 | Photo/Video/Audio Modules that perform some function related to media such as photos and audio/video. |
Category 3 | Text Formatters Textformatter modules that provide run-time formatting for blocks of text (typically used with Text/Textarea fields). |
Release State | Beta Close to stable, but users are advised to be cautious and test thoroughly.* |
Author | |
Module Version | 1.0.0 |
Class Name | TextformatterSrcset |
Compatibility | 2.5, 2.6, 2.7 |
Date Added | October 27, 2014 |
Recommended By | New recommendations may take up to 1 day to appear. |
Instructions
This module's files should be placed in /site/modules/TextformatterSrcset/
How to install or uninstall modules
README
TextformatterImageSRCSET
This is a Textformatter for the ProcessWire CMS. It will add the srcset and sizes attributes to every img
tag inside a field. This enables your site to make better use of responsive/adaptive images even when they were created by a regular editor inside e.g. a Textarea.
The formatter requires ProcessWire 2.5+. It will generate lots of different image variations that might fill up your storage. Use it on your own risk.
Features
- Create srcset and sizes attributes
- Generate the right image resolutions on the fly
- Simple HiDPI/Retina images
- Use a low-quality placeholder as the src
- Easy Usage with the respimage and Lazysizes scripts
- Configurable to fit your needs
- Respects all settings from the CKEditor or other ProcessWire modules
Setup
Please note, that this module only affects fields where the Textformatter ist active. For images outside of the fields, you have to create the markup for srcset images yourself.
Install it like any other Textformatter for ProcessWire:
- Install the module
- Configure the module
- Go e.g. to your
body
field, go to theDetails
page and add TextformatterSrcset
Settings
You can find those settings on the module configuration page.
Resolutions
Enter the different sizes you want to have in your srcset-attribute. Those will be used as the *w values and images will be created accordingly. For example, if you have a 960px large grid with breakpoints at 720px and 320px, you enter 320,720,960
into this field. Note, that the HiDPI option might add another value to this.
Example with those three values and sizes set to “auto”:
<img alt="" src="/site/assets/files/1013/desert.993x0-is.jpg" sizes="auto" srcset="/site/assets/files/1013/desert.320x0.jpg 320w,/site/assets/files/1013/desert.720x0.jpg 720w,/site/assets/files/1013/desert.960x0.jpg 960w"/>
This does depend on the orientation of the image. The longer side of the image will be resized to fit to the value.
Sizes-Attribute
This field will directly populate the sizes attribute of the image tag. You might want to leave the default value “auto” or set it to the maximum width in pixel that images will be displayed.
Generate HiDPI images
This will create an image for high density displays (“retina”). As long as the original image is larger than the target image, it will create an image with the twice the resolution of the source. This will be added as an additional size to the srcset
, so you don’t need to specify this image in the Resolutions tab. When no resolutions are set, it will use the 1x,2x
notation for the srcset.
Example without Resolutions:
<img alt="" src="/site/assets/files/1013/desert.993x0-is.jpg" sizes="" srcset="/site/assets/files/1013/desert.993x0-is.jpg 1x, /site/assets/files/1013/desert.1986x0.jpg 2x"/>
It is recommended to activate this feature.
Low-quality Placeholder
When active, the Formatter will create a really low quality image (small resolutions, low JPG setting) and use it as the default src
. This can speed up the page. This is recommended if you have a Javascript-Fallback active that will exchange the LQP with the right image in browsers that don’t support srcset
yet. Remember that the src
is always a fallback for older browser/no JS browser and will always be loaded by every browser.
Example, with only LQP activated:
<img alt="" src="/site/assets/files/1013/desert.204x0.jpg" sizes="" srcset="/site/assets/files/1013/desert.993x0-is.jpg 1x"/>
Use smallest size as LQP
Instead of using a low-quality JPG as the LQP, use the smallest size from the Resolution setting as the src
. This file might be larger because it uses your default ProcessWire Image quality configuration but provides a better fallback for older browsers.
Width/Height Attributes
If activated, it will add a width and height attribute to the img
. The width is the one set by the Textarea Editor. When used with the HiDPI option, it will prevent images from becoming too large.
Data* Attributes
Use this to prefix the sizes and the srcset
attribute with data-*. This means, that srcset
will become data-srcset
. Might be required by some fallbacks or lazyloading scripts.
CSS Class
Values entered here will be added as a CSS-class to the img
. Note, that any classes set by the Textarea/Editor will be kept.
Example usage scenarios
These examples can be quickly implemented.
Make Apple Retina users happy (also HiDPI visitors)
- Activate the "HiDPI" and the "width/height Attribute" options. Leave the "Resolutions" field blank.
- Place the polyfill respimage.js on your page.
Integrate lazy-loading images
- Activate the Low-quality placeholder and the data-* attributes. Leave the "Resolutions" blank.
- Enter
lazyload
into the "CSS Class" field. - Make sure that the lazysizes script is included in your sites markup
Use different resolutions for different screens
- Enter each breakpoint in Pixels into the Resolutions field. Example: 300,720,1000
- Activate the HiDPI option
- Place the polyfill respimage.js on your page.
- (Optional) Activate the Low-quality Placeholder option
Further information
Other PageImage fields
This Textformatter is compatible with every other type of PageImage. This means, that the great (new) ImageFocusArea module will work with this and even use the correct sizing options.
Useful JS libraries
Best used together with
- Arkas Lazysizes, a superfast, flexible and easy-to-use Image lazyloader
- Arkas respimage, the easist way to get all browser to use the new srcset images.
Thanks
We would like to thank
- Martijn Geerts for some parts of the image search code
- Horst Nogajski for helping finding the right image field
Improve more
You can try this module on our one-click ProcessWire Hosting Service lightning.pw or make the images even smaller with the image compression service minimize.pw.
Comments
No comments yet. Be the first to post!
Post a Comment
Your e-mail is kept confidential and not included with your comment. Website is optional.
- Admin Helpers
- Authentication
- Core Modules
- Development Tools
- Email/WireMail
- Field Types
- Import/Export
- Input Fields
- Language Modules
- Language Packs
- Logs/Monitoring
- Markup Generation
- Photo/Video/Audio
- Premium Modules
- Process Modules
- Proof of Concept
- SEO/Accessibility
- Site Profiles
- Social, Feeds, Services
- Text Formatters
- Other Modules
- Users and Access
Disclaimer
*Use modules at your own risk. There are no guarantees or warranties. It is recommended that you backup your site and database before installing new modules.