ImageSrcset Snippet for Evolution CMS
Easily create responsive image sets with PHPThumb integration for Evolution CMS
EVO Version: Evolution 1.4x, Evolution 2.x, Evolution 3.x
Required Extras: PhpThumb
The ImageSrcset snippet for Evolution CMS creates responsive images using PHPThumb, allowing you to define various attributes and sizes to optimize images across different breakpoints. Here are the main features offered:
- Customizable Breakpoints
Allows defining four breakpoint sizes (`xl`, `lg`, `md`, `sm`) to adapt to different screen widths (default: 1200px, 992px, 768px, 576px), adjustable through parameters. - Image Sizes for Breakpoints
Enables specifying different image widths (`ImageWxl`, `ImageWlg`, `ImageWmd`, `ImageWsm`) for each breakpoint. - Dynamic Generation of `src` and `srcset`
The snippet generates the `src` tag (or `data-src` with an optional `data-` prefix) for the main image and the `srcset` (or `data-srcset`) for adaptive versions. - `sizes` Tag for Responsive Layouts
Integrates a `sizes` tag based on breakpoints to optimize image loading according to screen width. If enabled, the `DataPrefix` parameter converts `sizes` to `data-sizes="auto"` for dynamic image loading. - WebP Format Compatibility
Uses PHPThumb to generate images in `webp` format for improved performance, adjusting quality (`ImageQ`, default: 80) and crop type (`ImageZC`). - Customizable HTML Attributes
Supports attributes like `class`, `alt`, `title`, `fetchpriority`, and `loading`, allowing control over the image display and loading priority. - PHPThumb Integration
Image creation is handled through the `phpthumb` snippet, with configurable parameters to optimize quality and dimensions.
These features allow generating optimized images for every type of device, enhancing the user experience and optimizing page loading times.
Example Call
[[ImageSrcset? &ImageWxl=`1140` &ImageHxl=`400` &input=`image.jpg` &class=`img-fluid` &alt=`myimage` &title=`myimage` &fetchpriority=`high` &loading=`eager`]]
Snippets parameters
- &DataPrefix: (values 0,1) Append data- prefix to src and srcset to support JavaScript lazy loading libraries like `lazysizes` (default: 0)
Customizable Breakpoint sizes parameters
- &Bkpxl: Extra large (xl) breakpoint pixel size (default: 1200)
- &Bkplg: Large (lg) breakpoint pixel size (default: 992)
- &Bkpmd: Medium (md) breakpoint pixel size (default: 768)
- &Bkpsm: Small (sm) breakpoint pixel size (default: 576px)
Images sizes for breakpoints parameters
- &ImageWxl: Extra large (xl) width (default:1140)
- &ImageHxl: Extra large (xl) height (default: 400)
- &ImageWlg: Large (lg) width (default: 964)
- &ImageWm: Medium (md) width (default:724)
- &ImageWsm: Small (sm) width (default:530)
phpthumb parameters
- &input: PhpThumb input image (image path,
[*tvname*]or[+tvname+]) - &ImageQ: PhpThumb Image quality
- &ImageZC: PhpThumb Image Zoom crop
- &ImageF: PhpThumb Image Format
html attributes parameters
- &width: Image width (default value from &ImageWxl)
- &height: Image Class (default value from &ImageHxl)
- &class: Image Class
- &alt: Image alt
- &title: Image title
- &fetchpriority: fetchpriority attribute high/low/auto (default: auto)
- &loading: Loading attribute eager/lazy (default: eager)
