ContentImgPro Plugin for Evolution cms

Transform and optimize images in content areas with phpthumb integration, responsive sizing, lazy loading, and enhanced attributes

Download Latest Release (1.9)

EVO Version: Evolution 1.4x, Evolution 2.x, Evolution 3.x

Required Extras: PhpThumb

Table of Contents

ContentImgPro 's key features

Image Resize and Conversion with PhpThumb
Automatically resize and converts images in content fields using PhpThumb, allowing optimized formats like WebP, JPEG, and PNG.
Automatic Sizing
If only the image width is specified, the height is automatically calculated to maintain the original proportions and aspect ratio.
Lazy Loading and Optimized Loading
Integrates lazy loading (`loading="lazy"`) to improve page load times by loading images only when they’re in view.
SEO Compatibility and Loading Priority Attributes
Automatically adds the `fetchpriority` attribute to optimize image loading based on importance in the page context.
Automatic Alt and Title Tags
If `alt` and `title` are not defined, they are automatically generated from the image file name, boosting accessibility and SEO.
Customizable CSS Classes
Allows adding specific CSS classes to enhance customization and integration with the site’s design.
Responsive Image Support
Automatically generates srcset and sizes attributes to adapt images for various device resolutions, enhancing performance and user experience. Now includes customizable breakpoints, allowing developers to set specific widths for srcset based on their design framework, providing greater flexibility for layouts (beyond Bootstrap).
Automatic Conversion to Data Attributes for JavaScript Lazy Loading
Optionally converts `src` and `srcset` to `data-src` and `data-srcset` to support JavaScript lazy loading libraries like `lazysizes`.
Selective Exclusion
Flexible configuration to exclude specific images based on document or template IDs, giving precise control over where the plugin applies.

ContentImgPro Plugin Configuration

Use image sizes from: get image size from: phpthumbParams (plugin configuration) / imageAttribute: from TinyMCE attributes
Image width: phpthumb options (w). (If Srcset option is enabled will be used as Image Width for Breakpoint xl)
Image height: phpthumb options (h). If empty the height is automatically calculated to maintain the original proportions.
Image quality: phpthumb options (q)
Image Zoom crop: phpthumb options (zc)
Image Format: phpthumb options (f)
Image Class: Add new or modifies image class
fetchpriority: Add fetchpriority attribute (auto/low/high)
loading: Add loading attribute (eager/lazy)
Create image responsive srcset: Enable responsive srcset
Breakpoint xl: Breakpoint size for xl (default >1200px)
Breakpoint lg: Breakpoint size for lg (default >992px)
Image width lg: Srcset Image Width for Breakpoint lg
Breakpoint md: Breakpoint size for md (default >768px):
Image width md: Srcset Image Width for Breakpoint md
Breakpoint sm: Breakpoint size for sm (default <576px)
Image width sm: Srcset Image Width for Breakpoint sm
Append data- prefix to src and srcset: Change image "src" tag to "data-src" for lazyload plugins
Exclude Documents by id (comma separated): A list of documents id to exclude from the plugin
Exclude Templates by id (comma separated): A list of templates id to exclude from the plugin

Examples:

Example 1

Original image: laptop.jpg size: 900x601px

Converted in webp
Added img-fluid class
Width resized to 1140px
Height auto calculated (761px)
Responsive srcset enabled
Title attribute generated from alt attribute "demo image ContentImgPro" (defined in TinyMCE editor)

Example 2

Original image: nice-image-with-sea.jpg size: 2000x1333px

Converted in webp
Added img-fluid class
Width resized to 1140px
Height auto calculated (760px)
Responsive srcset enabled
Title and alt attribute generated from the image file name: "Nice Image With Sea"