We're updating the issue view to help you get more done.Â
Picture tag for DAM rendition is not accordance with W3C validator
Description
Requirement
Generated picture tag with source tags should be accordance with W3C markup validation (validator.w3.org)
Code details
Backend code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
MediaBuilder builder = mediaHandler.get(resource);
MediaFormat CONTENT = MediaFormatBuilder.create("content")
.label("All content")
.extensions("gif", "jpg", "jpeg", "png")
.build();
long[] allowed = {200, 320, 500};
builder = builder.mediaFormat(CONTENT);
for (long width : allowed) {
builder = builder.pictureSource(CONTENT, "(max-width: " + width + "px)", width);
}
String markup = builder.build().getMarkup();Generated code:
1
2
3
4
5
6
7
8
9
10
11
12
<picture>
<source media="(max-width: 200px)"
srcset="/content/dam/we-retail/en/experiences/arctic-surfing-in-lofoten/camp-fire.jpg/_jcr_content/renditions/original.image_file.200.133.file/camp-fire.jpg 200w">
</source>
<source media="(max-width: 320px)"
srcset="/content/dam/we-retail/en/experiences/arctic-surfing-in-lofoten/camp-fire.jpg/_jcr_content/renditions/original.image_file.320.213.file/camp-fire.jpg 320w">
</source>
<source media="(max-width: 500px)"
srcset="/content/dam/we-retail/en/experiences/arctic-surfing-in-lofoten/camp-fire.jpg/_jcr_content/renditions/original.image_file.500.333.file/camp-fire.jpg 500w">
</source>
<img src="/content/dam/we-retail/en/experiences/arctic-surfing-in-lofoten/camp-fire.jpg/_jcr_content/renditions/original./camp-fire.jpg" alt="Camp Fire"/>
</picture>Step to reproduce
1. Add component configured as above.
2. Publish page
3. Copy page markup and paste in W3C validator
Actual behaviour
There are 2 errors
Stray end tag source.
When the srcset attribute has any image candidate string with a width descriptor, the sizes attribute must also be present.
Environment
None
Status
Assignee
Stefan Seifert
Reporter
Bartlomiej Malecki
Labels
None
Components
Fix versions
Affects versions
Media Handler 1.5.2
Priority
Major