Fixed
Details
Assignee
Stefan Seifert
Stefan SeifertReporter
Bartlomiej Malecki
Bartlomiej Malecki(Deactivated)Components
Fix versions
Affects versions
Priority
MajorCreated August 2, 2019 at 7:38 AM
Updated August 23, 2019 at 10:28 AM
Resolved August 9, 2019 at 10:13 PM
Requirement
Generated picture tag with source tags should be accordance with W3C markup validation (validator.w3.org)
Code details
Backend code:
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:
<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.