4.1.2 • Published 2 months ago
@ecl/twig-component-picture v4.1.2
ECL Picture component
npm package: @ecl/twig-component-picture
npm install --save @ecl/twig-component-picture
Parameters
- "picture" (associative array) (default: {}):
- "img" (associative array) (default: {}):
- "src" (string) (default: ''): Path to the image
- "alt" (string) (default: ''): Alt text of the image
- "sources" (array) (default: []): format: { "src" (string) (default: ''): Path to the source image "media" (string) (default: ''): Media condition to use this source. Could be a breakpoint ('s', 'm', 'l', 'xl') or a free string. "type" (string) (default: ''): Type of this source }, ...
- "extra_classes" (optional) (string) (default: ''): Extra css classes, added to the root picture tag
- "extra_image_classes" (optional) (string) (default: ''): Extra css classes, added to to the img tag
- "extra_attributes" (optional) (array) (default: [])
- "name" (string) Attribute name, eg. 'data-test'
- "value" (optional) (string) Attribute value, eg: 'data-test-1'
- "img" (associative array) (default: {}):
Example:
{% include '@ecl/picture/picture.html.twig' with {
picture: {
img: {
src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
alt: 'Image alternative text',
},
sources: [
{
src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image6.jpg',
media: '(min-width: 90rem)'
},
{
src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image5.jpg',
media: 'xl',
},
{
src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg',
media: 'l',
},
{
src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image3.jpg',
media: 'm',
},
{
src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg',
media: 's',
},
],
},
} %}
4.1.2
2 months ago
4.1.1
2 months ago
4.1.0
2 months ago
4.0.2
3 months ago
4.0.1
3 months ago
4.0.0
4 months ago
4.0.0-beta-3
4 months ago
4.0.0-beta-2
4 months ago
4.0.0-beta-1
4 months ago
3.13.0
5 months ago
3.12.1
6 months ago
3.12.0
6 months ago
3.11.0
8 months ago
3.10.0
9 months ago
3.11.1
7 months ago
3.9.1
11 months ago
3.9.0
11 months ago
3.8.5
11 months ago
3.8.4
1 year ago
3.8.3
1 year ago
3.8.2
1 year ago
3.8.1
1 year ago
3.8.0
1 year ago