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
9 months ago
4.7.1
9 months ago
4.8.0
9 months ago
4.6.3
10 months ago
4.6.2
10 months ago
4.6.5
10 months ago
4.6.4
10 months ago
4.5.0
11 months ago
4.2.3
1 year ago
4.4.0
12 months ago
4.2.2
1 year ago
4.7.0
10 months ago
4.6.1
11 months ago
4.6.0
11 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
1 year 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