Sightly Template Details

<template data-sly-template.view="${ @ mediaMolecule }">
  <sly
    data-sly-use.context="sni.models.Context"
    data-sly-use.atoms="fragments/atoms.html"
    data-sly-use.fwatoms="fragments/atoms.fullwidth.html"
    data-sly-use.rendition="sni.models.view.helpers.Rendition">
  </sly>
  <div class="m-MediaBlock o-EpisodeGuide__m-MediaBlock m-MediaBlock--Episode">
    <div class="m-MediaItem__m-MediaWrap" data-sly-test="${!mediaMolecule.hasExternalImage && mediaMolecule.imageAtom.image}">
      <sly data-sly-test.assetType="${mediaMolecule.assetType != '' ? mediaMolecule.assetType : 'Episode'}"/>
      <sly data-sly-call="${atoms.image @ parent='o-EpisodeGuide', data=mediaMolecule.imageAtom, rendition=context.isMobile ? rendition.forType[assetType].orDefault['sni4col-square'] : rendition.forType[assetType].orDefault['sni15col-square']}"></sly>
    </div>
    <div class="m-MediaItem__m-MediaWrap" data-sly-test="${mediaMolecule.hasExternalImage}">
      <a href="${mediaMolecule.episodeLink}">
        <img src="${mediaMolecule.episodeImage}" class="a-Image" />
      </a>
    </div>
    <div class="m-MediaItem__m-TextWrap">
      <div class="o-EpisodeGuide__a-StripLabel">
        <div class="m-MediaItem__m-MediaLabel">
          <span class="a-Label">${mediaMolecule.upcomingLabel}</span>
        </div>
        <h3 class="o-EpisodeGuide__a-StripTitle" data-sly-element="${headerLevel}" data-sly-test="${mediaMolecule.headlineAtom.title}">
          <a href="${mediaMolecule.headlineAtom.link @ context='attribute'}${data.urlFragment}" target="${mediaMolecule.headlineAtom.target}" data-type="${mediaMolecule.headlineAtom.dataType}" data-sly-unwrap="${!mediaMolecule.headlineAtom.link}">
            <span class="$o-EpisodeGuide__a-HeadlineText">${mediaMolecule.headlineAtom.title @ context='html'}</span>
          </a>
        </h3>
      </div>
    </div>
  </div>
</template>