PHPackages                             biggleszx/craft-picture - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. biggleszx/craft-picture

ActiveTwig-bundle[Templating & Views](/categories/templating)

biggleszx/craft-picture
=======================

Picture element helper template for use with Craft CMS

1.1.0(3w ago)0162MITTwig

Since Oct 22Pushed 3w ago1 watchersCompare

[ Source](https://github.com/BigglesZX/craft-picture)[ Packagist](https://packagist.org/packages/biggleszx/craft-picture)[ Docs](https://github.com/BigglesZX/craft-picture)[ RSS](/packages/biggleszx-craft-picture/feed)WikiDiscussions main Synced 3w ago

READMEChangelogDependencies (4)Versions (5)Used By (0)

Craft Picture (a Twig Bundle)
=============================

[](#craft-picture-a-twig-bundle)

This is a Twig Bundle intended to be used via nystudio107's [Bundle Installer](https://github.com/nystudio107/bundle-installer). It provides a **Picture** template which is designed to make it easier to generate `` elements for responsive imagery using Craft CMS's image asset helpers. Pass in an image and some basic settings and a `` element will be rendered including a range of `srcset` candidates and alternative sources for the WebP format.

Installation
------------

[](#installation)

Follow the installation instructions for [Bundle Installer](https://github.com/nystudio107/twig-bundle-installer/), which essentially boil down to:

```
$ composer require nystudio107/twig-bundle-installer
```

You should be prompted to give `allow-plugins` permission for that package.

Add this package:

```
$ composer require biggleszx/craft-picture
```

Install:

```
$ composer install
```

Add `/templates/vendor` to your root `.gitignore` file to avoid committing installed bundles to Git.

Configuration
-------------

[](#configuration)

The Picture component needs to know which widths to use when transforming your images to generate `srcset` candidates. The default widths are:

```
2240, 1920, 1600, 1280, 960, 640, 320

```

...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](https://craftcms.com/docs/5.x/configure.html#custom-settings) file:

```