Download the PHP package jordanbeattie/craftcms-images without Composer
On this page you can find all versions of the php package jordanbeattie/craftcms-images. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download jordanbeattie/craftcms-images
More information about jordanbeattie/craftcms-images
Files in jordanbeattie/craftcms-images
Package craftcms-images
Short Description Render images in craftcms with optimized template tags
License
Informations about the package craftcms-images
Image Optimization
Render images in your Craft templates with a single include. Pass in classes, fallbacks, transforms and more and have optimized images on your site compliant with Google Page Speed Insights.
Installation
Include the package in your project:
and install the plugin within the CMS.
Usage
Instead of writing out <img>
tags in your project, pass variables to the render function which will optimize the image for you.
Variable | Description |
---|---|
Field | The CraftCMS field where users can upload a single image. |
Transform | The handle or attributes of an image transform to use. *See transforms. |
Fallback | A static URL/path to an image that can be used if there is an issue rendering the image or if the field is empty. |
Class | Any classes that should be added to the tag |
Style | Any items to be included in the style attributes |
Alt | Text for the alt attribute. If none is supplied and the field variable is passed, the alt text from the image model will be used. |
Attributes | Any other attributes to be added to the tag. This should be an array. * See attributes. |
Transforms
Including transforms is the best way to serve images. You can pass the transform handle through to the include. The plugin will look for the transform with the handle provided and also a mobile version which should have the same handle appended with "Mobile". e.g. myTransformHandle and myTransformHandleMobile. You can also pass in the transform manually to avoid creating them in the CMS. See examples below. If you do not specify a format for your transformed image and the server supports WebP, the image will be returned as a WebP to accomodate best web practices.
Attributes
Often, when using third-party packages such as MatchHeight, you will need to add custom attributes. These can be passed in as an array.
Returning a URL
Only want to return a URL for the image? Use the URL function instead of render and simply pass in the image and transform and optional fallback image. See examples below
Examples
Full parameters
Image without transform
Static image
Replacing an existing img tag
should be replaced with
or with a transform
Returning a URL
Contact
Jordan Beattie
[email protected]
www.jordanbeattie.com