src/CoreBundle/Resources/views/Recipe/showById.html.twig line 1

Open in your IDE?
  1. {% extends 'pageTemplateRecipe.html.twig' %}
  2. {% block content %}
  3.     {% if error %}
  4.         <p class="danger">{{ error }}</p>
  5.     {% else %}
  6.         <div class="stage no-offset-top">
  7.             <div class="stage-image main recipe">
  8.                 <div class="image">
  9.                     {{ recipe.getHeaderImage().getThumbnail("recipeHeaderImage" ~ bundleName).getHTML() | raw }}
  10.                     {#IE Fix for thumbnails rendering start#}
  11.                     <style>
  12.                         @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  13.                             .stage-image.main.recipe > .image {
  14.                                 width: 100%;
  15.                                 height: 100%;
  16.                                 background: url( {{ recipe.getHeaderImage() }}) center right 100%/cover no-repeat;
  17.                             }
  18.                             .stage-image.main.recipe > .image img {
  19.                                 display: none;
  20.                             }
  21.                         }
  22.                     </style>
  23.                     {#IE Fix for thumbnails rendering end#}
  24.                 </div>
  25.                 <div class="text">
  26.                     <div class="main-content flex-col">
  27.                         <div class="col xs-12">
  28.                             <div class="stage-content-container">
  29.                                 <div class="content stage-text">
  30.                                     <div class="content-row headline">
  31.                                         <h1>{{ recipe.getTitle() |trans|trademark }}</h1>
  32.                                     </div>
  33.                                     <div class="content-row icon-row">
  34.                                         <div class="items">
  35.                                             <span class="icon time"></span>
  36.                                             <p class="uppercase">{{ recipe.getDuration() |trans }}</p>
  37.                                         </div>
  38.                                         <div class="items">
  39.                                             <span class="icon toque"></span>
  40.                                             <p class="uppercase">{{ recipe.getLevel() |trans }}</p>
  41.                                         </div>
  42.                                         <div class="items">
  43.                                             <span class="icon cutlery"></span>
  44.                                             <p class="uppercase">{{ 'Serves' |trans }} {{ recipe.getServes() |trans }}</p>
  45.                                         </div>
  46.                                     </div>
  47.                                     <div class="content-row text desktop-only">
  48.                                         <p>{{ recipe.getTeaserText() |trademark }}</p>
  49.                                     </div>
  50.                                 </div>
  51.                             </div>
  52.                         </div>
  53.                     </div>
  54.                 </div>
  55.                 <div class="with-anchor">
  56.                     <a href="#content-section" class="content-anchor flex-column box-align-center offset-top"></a>
  57.                 </div>
  58.             </div>
  59.         </div>
  60.         <div class="section recipe-details-wrapper mobile-only" id="content-section">
  61.             <div class="main-content flex-col">
  62.                 <div class="col xs-12">
  63.                     <div class="text">
  64.                         <p>{{ recipe.getTeaserText() |trademark }}</p>
  65.                     </div>
  66.                 </div>
  67.             </div>
  68.         </div>
  69.         <div class="section recipe-details-wrapper">
  70.             <div class="main-content flex-col">
  71.                 <div class="col xs-12 m-4 xl-3">
  72.                     <div class="ingredients">
  73.                         <h5>{{ 'Zutaten' |trans }}</h5>
  74.                         {% for ingredient in recipe.getRecipeIngredients() %}
  75.                             <p>{{ ingredient.0 }} <span>{{ ingredient.1 }}</span></p>
  76.                         {% endfor %}
  77.                     </div>
  78.                 </div>
  79.                 <div class="col xs-12 m-8 xl-9">
  80.                     <div class="product-info-container text-only">
  81.                         <h5>{{ 'Rezept' |trans }}</h5>
  82.                         {{ recipe.getRecipeText() | raw }}
  83.                     </div>
  84.                 </div>
  85.             </div>
  86.         </div>
  87.         {% if recipe.getRelatedProducts() is not empty %}
  88.             <div class="section recipe-related-products-wrapper">
  89.                 <div class="main-content flex-col">
  90.                     {% for product in recipe.getRelatedProducts() %}
  91.                         {% if product.getDefaultProduct() is not empty %}
  92.                             {% set product = product.getDefaultProduct()[0] %}
  93.                         {% endif %}
  94.                         {% set detailProductUri    = pimcore_url(
  95.                         {
  96.                         "name": product.getUrlTitle(),
  97.                         "articlenumber": product.getArticleNumber()
  98.                         },
  99.                         "shopHandlerProductDetail"
  100.                         ) %}
  101.                         <div class="col xs-12 m-6 l-4">
  102.                             <div class="teaser product-item">
  103.                                 <div class="teaser-content">
  104.                                     <div class="teaser-text-box">
  105.                                         <div class="teaser-image-front">
  106.                                             <div>
  107.                                                 {% set productListImageThumb = product.getListViewRepresentationNew() |objectFallbackImage %}
  108.                                                 {{ productListImageThumb.getThumbnail("relatedProductsBottle" ~bundleName).getHtml() |raw }}
  109.                                             </div>
  110.                                         </div>
  111.                                         <div class="teaser-text-container">
  112.                                             <div class="title-box">
  113.                                                 <p class="greyed">{{ 'Made with' |trans }}</p>
  114.                                                 <h4>{{ product.getName() |trademark }}</h4>
  115.                                             </div>
  116.                                             <div class="teaser-link">
  117.                                                 <a class="button" href="{{ detailProductUri }}" aria-label="{{ 'View Product' |trans }}">
  118.                                                     <span>
  119.                                                         {{ 'View Product' |trans }}
  120.                                                     </span>
  121.                                                 </a>
  122.                                             </div>
  123.                                         </div>
  124.                                     </div>
  125.                                 </div>
  126.                             </div>
  127.                         </div>
  128.                     {% endfor %}
  129.                 </div>
  130.             </div>
  131.         {% endif %}
  132.         {% if recipe.getVideo() is not empty and recipe.getVideoOverlay() is not empty %}
  133.             <div class="section">
  134.                 <div class="video-container with-overlay">
  135.                     {% set videoIDResult = recipe.getVideo().getData() %}
  136.                     <div class="video-wrapper">
  137.                         <div class="iframe-container {{ videoIDResult }}">
  138.                             <div id="{{ videoIDResult }}" class="mute-yt-player-container" data-video-id-result="{{ videoIDResult }}"></div>
  139.                         </div>
  140.                     </div>
  141.                     <div class="image video-overlay">
  142.                         <div class="play-button-container">
  143.                             <h2>{{ 'Play Video' |trans }}</h2>
  144.                             <span class="icon play-button"></span>
  145.                         </div>
  146.                         {{ recipe.getVideoOverlay().getThumbnail("iframeOverlay").getHTML() | raw }}
  147.                         {#IE Fix for thumbnails rendering start#}
  148.                         <style>
  149.                             @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  150.                                 .image.video-overlay {
  151.                                     width: 100%;
  152.                                     height: 500px;
  153.                                     background: url( {{ pimcore_image("iframeOverlay").getSrc() }}) center right 100%/cover no-repeat;
  154.                                 }
  155.                                 .image.video-overlay img {
  156.                                     display: none;
  157.                                 }
  158.                             }
  159.                         </style>
  160.                         {#IE Fix for thumbnails rendering end#}
  161.                     </div>
  162.                 </div>
  163.             </div>
  164.         {% endif %}
  165.         {% if recipe.getRelatedRecipes() is not empty %}
  166.             <div class="section panel {% if recipe.getRelatedRecipes()|length > 3 %}has-slider{% else %}no-slider{% endif %} one-third recipe-page">
  167.                 <div class="main-content flex-col">
  168.                     <div class="col xs-12">
  169.                         <div class="headline text-center">
  170.                             <h3>{{ 'Ähnliche Rezepte' |trans }}</h3>
  171.                         </div>
  172.                         <div class="panel-container">
  173.                             <div class="panel-content">
  174.                                 <div class="flex-col panel-slider">
  175.                                     {% for relatedRecipes in recipe.getRelatedRecipes() %}
  176.                                         {% set detailRecipeUri    = pimcore_url(
  177.                                         {
  178.                                         "name": relatedRecipes.getUrlTitle(),
  179.                                         "rezeptid": relatedRecipes.getId()
  180.                                         },
  181.                                         "recipeDetail"
  182.                                         ) %}
  183.                                         <div class="col xs-12 m-6 l-6 xl-4 one-third">
  184.                                             <div class="teaser recipe-item">
  185.                                                 <div class="teaser-content">
  186.                                                     <div class="image">
  187.                                                         {% set addBundleName = '' %}
  188.                                                         {% if bundleName == 'DeveleyLoewensenfBundle' %}
  189.                                                             {% set addBundleName = bundleName %}
  190.                                                         {% endif %}
  191.                                                         {{ relatedRecipes.getHeaderImage().getThumbnail("TeaserProductStoryImage" ~ addBundleName).getHTML() | raw }}
  192.                                                     </div>
  193.                                                     <div class="teaser-text-box">
  194.                                                         {% if relatedRecipes.getRelatedProducts() is defined and relatedRecipes.getRelatedProducts() is not null %}
  195.                                                             {% set recipeFirstRelatedRecipes = relatedRecipes.getRelatedProducts()|first %}
  196.                                                             {% if recipeFirstRelatedRecipes.getListViewRepresentationNew() is defined and recipeFirstRelatedRecipes.getListViewRepresentationNew() is not null %}
  197.                                                             <div class="teaser-image-front">
  198.                                                                 <div>
  199.                                                                     {{ recipeFirstRelatedRecipes.getListViewRepresentationNew().getThumbnail("TeaserProductStoryBottle").getHTML() | raw }}
  200.                                                                 </div>
  201.                                                             </div>
  202.                                                             {% endif %}
  203.                                                         {% endif %}
  204.                                                         <div class="teaser-text-container">
  205.                                                             <div class="title-box">
  206.                                                                 <h4>{{ relatedRecipes.getTitle() |trademark }}</h4>
  207.                                                             </div>
  208.                                                             <div class="teaser-link">
  209.                                                                 <a class="button desk-no-before-small" href="{{ detailRecipeUri }}" aria-label="{{ 'Mehr erfahren' |trans }}">{{ 'Mehr erfahren' |trans }}</a>
  210.                                                             </div>
  211.                                                         </div>
  212.                                                     </div>
  213.                                                 </div>
  214.                                             </div>
  215.                                         </div>
  216.                                     {% endfor %}
  217.                                 </div>
  218.                             </div>
  219.                         </div>
  220.                     </div>
  221.                 </div>
  222.             </div>
  223.         {% endif %}
  224.         {% endif %}
  225. {% endblock %}