templates/ricette/recipeDetail.html.twig line 150

  1. {% extends 'base.html.twig' %}
  3. {% import 'partials/macros/_breadcrumbs.html.twig' as page %}
  5. {% block meta_alternate '' %}
  7. {% block javascripts %}
  8.     <script type="application/ld+json">
  9.         {
  10.             "@context": "https://schema.org/",
  11.             "@type": "Recipe",
  12.             "name": "{{ recipe.title }}",
  13.             "image": [
  14.                 "{{ ('/uploads/images/ricette/' ~ recipe.image) | imagine_filter('size_1000_700') }}"
  15.             ],
  16.             "keywords": "{{ recipe.people }} {{ 'recipes_detail.people'|trans({}, 'pages') }}, {{ recipe.difficulty }}",
  17.             "totalTime": "PT{{ recipe.time }}M",
  18.             "recipeCategory": "{{ recipe.type.name }}",
  19.             {% if recipe.ingredients %}
  20.                 "recipeIngredient": [
  21.                     {% for ingredient in recipe.ingredients %}
  22.                         "{{ ingredient }}"{% if not loop.last %},{% endif %}
  23.                     {% endfor %}
  24.                 ],
  25.             {% endif %}
  26.             {% if recipe.method %}
  27.                 "recipeInstructions": [
  28.                     "{{ recipe.method|raw|replace({'"': ''}) }}"
  29.                 ]
  30.             {% endif %}
  31.         }
  32.     </script>
  33. {% endblock %}
  35. {% block content %}
  37.     {% set product = recipe.product %}
  39.     {% set listBreadcrumbs = {
  40.         1: [ path('app_recipes'), 'menu.recipes' ],
  41.         2: [ '', recipe.title ]
  42.     } %}
  44.     {{ page.breadcrumbs(listBreadcrumbs) }}
  46.     <section class="wow animate__fadeIn padding-100px-bottom md-padding-60px-bottom sm-padding-30px-bottom">
  47.         <div class="container-fluid">
  48.             <div class="row justify-content-center">
  49.                 <div class="col col-md-8 text-center">
  50.                     <h1>
  51.                         {{ recipe.title|upper }}
  52.                     </h1>
  53.                 </div>
  54.             </div>
  55.         </div>
  56.     </section>
  58.     <section class="wow animate__fadeInUp padding-100px-bottom md-padding-60px-bottom sm-padding-30px-bottom">
  59.         <div class="container-fluid">
  60.             <div class="row justify-content-center">
  61.                 <div class="col-12 col-md-8 col-xl-7 sm-margin-15px-bottom wow animate__fadeInLeft" data-wow-delay="0.2s">
  62.                     <div class="h-550px lg-h-500px md-h-400px sm-h-350px overflow-hidden cover-background Bdrs(30px)" style="background-image: url('{{ ('/uploads/images/ricette/' ~ recipe.image) | imagine_filter('size_1000_700') }}')">
  63.                     </div>
  64.                 </div>
  65.                 <div class="col-12 col-md-4 col-xl-3 wow animate__fadeInRight" data-wow-delay="0.4s">
  66.                     <div class="Bgc(la-rioja) d-flex flex-column align-items-center justify-content-center h-100 padding-20px-all overflow-hidden Bdrs(30px)" data-parallax-background-ratio="0.7" style="background-image: url('{{ asset('assets/images/webp/frontend/recipes/bg-leaf.webp') }}')">
  67.                         <div>
  68.                             {% if recipe.people %}
  69.                                 <div class="d-flex align-items-center position-relative text-start margin-50px-bottom lg-margin-30px-bottom sm-margin-20px-bottom last-paragraph-no-margin">
  70.                                     <div class="border-radius-50 d-flex margin-20px-right md-padding-10px-all padding-20px-all text-white md-w-50px w-70px md-h-50px Bgc(jewel) H(70px)">
  71.                                         {% include 'partials/svg/_icon_people.svg.twig' %}
  72.                                     </div>
  73.                                     <div>
  74.                                         <h4 class="text-white-2 margin-5px-bottom counter" data-to="{{ recipe.people }}" data-speed="1000">
  75.                                             {{ recipe.people }}
  76.                                         </h4>
  77.                                         <span class="text-uppercase position-relative top-minus4">{{ 'recipes_detail.people'|trans({}, 'pages') }}</span>
  78.                                     </div>
  79.                                 </div>
  80.                             {% endif %}
  82.                             {% if recipe.time %}
  83.                                 <div class="d-flex align-items-center position-relative text-start margin-50px-bottom lg-margin-30px-bottom sm-margin-20px-bottom last-paragraph-no-margin">
  84.                                     <div class="border-radius-50 d-flex margin-20px-right md-padding-10px-all padding-20px-all text-white md-w-50px w-70px md-h-50px Bgc(jewel) H(70px)">
  85.                                         {% include 'partials/svg/_icon_clock_time.svg.twig' %}
  86.                                     </div>
  87.                                     <div>
  88.                                         <h4 class="text-white-2 margin-5px-bottom counter" data-to="{{ recipe.time }}" data-speed="2000">
  89.                                             {{ recipe.time }}
  90.                                         </h4>
  91.                                         <span class="text-uppercase position-relative top-minus4">{{ 'recipes_detail.minutes'|trans({}, 'pages') }}</span>
  92.                                     </div>
  93.                                 </div>
  94.                             {% endif %}
  96.                             {% if recipe.difficulty %}
  97.                                 <div class="d-flex align-items-center position-relative text-start margin-50px-bottom lg-margin-30px-bottom sm-margin-20px-bottom last-paragraph-no-margin">
  98.                                     <div class="border-radius-50 d-flex margin-20px-right md-padding-10px-all padding-20px-all text-white md-w-50px w-70px md-h-50px Bgc(jewel) H(70px)">
  99.                                         {% include 'partials/svg/_icon_chef.svg.twig' %}
  100.                                     </div>
  101.                                     <div>
  102.                                         <h4 class="text-white-2 margin-5px-bottom">
  103.                                             {{ ('recipes.filter.difficulty.' ~ recipe.difficulty)|replace({' ': '_'})|trans({}, 'pages')|lower }}
  104.                                         </h4>
  105.                                         <span class="text-uppercase position-relative top-minus4">{{ 'recipes_detail.difficulty'|replace({' ': '_'})|trans({}, 'pages') }}</span>
  106.                                     </div>
  107.                                 </div>
  108.                             {% endif %}
  110.                             {% if recipe.type %}
  111.                                 <div class="d-flex align-items-center position-relative text-start last-paragraph-no-margin">
  112.                                     <div class="border-radius-50 d-flex margin-20px-right md-padding-10px-all padding-20px-all text-white md-w-50px w-70px md-h-50px Bgc(jewel) H(70px)">
  113.                                         {% include 'partials/svg/_icon_fork_and_knife.svg.twig' %}
  114.                                     </div>
  115.                                     <div>
  116.                                         <h4 class="text-white-2 margin-5px-bottom">
  117.                                             {{ ('recipes.filter.types.' ~ recipe.type)|replace({' ': '_'})|trans({}, 'pages')|lower }}
  118.                                         </h4>
  119.                                         <span class="text-uppercase position-relative top-minus4">{{ 'recipes_detail.type'|trans({}, 'pages') }}</span>
  120.                                     </div>
  121.                                 </div>
  122.                             {% endif %}
  123.                         </div>
  124.                     </div>
  125.                 </div>
  126.             </div>
  127.         </div>
  128.     </section>
  130.     <section class="wow animate__fadeInUp padding-100px-bottom md-padding-60px-bottom sm-padding-30px-bottom">
  131.         <div class="container">
  132.             <div class="row align-items-center justify-content-center">
  133.                 {% if recipe.ingredients %}
  134.                     <div class="col-12 col-md-8 sm-margin-15px-bottom wow animate__fadeInLeft" data-wow-delay="0.2s">
  135.                         <h3 class="margin-40px-bottom">
  136.                             {{ 'recipes_detail.ingredients'|trans({}, 'pages') }}
  137.                         </h3>
  138.                         <div class="easyadmin-output">
  139.                             <ul>
  140.                                 {% for ingredient in recipe.ingredients %}
  141.                                     <li class="margin-10px-bottom md-margin-5px-bottom">
  142.                                         {{ ingredient }}
  143.                                     </li>
  144.                                 {% endfor %}
  145.                             </ul>
  146.                         </div>
  147.                     </div>
  148.                 {% endif %}
  149.                 <div class="col-9 {% if recipe.ingredients %}col-md-4{% endif %} wow animate__fadeInRight" data-wow-delay="0.4s">
  150.                     <a class="d-block" href="{{ path('app_show_product', {'category_slug': product.type.productType.slug, 'product_slug': product.slug}) }}">
  151.                         <div class="productRow">
  152.                             {% if product.new %}
  153.                                 {% include 'partials/badge/_badge_new.html.twig' %}
  154.                             {% endif %}
  155.                             <img class="w-100 product-png-shadow" src="{{ ('/uploads/images/product/' ~ product.imagePackName) | imagine_filter('size_700_890') }}" alt="{{ product.name }}">
  156.                         </div>
  157.                     </a>
  158.                 </div>
  159.             </div>
  160.         </div>
  161.     </section>
  163.     {% if recipe.method %}
  164.         <section class="wow animate__fadeInUp padding-100px-bottom md-padding-60px-bottom sm-padding-30px-bottom">
  165.             <div class="Bgc(la-rioja) sm-padding-40px-top padding-60px-top padding-40px-bottom overflow-hidden Bdrs(30px)" data-parallax-background-ratio="0.7" style="background-image: url('{{ asset('assets/images/webp/frontend/recipes/bg-leaf.webp') }}')">
  166.                 <div class="container">
  167.                     <div class="row">
  168.                         <div class="col-12">
  169.                             <h3 class="C(jewel) margin-40px-bottom text-center">
  170.                                 {{ 'recipes_detail.method'|trans({}, 'pages')|upper }}
  171.                             </h3>
  172.                             <div class="easyadmin-output easyadmin-output_recipe-method">
  173.                                 {{ recipe.method|replace({'<div><br></div>': ''})|raw }}
  174.                             </div>
  175.                         </div>
  176.                     </div>
  177.                 </div>
  178.             </div>
  179.         </section>
  180.     {% endif %}
  182.     {% if recipesRelated|length > 0 %}
  183.         <section class="padding-100px-bottom md-padding-60px-bottom sm-padding-30px-bottom">
  184.             <div class="container-fluid">
  185.                 <div class="row justify-content-center">
  186.                     <div class="col col-md-8 text-center">
  187.                         <h3 class="margin-40px-bottom">
  188.                             {{ 'recipes_detail.other_recipes'|trans({}, 'pages') }}
  189.                         </h3>
  190.                     </div>
  191.                 </div>
  192.                 <div class="row position-relative justify-content-center">
  193.                     <div class="col-12 col-md-12 col-sm-9">
  194.                         <div class="swiper-container swiper-pagination-bottom black-move blog-slider"
  195.                             data-slider-options='{
  196.                                 "slidesPerView": 1,
  197.                                 "allowTouchMove": true,
  198.                                 "loop": false,
  199.                                 "spaceBetween": 30,
  200.                                 "autoplay": false,
  201.                                 "keyboard": {
  202.                                     "enabled": true,
  203.                                     "onlyInViewport": true
  204.                                 },
  205.                                 "breakpoints": {
  206.                                     "992": {
  207.                                         "slidesPerView": 3
  208.                                     },
  209.                                     "768": {
  210.                                         "slidesPerView": 2
  211.                                     }
  212.                                 },
  213.                                 "pagination": {
  214.                                     "el": ".swiper-pagination-recipes",
  215.                                     "clickable": true
  216.                                 }
  217.                             }'>
  218.                             <div class="swiper-wrapper">
  219.                                 {% for recipeRelated in recipesRelated %}
  220.                                     <div class="swiper-slide">
  221.                                         <div class="blog-post bg-white border-radius-10 overflow-hidden">
  222.                                             <div class="blog-post-images border-radius-10 overflow-hidden position-relative">
  223.                                                 <a href="{{ path('app_recipes_detail', {'slug': recipeRelated.slug} ) }}">
  224.                                                     <img class="d-block" src="{{ ('/uploads/images/ricette/' ~ recipeRelated.image) | imagine_filter('size_550_425') }}" alt="{{ recipeRelated.title }}">
  225.                                                 </a>
  226.                                             </div>
  227.                                             <div class="post-details padding-20px-all">
  228.                                                 <p class="post-sup-title C(la-rioja)">
  229.                                                     <strong>
  230.                                                         {{ ('recipes.filter.types.' ~ recipeRelated.type.name)|replace({' ': '_'})|trans({}, 'pages')|upper }}
  231.                                                     </strong>
  232.                                                 </p>
  233.                                                 <a href="{{ path('app_recipes_detail', {'slug': recipeRelated.slug} ) }}" class="post-title w-100 d-block lg-w-100 margin-15px-bottom C(jewel)">
  234.                                                     <strong>
  235.                                                         {{ recipeRelated.title|upper }}
  236.                                                     </strong>
  237.                                                 </a>
  238.                                                 <div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div>
  239.                                                 <div class="d-flex">
  240.                                                     <div class="d-flex align-items-center margin-20px-right">
  241.                                                         <div class="border-radius-50 d-flex margin-5px-right padding-5px-all text-white w-35px Bgc(la-rioja) H(35px)">
  242.                                                             {% include 'partials/svg/_icon_chef.svg.twig' %}
  243.                                                         </div>
  244.                                                         <span>
  245.                                                             {{ ('recipes.filter.difficulty.' ~ recipeRelated.difficulty)|replace({' ': '_'})|trans({}, 'pages') }}
  246.                                                         </span>
  247.                                                     </div>
  248.                                                     <div class="d-flex align-items-center">
  249.                                                         <div class="border-radius-50 d-flex margin-5px-right padding-5px-all text-white w-35px Bgc(la-rioja) H(35px)">
  250.                                                             {% include 'partials/svg/_icon_clock_time.svg.twig' %}
  251.                                                         </div>
  252.                                                         <span>
  253.                                                             {{ recipeRelated.time ~ ' ' ~ 'recipes.filter.time.default_value'|trans({}, 'pages')|lower }}
  254.                                                         </span>
  255.                                                     </div>
  256.                                                 </div>
  257.                                             </div>
  258.                                         </div>
  259.                                     </div>
  260.                                 {% endfor %}
  261.                             </div>
  262.                             <div class="swiper-pagination-recipes swiper-pagination"></div>
  263.                         </div>
  264.                     </div>
  265.                 </div>
  266.             </div>
  267.         </section>
  268.     {% endif %}
  270. {% endblock %}