{% extends 'pageTemplateRecipe.html.twig' %}{% block content %} {% if error %} <p class="danger">{{ error }}</p> {% else %} <div class="stage no-offset-top"> <div class="stage-image main recipe"> <div class="image"> {{ recipe.getHeaderImage().getThumbnail("recipeHeaderImage" ~ bundleName).getHTML() | raw }} {#IE Fix for thumbnails rendering start#} <style> @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .stage-image.main.recipe > .image { width: 100%; height: 100%; background: url( {{ recipe.getHeaderImage() }}) center right 100%/cover no-repeat; } .stage-image.main.recipe > .image img { display: none; } } </style> {#IE Fix for thumbnails rendering end#} </div> <div class="text"> <div class="main-content flex-col"> <div class="col xs-12"> <div class="stage-content-container"> <div class="content stage-text"> <div class="content-row headline"> <h1>{{ recipe.getTitle() |trans|trademark }}</h1> </div> <div class="content-row icon-row"> <div class="items"> <span class="icon time"></span> <p class="uppercase">{{ recipe.getDuration() |trans }}</p> </div> <div class="items"> <span class="icon toque"></span> <p class="uppercase">{{ recipe.getLevel() |trans }}</p> </div> <div class="items"> <span class="icon cutlery"></span> <p class="uppercase">{{ 'Serves' |trans }} {{ recipe.getServes() |trans }}</p> </div> </div> <div class="content-row text desktop-only"> <p>{{ recipe.getTeaserText() |trademark }}</p> </div> </div> </div> </div> </div> </div> <div class="with-anchor"> <a href="#content-section" class="content-anchor flex-column box-align-center offset-top"></a> </div> </div> </div> <div class="section recipe-details-wrapper mobile-only" id="content-section"> <div class="main-content flex-col"> <div class="col xs-12"> <div class="text"> <p>{{ recipe.getTeaserText() |trademark }}</p> </div> </div> </div> </div> <div class="section recipe-details-wrapper"> <div class="main-content flex-col"> <div class="col xs-12 m-4 xl-3"> <div class="ingredients"> <h5>{{ 'Zutaten' |trans }}</h5> {% for ingredient in recipe.getRecipeIngredients() %} <p>{{ ingredient.0 }} <span>{{ ingredient.1 }}</span></p> {% endfor %} </div> </div> <div class="col xs-12 m-8 xl-9"> <div class="product-info-container text-only"> <h5>{{ 'Rezept' |trans }}</h5> {{ recipe.getRecipeText() | raw }} </div> </div> </div> </div> {% if recipe.getRelatedProducts() is not empty %} <div class="section recipe-related-products-wrapper"> <div class="main-content flex-col"> {% for product in recipe.getRelatedProducts() %} {% if product.getDefaultProduct() is not empty %} {% set product = product.getDefaultProduct()[0] %} {% endif %} {% set detailProductUri = pimcore_url( { "name": product.getUrlTitle(), "articlenumber": product.getArticleNumber() }, "shopHandlerProductDetail" ) %} <div class="col xs-12 m-6 l-4"> <div class="teaser product-item"> <div class="teaser-content"> <div class="teaser-text-box"> <div class="teaser-image-front"> <div> {% set productListImageThumb = product.getListViewRepresentationNew() |objectFallbackImage %} {{ productListImageThumb.getThumbnail("relatedProductsBottle" ~bundleName).getHtml() |raw }} </div> </div> <div class="teaser-text-container"> <div class="title-box"> <p class="greyed">{{ 'Made with' |trans }}</p> <h4>{{ product.getName() |trademark }}</h4> </div> <div class="teaser-link"> <a class="button" href="{{ detailProductUri }}" aria-label="{{ 'View Product' |trans }}"> <span> {{ 'View Product' |trans }} </span> </a> </div> </div> </div> </div> </div> </div> {% endfor %} </div> </div> {% endif %} {% if recipe.getVideo() is not empty and recipe.getVideoOverlay() is not empty %} <div class="section"> <div class="video-container with-overlay"> {% set videoIDResult = recipe.getVideo().getData() %} <div class="video-wrapper"> <div class="iframe-container {{ videoIDResult }}"> <div id="{{ videoIDResult }}" class="mute-yt-player-container" data-video-id-result="{{ videoIDResult }}"></div> </div> </div> <div class="image video-overlay"> <div class="play-button-container"> <h2>{{ 'Play Video' |trans }}</h2> <span class="icon play-button"></span> </div> {{ recipe.getVideoOverlay().getThumbnail("iframeOverlay").getHTML() | raw }} {#IE Fix for thumbnails rendering start#} <style> @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .image.video-overlay { width: 100%; height: 500px; background: url( {{ pimcore_image("iframeOverlay").getSrc() }}) center right 100%/cover no-repeat; } .image.video-overlay img { display: none; } } </style> {#IE Fix for thumbnails rendering end#} </div> </div> </div> {% endif %} {% if recipe.getRelatedRecipes() is not empty %} <div class="section panel {% if recipe.getRelatedRecipes()|length > 3 %}has-slider{% else %}no-slider{% endif %} one-third recipe-page"> <div class="main-content flex-col"> <div class="col xs-12"> <div class="headline text-center"> <h3>{{ 'Ähnliche Rezepte' |trans }}</h3> </div> <div class="panel-container"> <div class="panel-content"> <div class="flex-col panel-slider"> {% for relatedRecipes in recipe.getRelatedRecipes() %} {% set detailRecipeUri = pimcore_url( { "name": relatedRecipes.getUrlTitle(), "rezeptid": relatedRecipes.getId() }, "recipeDetail" ) %} <div class="col xs-12 m-6 l-6 xl-4 one-third"> <div class="teaser recipe-item"> <div class="teaser-content"> <div class="image"> {% set addBundleName = '' %} {% if bundleName == 'DeveleyLoewensenfBundle' %} {% set addBundleName = bundleName %} {% endif %} {{ relatedRecipes.getHeaderImage().getThumbnail("TeaserProductStoryImage" ~ addBundleName).getHTML() | raw }} </div> <div class="teaser-text-box"> {% if relatedRecipes.getRelatedProducts() is defined and relatedRecipes.getRelatedProducts() is not null %} {% set recipeFirstRelatedRecipes = relatedRecipes.getRelatedProducts()|first %} {% if recipeFirstRelatedRecipes.getListViewRepresentationNew() is defined and recipeFirstRelatedRecipes.getListViewRepresentationNew() is not null %} <div class="teaser-image-front"> <div> {{ recipeFirstRelatedRecipes.getListViewRepresentationNew().getThumbnail("TeaserProductStoryBottle").getHTML() | raw }} </div> </div> {% endif %} {% endif %} <div class="teaser-text-container"> <div class="title-box"> <h4>{{ relatedRecipes.getTitle() |trademark }}</h4> </div> <div class="teaser-link"> <a class="button desk-no-before-small" href="{{ detailRecipeUri }}" aria-label="{{ 'Mehr erfahren' |trans }}">{{ 'Mehr erfahren' |trans }}</a> </div> </div> </div> </div> </div> </div> {% endfor %} </div> </div> </div> </div> </div> </div> {% endif %} {% endif %}{% endblock %}