applications/app/views/fragments/galleryBody.scala.html

@import common.LinkTo
@import layout.ContentWidths.GalleryMedia
@import model.{GalleryPage, ImageAsset, ImageElement}
@import views.support.Commercial.isPaidContent
@import views.support.TrailCssClasses.toneClass
@import views.support.`package`.Seq2zipWithRowInfo
@import views.support.{RenderClasses, RowInfo}
@import views.GalleryCaptionCleaners
@import views.support.AffiliateLinksCleaner
@import conf.switches.Switches
@import conf.Configuration

@import model.DotcomContentType
@(page: GalleryPage)(implicit request: RequestHeader, context: model.ApplicationContext)

<div class="gallery__main-content">

    @* Manually placing tonal--tone-media as temporary fix to ensute special report tones have it *@
    <article id="article" class="@RenderClasses(
            Map("content--paidgallery" -> isPaidContent(page)),
            "content", "content--media", "content--gallery", s"content--pillar-${page.metadata.pillar.nameOrDefault}", "tonal", "content--immersive", "tonal--tone-media", s"tonal--${toneClass(page.item)}"
        )"
        itemscope itemtype="@page.item.metadata.schemaType" role="main">

        @fragments.galleryHeader(
            page,
            page.item.lightbox.containsAffiliateableLinks && AffiliateLinksCleaner.shouldAddAffiliateLinks(
                switchedOn = Switches.AffiliateLinks.isSwitchedOn,
                showAffiliateLinks = page.gallery.content.fields.showAffiliateLinks,
                alwaysOffTags = Configuration.affiliateLinks.alwaysOffTags,
                tagPaths = page.gallery.content.tags.tags.map(_.id),
            )
        )

        <div class="@RenderClasses(
                    "l-side-margins", "l-side-margins--media", "l-side-margins--gallery"
                )">
            <div class="content__main tonal__main tonal__main--@toneClass(page.item)">
                <div class="gs-container gallery__divider">
                    <div class="content__main-column content__main-column--gallery">
                        <ul class="gallery">
                            @page.item.lightbox.largestCrops.zipWithRowInfo.map { case (image, row) =>
                                @galleryItem(4, image, row, page.item.lightbox.imageContainer(row.rowNum - 1))
                            }
                        </ul>
                        @fragments.submeta(page.item)
                    </div>
                </div>
            </div>
        </div>
    </article>

    @if(page.item.content.showInRelated && !isPaidContent(page)) {
        <div class="@RenderClasses(
                    Map("l-side-margins--paidgallery" -> isPaidContent(page)),
                    "l-side-margins", "l-side-margins--media", "l-side-margins--gallery"
                )">
            <div class="gallery__most-popular facia-container fc-container fc-container--media hide-on-childrens-books-site js-gallery-most-popular tonal--@toneClass(page.item)">
                <div class="fc-container__inner">
                    <div class="fc-container__header">
                        <h2 class="fc-container__header__title">
                            <a class="most-viewed-no-js tone-colour" href="@LinkTo{/inpictures/all}" data-link-name="Most viewed galleries">More galleries</a>
                        </h2>
                    </div>
                </div>
            </div>
        </div>
    }
</div>
<div class="l-side-margins">
    @fragments.contentFooter(page.item, page.related, "media", isPaidContent(page))
</div>

@galleryItem(adInterval: Int, image: ImageAsset, rowInfo: RowInfo, imageElement: ImageElement) = {

    <li id="img-@rowInfo.rowNum" class="gallery__item js-gallery-item" data-link-name="Gallery item | @rowInfo.rowNum">
        <figure itemscope itemtype="http://schema.org/ImageObject">

            <div class="gallery__figcaption">
                @image.caption.map { caption =>
                    <div class="gallery__caption" itemprop="caption">@GalleryCaptionCleaners(page, caption, rowInfo.rowNum == 1)</div>
                }
                @if(image.displayCredit) {
                    @image.credit.map { credit =>
                        <p class="gallery__credit" itemprop="author">@credit</p>
                    }
                }

                @fragments.share.blockLevelSharing(
                    "img-" + rowInfo.rowNum.toString,
                    page.item.sharelinks.elementShares("img-" + rowInfo.rowNum.toString, image.path),
                    page.item.metadata.contentType.getOrElse(DotcomContentType.Unknown),
                    isNewGallery = true
                )
            </div>

            @defining(
                if(image.width >= image.height) {"--landscape"} else {"--portrait"}
            ) { orientation =>
                <div class="gallery__img-container gallery__img-container@orientation"
                    @*
                     * This ensures that the image height never goes above 96vh
                     *@
                    style="max-width: calc(@image.ratioDouble * 96vh)">
                    @fragments.image(
                        imageElement.images,
                        Seq("gallery__img", s"gallery__img$orientation"),
                        GalleryMedia.inline,
                        image.altText.getOrElse("")
                    )
                    <a href="@LinkTo{@page.item.metadata.url#img-@rowInfo.rowNum}"
                        class="js-gallerythumbs gallery__fullscreen-container"
                        tabindex="0"
                        data-link-name="Launch Gallery Lightbox" data-is-ajax
                        aria-label="Expand image to fullscreen"
                    >
                        @fragments.inlineSvg("expand-image", "icon", List("centered-icon", "rounded-icon", "gallery__fullscreen", "modern-visible", "gallery-expand"))
                    </a>
                </div>
            }
        </figure>
    </li>

    @if(!page.item.content.shouldHideAdverts && rowInfo.rowNum % adInterval == 0) {
        <li class="gallery__item gallery__item--advert">
            <div class="gallery__img-container">
                @defining(rowInfo.rowNum / adInterval) { inlineId =>
                    @gallerySlot(inlineId)
                    @gallerySlot(inlineId - 1, isMobile = true)
                }
            </div>
        </li>
    }
}