4.7.2 • Published 9 months ago
@ecl/twig-component-picture v4.7.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.7.2
9 months ago
4.8.1
10 months ago
4.7.1
10 months ago
4.8.0
10 months ago
4.6.3
11 months ago
4.6.2
11 months ago
4.6.5
11 months ago
4.6.4
11 months ago
4.5.0
1 year ago
4.2.3
1 year ago
4.4.0
1 year ago
4.2.2
1 year ago
4.7.0
10 months ago
4.6.1
11 months ago
4.6.0
12 months ago
4.3.0
1 year ago
4.2.1
1 year ago
4.2.0
1 year ago
4.1.2
1 year ago
4.1.1
1 year ago
4.1.0
1 year ago
4.0.2
1 year ago
4.0.1
1 year ago
4.0.0
1 year ago
4.0.0-beta-3
1 year ago
4.0.0-beta-2
1 year ago
4.0.0-beta-1
1 year ago
3.13.0
2 years ago
3.12.1
2 years ago
3.12.0
2 years ago
3.11.0
2 years ago
3.10.0
2 years ago
3.11.1
2 years ago
3.9.1
2 years ago
3.9.0
2 years ago
3.8.5
2 years ago
3.8.4
2 years ago
3.8.3
2 years ago
3.8.2
2 years ago
3.8.1
2 years ago
3.8.0
2 years ago