ImageSrcset Snippet for Evolution CMS

Easily create responsive image sets with PHPThumb integration 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 Breakpoints
   Allows 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 Breakpoints
   Enables 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 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.
5. WebP Format Compatibility
   Uses PHPThumb to generate images in `webp` format for improved performance, adjusting quality (`ImageQ`, default: 80) and crop type (`ImageZC`).
6. Customizable HTML Attributes
   Supports attributes like `class`, `alt`, `title`, `fetchpriority`, and `loading`, allowing control over the image display and loading priority.
7. 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)

Other Snippets for Evolution CMS

COF - Content on First (page)

AMPx Accelerated Mobile Pages (AMP) for Evolution CMS

CloakLinks snippet for Evolution CMS