changing img for picture element in gallery

guardian · Apr 15, 2016 · e87a923 · e87a923
1 parent dd155f8
commit e87a923
Showing 1 changed file with 26 additions and 5 deletions.
diff --git a/applications/app/views/fragments/newGalleryBody.scala.html b/applications/app/views/fragments/newGalleryBody.scala.html
@@ -92,16 +92,37 @@ <h2 class="fc-container__header__title">
             </div>
 
             <div class="gallery__img-container gallery__img-container@if(image.width >= image.height) {--landscape} else {--portrait}">
-                <img class="gallery__img js-gallery-img gallery__img@if(image.width >= image.height) {--landscape} else {--portrait}"
-                    srcset="@ImgSrc.srcset(imageElement.images, GalleryMedia.inline)"
-                    sizes="@GalleryMedia.inline.sizes"
-                    src="@ImgSrc.getFallbackUrl(imageElement.images)"
+                <picture>
+                    @* IE 9 needs this workaround as per https://scottjehl.github.io/picturefill/ *@
+                        <!--[if IE 9]><video style="display: none;"><![endif]-->
+                    @defining({
+                        GalleryMedia.inline
+                    }) { widths =>
+                        @widths.breakpoints.map { breakpointWidth =>
+                            <source media="(min-width: @breakpointWidth.breakpoint.minWidth.getOrElse("0")px) and (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)"
+                            sizes="@breakpointWidth.width"
+                            srcset="@ImgSrc.srcsetForBreakpoint(breakpointWidth, widths.breakpoints, maybePath = None, maybeImageMedia = Some(imageElement.images), hidpi = true)" />
+                            <source media="(min-width: @breakpointWidth.breakpoint.minWidth.getOrElse("0")px)"
+                            sizes="@breakpointWidth.width"
+                            srcset="@ImgSrc.srcsetForBreakpoint(breakpointWidth, widths.breakpoints, maybePath = None, maybeImageMedia = Some(imageElement.images))" />
+                        }
+                    }
+
+                    <!--[if IE 9]></video><![endif]-->
+
+                    <img class="gallery__img gallery__img@if(image.width >= image.height) {--landscape} else {--portrait}"
+                    itemprop="contentUrl"
                     alt="@image.altText.getOrElse("")"
-                    itemprop="contentUrl" />
+                    src="@ImgSrc.getFallbackUrl(imageElement.images)" />
+                </picture>
             </div>
         </figure>
     </li>
 
+
+
+
+
     @if(!gallery.content.shouldHideAdverts && rowNum % adInterval == 0) {
         @adSlots.lift((rowNum / adInterval) - 1).map { adSlot =>
             <li class="gallery__item gallery__item--advert">