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).
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).
Close to stable, but users are advised to be cautious and test thoroughly.*
|Compatibility||2.5, 2.6, 2.7|
|Date Added||October 27, 2014|
This module's files should be placed in /site/modules/TextformatterSrcset/
How to install or uninstall modules
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.
- 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
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
bodyfield, go to the
Detailspage and add TextformatterSrcset
You can find those settings on the module configuration page.
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.
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.
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.
When active, the Formatter will create a really low quality image (small resolutions, low JPG setting) and use it as the default
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"/>
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.
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.
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.
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.
These examples can be quickly implemented.
- Activate the "HiDPI" and the "width/height Attribute" options. Leave the "Resolutions" field blank.
- Place the polyfill respimage.js on your page.
- Activate the Low-quality placeholder and the data-* attributes. Leave the "Resolutions" blank.
lazyloadinto the "CSS Class" field.
- Make sure that the lazysizes script is included in your sites markup
- 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
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.
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.
We would like to thank
- Martijn Geerts for some parts of the image search code
- Horst Nogajski for helping finding the right image field
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.
No comments yet. Be the first to post!
Your e-mail is kept confidential and not included with your comment. Website is optional.
- Admin Helpers
- Core Modules
- Development Tools
- Field Types
- Input Fields
- Language Modules
- Language Packs
- Markup Generation
- Premium Modules
- Process Modules
- Proof of Concept
- Site Profiles
- Social, Feeds, Services
- Text Formatters
- Other Modules
- Users and Access
*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.