PHPackages                             marionnewlevant/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. [Image & Media](/categories/media)
4. /
5. marionnewlevant/picture

ActiveCraft-plugin[Image & Media](/categories/media)

marionnewlevant/picture
=======================

Generate responsive <picture> and <img> elements based on configuration.

5.0.0(1y ago)1213.8k—8.3%1[1 issues](https://github.com/marionnewlevant/craft-picture/issues)[1 PRs](https://github.com/marionnewlevant/craft-picture/pulls)MITPHP

Since Feb 9Pushed 1y ago2 watchersCompare

[ Source](https://github.com/marionnewlevant/craft-picture)[ Packagist](https://packagist.org/packages/marionnewlevant/picture)[ RSS](/packages/marionnewlevant-picture/feed)WikiDiscussions v5 Synced 1mo ago

READMEChangelog (10)Dependencies (2)Versions (11)Used By (0)

picture plugin for Craft 5
==========================

[](#picture-plugin-for-craft-5)

Generate <picture> elements.

See v1 branch for the Craft 2 version, see v2 branch for Craft 3 and 4 versions
-------------------------------------------------------------------------------

[](#see-v1-branch-for-the-craft-2-version-see-v2-branch-for-craft-3-and-4-versions)

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

[](#installation)

1. Install with Composer via `composer require marionnewlevant/picture` from your project directory
2. Install plugin in the Craft Control Panel under Settings > Plugins

or

1. Install via the Plugin Store

picture Overview
----------------

[](#picture-overview)

Creates the transforms for an asset, and generates a <picture> or <img> element, or simply returns the transformed image url. Most of the work is in writing the configuration that describes the different image styles.

The plugin provides four variables: `craft.picture.element` generates <picture> and <img> elements, which contain multiple urls for transformations of a single image. `craft.picture.url` generates a single url, useful when the image is a `background-image`. Additionally, `craft.picture.imageStyles` returns an array of the names of the defined image styles, and craft.picture.urlTransforms returns an array of the names of the defined urlTransforms.

Configuring picture
-------------------

[](#configuring-picture)

You need a config file, `craft/config/picture.php`. That file defines the different image styles for your project.

Here is a sample configuration file:

```