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

Affects versions

Media Handler 1.5.2

Priority

Major