ContentImgPro Plugin for Evolution cms

ContentImgPro 's key features

1. Image Resize and Conversion with PhpThumbAutomatically resize and converts images in content fields using PhpThumb, allowing optimized formats like WebP, JPEG, and PNG.
2. Automatic SizingIf only the image width is specified, the height is automatically calculated to maintain the original proportions and aspect ratio.
3. Lazy Loading and Optimized LoadingIntegrates lazy loading (`loading="lazy"`) to improve page load times by loading images only when they’re in view.
4. SEO Compatibility and Loading Priority AttributesAutomatically adds the `fetchpriority` attribute to optimize image loading based on importance in the page context.
5. Automatic Alt and Title TagsIf `alt` and `title` are not defined, they are automatically generated from the image file name, boosting accessibility and SEO.
6. Customizable CSS ClassesAllows adding specific CSS classes to enhance customization and integration with the site’s design.
7. Responsive Image SupportAutomatically 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).
8. Automatic Conversion to Data Attributes for JavaScript Lazy LoadingOptionally converts `src` and `srcset` to `data-src` and `data-srcset` to support JavaScript lazy loading libraries like `lazysizes`.
9. Selective ExclusionFlexible 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"

Example 3

Original image: test-image.jpg size: 1900x600px 

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