Sightly Template Details

<sly data-sly-use.model="sni.models.RecipeLead"
     data-sly-use.atoms="fragments/atoms.html"
     data-sly-use.betaAtoms="fragments/atoms.beta.html"
     data-sly-use.context="sni.models.Context"
     data-sly-use.category="sni.models.RecipeCategory"
     data-sly-use.recipeOverLay="sni.models.overlay.RecipeOverLay">
  <section data-sly-test="${!(model.primaryVideo && recipeOverlay.hasVideo)}" class="o-RecipeLead${(recipeOverLay.size > 1) ? ' o-RecipeLead--HasPlaylist' : '' }${((recipeOverLay.size > 1) && recipeOverLay.size < 5) ? ' o-RecipeLead--HasShortPlaylist' : ''}${(recipeOverLay.hasVideo) ? ' o-RecipeLead--HasVideo' : ''}${(!(model.hasImage || recipeOverLay.hasVideo)) ? ' o-RecipeLead--NoPhotoAndNoVideo' : ''}${(model.hasImage && !recipeOverLay.hasVideo) ? ' o-RecipeLead--HasPhotoNoVideo' : ''}" data-video-scroll-anchor>
    <div class="o-RecipeLead__m-RecipeMedia" data-sly-test="${model.hasImage && model.mediaBlock.imageAtom}">
      <div class="m-RecipeMedia__m-MediaBlock m-MediaBlock">
        <div class="m-MediaBlock__m-MediaWrap">
          <sly data-sly-test="${context.isMobile}"  data-sly-call="${betaAtoms.image @ parent='m-MediaBlock', data=model.mediaBlock.imageAtom, rendition='sni18col-landscape', width=616, height=462 }" ></sly>
          <sly data-sly-test="${context.notMobile}" data-sly-call="${betaAtoms.image @ parent='m-MediaBlock', data=model.mediaBlock.imageAtom, rendition='sni24col-landscape', width=826, height=620, sizes='(max-width: 580px) 100vw,(min-width: 581px) and (max-width: 1024px) 685px,(min-width: 1025px) and (max-width: 1149px) 745px,820px', srcset='sni11col-landscape,sni13col-landscape,sni15col-landscape,sni17col-landscape,sni20col-landscape,sni22col-landscape,sni24col-landscape'}"></sly>
        </div>
      </div>
    </div>
  </section>

  <sly data-sly-test="${model.primaryVideo && recipeOverlay.hasVideo}" data-sly-call="${gvpComp @ recipeOverlay=recipeOverlay, context=context}"></sly>

</sly>

<template data-sly-template.gvpComp="${@ recipeOverlay, context}">
  <section class="o-RecipeLead recipeLead__container">
    <div data-affix-behavior-height-maintainer="">
      <div class="o-VideoPlaylist__VideoContainer animated">
        <div class="o-VideoPlaylist__VideoDragContainer" style="position: relative;">
          <div class="o-VideoPlaylist__VideoContentContainer">
            <div class="o-VideoPlaylist__m-closeContainer">
              <a class="o-VideoPlaylist__a-Button--Close m-ButtonWrap" data-type="modal-close" aria-label="Close inline video" title="Close inline video"></a>
            </div>
            <button class="o-VideoPlaylist__VideoDragHandle">
              <sly data-sly-use.atoms="fragments/atoms.html" data-sly-call="${atoms.icon @ parent='o-VideoPlaylist', data=recipeOverlay.iconAtom}"></sly>
            </button>
            <sly data-sly-use.globalVideoPlayer="fragments/organisms/globalVideoPlayer.html">
              <sly data-sly-call="${globalVideoPlayer.gvp @ playlist=recipeOverlay.playlist}"></sly>
            </sly>
            <div class="o-VideoPlaylist__VideoContainerOverlay"></div>
          </div>
        </div>
      </div>
    </div>
  </section>

</template>