Download the PHP package biggleszx/craft-picture without Composer
On this page you can find all versions of the php package biggleszx/craft-picture. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download biggleszx/craft-picture
More information about biggleszx/craft-picture
Files in biggleszx/craft-picture
Package craft-picture
Short Description Picture element helper template for use with Craft CMS
License MIT
Homepage https://github.com/BigglesZX/craft-picture
Informations about the package craft-picture
Craft Picture (a Twig Bundle)
This is a Twig Bundle intended to be used via nystudio107's Bundle Installer. It provides a Picture template which is designed to make it easier to generate <picture>
elements for responsive imagery using Craft CMS's image asset helpers. Pass in an image and some basic settings and a <picture>
element will be rendered including a range of srcset
candidates and alternative sources for the WebP format.
Installation
Follow the installation instructions for Bundle Installer, which essentially boil down to:
You should be prompted to give allow-plugins
permission for that package.
Add this package:
Install:
Add /templates/vendor
to your root .gitignore
file to avoid committing installed bundles to Git.
Configuration
The Picture component needs to know which widths to use when transforming your images to generate srcset
candidates. The default widths are:
...however you can override this on a per-usage basis (see below), or set a project-wide default by adding a craftPictureSourceWidths
key to your custom settings file:
You will also need to have set up at least one named image transform so that the component knows how to transform your images.
Usage
In the kitchen-sink example below:
image
is a Craft image asset instance- The base
<img>
in the generated<picture>
element will use a transform namedsquare
- An additional media source is defined for
768px
and above which uses a transform namedlandscape
When using the media
parameter, order matters the same way it does when writing plain HTML. The browser will use the first matching media configuration it encounters. Inside media
, sourceWidths
is optional and defaults to the root sourceWidths
if omitted. Order doesn't
matter in this parameter.
When processing sourceWidths
or media.sourceWidths
, we filter out any
sizes that are larger than the width of the original image. If this results in
an empty array, we add back the original intrinsic image width as the sole value.
Contributing
This package is mostly for my benefit in cutting down duplicated code between projects, however I hope it has broader usefulness. If you have any issues using the bundle, please feel free to open an issue on GitHub, and I'll take a look when I can.
TODO
- Consider eager-loading appropriate image transforms from within the template. This is currently left as an exercise for the reader.