ImageSrcset Snippet for Evolution CMS

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:

1. Customizable BreakpointsAllows defining four breakpoint sizes (`xl`, `lg`, `md`, `sm`) to adapt to different screen widths (default: 1200px, 992px, 768px, 576px), adjustable through parameters.
2. Image Sizes for BreakpointsEnables specifying different image widths (`ImageWxl`, `ImageWlg`, `ImageWmd`, `ImageWsm`) for each breakpoint. 
3. 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.
4. `sizes` Tag for Responsive LayoutsIntegrates 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.
5. WebP Format CompatibilityUses PHPThumb to generate images in `webp` format for improved performance, adjusting quality (`ImageQ`, default: 80) and crop type (`ImageZC`).
6. Customizable HTML AttributesSupports attributes like `class`, `alt`, `title`, `fetchpriority`, and `loading`, allowing control over the image display and loading priority.
7. PHPThumb IntegrationImage 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)