summary

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:

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>