templates/articles/experiences.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  2. {# extension.excerpt #}
  3. {% block style %}
  4.     {{ parent() }}
  5.     {% include "css/article-critical-css.html.twig" %}
  6.     {% include "pages/headers/encore-entry-css-files.html.twig" with {file: 'articles_css'} %}
  7.     {% include "pages/headers/encore-entry-css-files.html.twig" with {file: 'sns_icons_css'} %}
  8.     {% include "pages/headers/encore-entry-css-files.html.twig" with {file: 'frame_css'} %}
  9.     {% include "pages/headers/encore-entry-css-files.html.twig" with {file: 'freetext_css'} %}
  10.     {% if content.adresse is defined and content.adresse is not empty %}
  11.         {% include "pages/headers/encore-entry-css-files.html.twig" with {file: 'map_css'} %}
  12.     {% endif %}
  13.     {% if content.main_content is defined and content.main_content is not empty and content.main_content|length > 0 %}
  14.         {% for data in content.main_content %}
  15.             {% set block = data %}
  16.             {% if data.type == "youtube" %}
  17.                 {% include "pages/headers/encore-entry-css-files.html.twig" with {file: 'youtube_css'} %}
  18.             {% endif %}
  19.             {% if data.type == "linked_with" or data.type == "see_more" %}
  20.                 {% include "pages/headers/encore-entry-css-files.html.twig" with {file: 'splide_css'} %}
  21.                 {% include "pages/headers/encore-entry-css-files.html.twig" with {file: 'previews_css'} %}
  22.                 {% include "pages/headers/encore-entry-css-files.html.twig" with {file: 'preview_thematique_css'} %}
  23.             {% endif %}
  24.             {% if data.type == "citation" %}
  25.                 {% include "pages/headers/encore-entry-css-files.html.twig" with {file: 'citation_css'} %}
  26.             {% endif %}
  27.             {% if data.type == "iframe" %}
  28.                 {% include "blocks/iframe.html.twig" with {block: data} %}
  29.             {% endif %}
  30.         {% endfor %}
  31.     {% endif %}
  32. {% endblock %}
  33. {% block content %}
  34.     {% set values = "" %}
  35.     {% set values = ['Acteurs & territoires', 'Expériences'] %}
  36.     {% include "articles-blocks/breadcrumb.html.twig" with {titles : values} %}
  37.     <div class="main-container w100 plr-1em single-article-container">
  38.         <article>
  39.             {% if content.old_format %}
  40.                 <div class="{% if content.header_img is defined and content.header_img is not empty %}main-title{% else %}small-main-title{% endif %} br8 dflex aic jcc">
  41.                     {% if content.header_img is defined and content.header_img is not empty %}
  42.                         <img loading="lazy" src="{{ content.header_img.formats['1000x.webp'] }}" srcset="{{ content.header_img.formats['300x.webp'] }} 300w, {{ content.header_img.formats['600x.webp'] }} 600w, {{ content.header_img.formats['1000x.webp'] }} 1000w" sizes="1000px" alt="{{ content.header_img | copyright_or_description_or_title }}" width="{{ content.header_img.fileVersion.properties.width }}" height="{{ content.header_img.fileVersion.properties.height }}">
  43.                     {% endif %}
  44.                     <div class="zi1 prelative team-project-head dflex jcc aic fdc">
  45.                         <div class="center">
  46.                             <h1 class="{% if content.header_img is defined and content.header_img is not empty %}cwhite{% else %}cblue{% endif %}">{{ content.title }}</h1>
  47.                         </div>
  48.                     </div>
  49.                     {% if content.header_img is defined and content.header_img is not empty %}
  50.                         <div class="background-color-blue"></div>
  51.                     {% endif %}
  52.                 </div>
  53.                 {% if content.header_img is defined and content.header_img is not empty %}
  54.                     {% if content.header_img.credits and content.header_img.credits is not empty %}
  55.                         <div class="cgrey fs12 lh16 credit mt-8px">&copy; Crédit Photo
  56.                             {{ content.header_img.credits }}</div>
  57.                     {% endif %}
  58.                 {% endif %}
  59.                 {% include "articles/blocks/article-under-header.html.twig" %}
  60.                 {% if content.departement is defined and content.departement is not empty %}
  61.                     <div class="dflex fwwrap">
  62.                         <div class="departement-tag cwhite fw600 departement-exp mb-2em mt-40px">{{ content.departement }}</div>
  63.                     </div>
  64.                 {% endif %}
  65.                 {% if content.desc is defined and content.desc is not empty %}
  66.                     <div class="actualites-PQNA mb-16px fs20 lh28 f500 cgrey">
  67.                         {{ content.desc|raw }}
  68.                     </div>
  69.                 {% endif %}
  70.                 <div class="mb-2em dflex w100">
  71.                     {% if extension.excerpt.categories is defined and extension.excerpt.categories is not empty %}
  72.                         <div class="small-thematique-container">
  73.                             {% set categories = extension.excerpt.categories %}
  74.                             {% include "blocks/previews-from-controller/blocks/categories.html.twig" %}
  75.                         </div>
  76.                     {% endif %}
  77.                 </div>
  78.                 <div class="structure-class">
  79.                     {% if content.societe_porteuse.name is defined and content.societe_porteuse.name  is not empty %}
  80.                         <h2 class="mb-20px structure-class-title">
  81.                             Structure Porteuse :
  82.                             {{ content.societe_porteuse.name }}
  83.                         </h2>
  84.                     {% endif %}
  85.                     {% if content.structure_img is defined and  content.structure_img is not empty %}
  86.                         <div class="br8 dflex aic jcc structure-class-image">
  87.                             <img loading="lazy" src="{{ content.structure_img.formats['1000x.webp'] }}" srcset="{{ content.structure_img.formats['300x.webp'] }} 300w, {{ content.structure_img.formats['600x.webp'] }} 600w, {{ content.structure_img.formats['1000x.webp'] }} 1000w" sizes="1000px" alt="{{ content.structure_img | copyright_or_description_or_title }}" width="{{ content.structure_img.fileVersion.properties.width }}" height="{{ content.structure_img.fileVersion.properties.height }}">
  88.                         </div>
  89.                     {% endif %}
  90.                 </div>
  91.             {% else %}
  92.                 <div class="{% if content.header_img is defined and content.header_img is not empty %}main-title{% else %}small-main-title{% endif %} br8 dflex aic jcc">
  93.                     {% if content.header_img is defined and content.header_img is not empty %}
  94.                         <img loading="lazy" src="{{ content.header_img.formats['1000x.webp'] }}" srcset="{{ content.header_img.formats['300x.webp'] }} 300w, {{ content.header_img.formats['600x.webp'] }} 600w, {{ content.header_img.formats['1000x.webp'] }} 1000w" sizes="1000px" alt="{{ content.header_img | copyright_or_description_or_title }}" width="{{ content.header_img.fileVersion.properties.width }}" height="{{ content.header_img.fileVersion.properties.height }}">
  95.                     {% endif %}
  96.                     <div class="zi1 prelative team-project-head dflex jcc aic fdc">
  97.                         <div class="center">
  98.                             <h1 class="{% if content.header_img is defined and content.header_img is not empty %}cwhite{% else %}cblue{% endif %}">{{ content.title }}</h1>
  99.                         </div>
  100.                     </div>
  101.                     {% if content.header_img is defined and content.header_img is not empty %}
  102.                         <div class="background-color-blue"></div>
  103.                     {% endif %}
  104.                 </div>
  105.                 {% if content.header_img is defined and content.header_img is not empty %}
  106.                     {% if content.header_img.credits and content.header_img.credits is not empty %}
  107.                         <div class="cgrey fs12 lh16 credit mt-8px">&copy; Crédit Photo
  108.                             {{ content.header_img.credits }}</div>
  109.                     {% endif %}
  110.                 {% endif %}
  112.                 <div class="dflex jcsb lh28 fwwrap article-datas">
  113.                     <div>
  114.                         {% if content.author_name is defined and content.author_name is not empty %}
  115.                             {% include "articles/blocks/show-simple-text-field.html.twig" with {content: content.author_name} %}
  116.                         {% else %}
  117.                             {% include "articles-blocks/contributors.html.twig" %}
  118.                         {% endif %}
  119.                         {% include "articles-blocks/publish-date.html.twig" %}
  120.                     </div>
  121.                     <div class="taright">
  122.                         {% include "articles-blocks/readtime.html.twig" %}
  123.                         {% include "articles-blocks/share-buttons.html.twig" %}
  124.                     </div>
  125.                 </div>
  126.                 <div class="mb-2em dflex w100 fwwrap aic experience-pre-header">
  127.                     {% if content.departement is defined and content.departement is not empty %}
  128.                         <div class="departement-tag cwhite fw600 departement-exp mb-2em mt-1em">
  129.                             {{ content.departement }}
  130.                         </div>
  131.                     {% endif %}
  132.                     {% if extension.excerpt.categories is defined and extension.excerpt.categories is not empty %}
  133.                         {% set categories = extension.excerpt.categories %}
  134.                         {% include "blocks/previews-from-controller/blocks/categories.html.twig" %}
  135.                     {% endif %}
  136.                 </div>
  138.                 {# display des champ post modification des expériences (voir la différence en prod et dans les maquettes figma) #}
  140.                 <div class="{% if content.header_img is defined and content.header_img is not empty %}main-title{% else %}small-main-title{% endif %} mt-40px mb-40pxaic frame-overflow mb-2em">
  141.                     <div class="jcc dflex frame-container-print">
  142.                         {% if content.header_img is defined and content.header_img is not empty %}
  143.                             <img loading="lazy" src="{{ content.header_img.formats['1000x.webp'] }}" srcset="{{ content.header_img.formats['300x.webp'] }} 300w, {{ content.header_img.formats['600x.webp'] }} 600w, {{ content.header_img.formats['1000x.webp'] }} 1000w" sizes="1000px" width="{{ content.header_img.fileVersion.properties.width }}" height="{{ content.header_img.fileVersion.properties.height }}" style="z-index: -1;">
  144.                         {% endif %}
  145.                         <div class="frame-wrap-container dflex jcse aic mt-2p5em mb-3p5em">
  146.                             <div class="first-frame p-244024  ml-2per fdc aic">
  147.                                 <h2 class="frame-title-territoire-custom corange wd100 lh28 fs20 fw500 dflex tac">Carte d'identité</h2>
  148.                                 <div class="text-flex fw400 fs16 lh24">
  149.                                     <div class="framed experience">
  150.                                         {% if content.sub_thematiques is defined and content.sub_thematiques is not empty %}
  151.                                             {% include "articles/blocks/show-simple-text-field.html.twig" with {title: "Sous-thématiques :", content: content.sub_thematiques} %}
  152.                                         {% endif %}
  153.                                         {% if content.structure is defined and content.structure is not empty %}
  154.                                             {% include "articles/blocks/show-simple-text-field.html.twig" with {title: "Structure porteuse :", content: content.structure} %}
  155.                                         {% endif %}
  156.                                         {% if content.status_juridique is defined and content.status_juridique is not empty %}
  157.                                             {% include "articles/blocks/show-simple-text-field.html.twig" with {title: "Statut juridique : ", content: content.status_juridique} %}
  158.                                         {% endif %}
  159.                                         {% if content.influence is defined and content.influence is not empty %}
  160.                                             {% include "articles/blocks/show-multiple-select-field.html.twig" with {title: "Aire d'influence :", content: content.influence} %}
  161.                                         {% endif %}
  162.                                         {% if content.date_start is defined and content.date_start is not empty %}
  163.                                             {% include "articles/blocks/show-date-field.html.twig" with {title: "Date de lancement :", content: content.date_start} %}
  164.                                         {% endif %}
  165.                                         {% if content.status is defined and content.status is not empty %}
  166.                                             {% include "articles/blocks/show-simple-text-field.html.twig" with {title: "État d'achèvement :", content: content.status} %}
  167.                                         {% endif %}
  168.                                         {% if content.cost is defined and content.cost is not empty %}
  169.                                             {% include "articles/blocks/show-cost-field.html.twig" with {title: "Coût du projet :", content: content.cost} %}
  170.                                         {% endif %}
  171.                                     </div>
  172.                                 </div>
  173.                             </div>
  174.                             <div class="middle-frame p-244024 fdc aic">
  175.                                 <h2 class="frame-title-territoire-custom corange wd100 lh28 fs20 fw500 dflex tac">La démarche en bref</h2>
  176.                                 <div class="text-flex fw400 fs16 lh24">
  177.                                     <div class="framed experience">
  178.                                         {% include "articles/blocks/show-simple-text-field.html.twig" with {classCSS: " mb-1em", content: content.desc} %}
  179.                                         {% include "articles/blocks/show-contact-info.html.twig" with {
  180.                             title: "Contact", 
  181.                             content_adresse: content.adresse, 
  182.                             content_phone: content.phone,
  183.                             content_email: content.email,
  184.                             content_link: content.link_to_resource,
  185.                             content_other_file: content.other_file,
  186.                             content_other_link: content.other_link
  187.                         } %}
  188.                                     </div>
  189.                                 </div>
  190.                             </div>
  191.                             <div class="last-frame p-244024  mr-2per fdc aic">
  192.                                 <h2 class="frame-title-territoire-custom corange wd100 lh28 fs20 fw500 dflex tac">Acteurs</h2>
  193.                                 <div class="text-flex fw400 fs16 lh24">
  194.                                     <div class="framed experience">
  195.                                         {% if content.cible is defined and content.cible is not empty %}
  196.                                             {% include "articles/blocks/show-public-cible.html.twig" with {title: "Public cible :", content: content.cible} %}
  197.                                         {% endif %}
  198.                                         {% if content.cible is defined and content.cible is not empty and content.cible|length > 0 and "Autre" in content.cible %}
  199.                                             {% include "articles/blocks/show-simple-text-field.html.twig" with {title: "Autre public cible :", content: content.cible_autre} %}
  200.                                         {% endif %}
  201.                                         {% if content.partenaires_techniques is defined and content.partenaires_techniques is not empty %}
  202.                                             {% include "articles/blocks/show-simple-text-field.html.twig" with {title: "Partenaires techniques :", content: content.partenaires_techniques} %}
  203.                                         {% endif %}
  204.                                         {% if content.partenaires_financiers is defined and content.partenaires_financiers is not empty %}
  205.                                             {% include "articles/blocks/show-simple-text-field.html.twig" with {title: "Partenaires financiers :", content: content.partenaires_financiers} %}
  206.                                         {% endif %}
  207.                                         {% if content.personne_rsc is defined and content.personne_rsc is not empty %}
  208.                                             {% include "articles/blocks/show-simple-text-field.html.twig" with {title: "Personne ressource :", content: content.personne_rsc} %}
  209.                                         {% endif %}
  210.                                         {% if content.compo_equipe is defined and content.compo_equipe is not empty %}
  211.                                             {% include "articles/blocks/show-simple-text-field.html.twig" with {title: "Composition de l'équipe rattachée au projet (élus, équipe technique, etc.) :", content: content.compo_equipe} %}
  212.                                         {% endif %}
  213.                                     </div>
  214.                                 </div>
  215.                             </div>
  216.                         </div>
  217.                     </div>
  218.                     <div class="background-color-orange"></div>
  219.                 </div>
  221.                 {% if (content.contexte is defined and content.contexte is not empty) or (content.objectif is defined and content.objectif is not empty) %}
  222.                     <div class="{% if content.header_img is defined and content.header_img is not empty %}main-title{% else %}small-main-title{% endif %} br8 mt-40px mb-40px aic frame-overflow">
  223.                         <div class="jcc dflex solution-container-print">
  224.                             <div class="frame-flex-container w100 dflex jcse mt-2p5em mb-3p5em p-1em">
  225.                                 {% if content.contexte is defined and content.contexte is not empty %}
  226.                                     <div class="frame-pics p-2440 fdc aic br6">
  227.                                         <h2 class="frame-title corange wd100 lh28 fs20 fw500 dflex tac">Contexte</h2>
  228.                                         <div class="text-flex fw400 fs16 lh24 framed">{{ content.contexte|raw }}</div>
  229.                                     </div>
  230.                                 {% endif %}
  231.                                 {% if content.objectif is defined and content.objectif %}
  232.                                     <div class="frame-pics p-2440 fdc aic br6">
  233.                                         <h2 class="frame-title corange wd100 lh28 fs20 fw500 dflex tac">Objectifs</h2>
  234.                                         <div class="text-flex fw400 fs16 lh24 framed">{{ content.objectif|raw }}</div>
  235.                                     </div>
  236.                                 {% endif %}
  237.                             </div>
  238.                         </div>
  239.                         <div class="background-color-orange"></div>
  240.                     </div>
  241.                 {% endif %}
  243.                 {% if content.mise_oeuvre is defined and content.mise_oeuvre is not empty %}
  244.                     <section class="mb-1em">
  245.                         <h3 class="fw600">Mise en œuvre des actions</h3>
  246.                         {% include "articles/blocks/show-simple-text-field.html.twig" with {content: content.mise_oeuvre} %}
  247.                     </section>
  248.                 {% endif %}
  250.                 {% if content.resultats is defined and content.resultats is not empty %}
  251.                     <section class="mb-1em">
  252.                         <h3 class="fw600">Résultats</h3>
  253.                         {% include "articles/blocks/show-simple-text-field.html.twig" with {content: content.resultats} %}
  254.                     </section>
  255.                 {% endif %}
  257.                 {% if (content.facteurs_reussite is defined and content.facteurs_reussite is not empty) or (content.freins is defined and content.freins is not empty) %}
  258.                     <div class="{% if content.header_img is defined and content.header_img is not empty %}main-title{% else %}small-main-title{% endif %} br8 mt-40px mb-40px aic frame-overflow">
  259.                         <div class="jcc dflex solution-container-print">
  260.                             <div class="frame-flex-container w100 dflex jcse mt-2p5em mb-3p5em p-1em">
  261.                                 {% if content.facteurs_reussite is defined and content.facteurs_reussite is not empty %}
  262.                                     <div class="frame-pics p-2440 fdc aic br6">
  263.                                         <h2 class="frame-title corange wd100 lh28 fs20 fw500 dflex tac">Facteurs de réussite</h2>
  264.                                         <div class="text-flex fw400 fs16 lh24 framed">{{ content.facteurs_reussite|raw }}</div>
  265.                                     </div>
  266.                                 {% endif %}
  267.                                 {% if content.freins is defined and content.freins %}
  268.                                     <div class="frame-pics p-2440 fdc aic br6">
  269.                                         <h2 class="frame-title corange wd100 lh28 fs20 fw500 dflex tac">Freins</h2>
  270.                                         <div class="text-flex fw400 fs16 lh24 framed">{{ content.freins|raw }}</div>
  271.                                     </div>
  272.                                 {% endif %}
  273.                             </div>
  274.                         </div>
  275.                         <div class="background-color-orange"></div>
  276.                     </div>
  277.                 {% endif %}
  279.                 {% if content.enseignements is defined and content.enseignements is not empty %}
  280.                     <section class="mb-1em">
  281.                         <h3 class="fw600 mb-0p5em">Enseignements</h3>
  282.                         {% include "articles/blocks/show-simple-text-field.html.twig" with {content: content.enseignements} %}
  283.                     </section>
  284.                 {% endif %}
  286.                 {% if content.perspectives is defined and content.perspectives is not empty %}
  287.                     <section class="mb-1em">
  288.                         <h3 class="fw600 mb-0p5em">Perspectives</h3>
  289.                         {% include "articles/blocks/show-simple-text-field.html.twig" with {content: content.perspectives} %}
  290.                     </section>
  291.                 {% endif %}
  293.                 {% if content.author_name is defined and content.author_name is not empty %}
  294.                     <div class="mt-20px mb-20px">
  295.                         <div class="blue-frame">
  296.                             <div class="diblock cwhite">
  297.                                 <div class="text fw400 fs16 lh24">
  298.                                     Contenu rédigé par :
  299.                                     {{ content.author_name -}}
  300.                                 </div>
  301.                             </div>
  302.                         </div>
  303.                     </div>
  304.                 {% endif %}
  305.             {% endif %}
  306.             {# fin de la nouvelle apparence des expériences #}
  308.             {% if content.adresse is defined and content.adresse is not empty %}
  309.                 {% set map = content.adresse %}
  310.                 {% set display_map = true %}
  311.             {% endif %}
  312.             {% if content.main_content is defined and content.main_content is not empty and content.main_content|length > 0 %}
  313.                 {% for data in content.main_content %}
  314.                     {% if data.type =="text" %}
  315.                         {% include "articles-blocks/freetext.html.twig" %}
  316.                     {% endif %}
  317.                     {% if data.type == "triple_frame" %}
  318.                         {% include "articles-blocks/triple-frame-block.html.twig" %}
  319.                     {% endif %}
  320.                     {% if data.type == "text_pic" %}
  321.                         {% include "blocks/text-pic.html.twig" with {block: data} %}
  322.                     {% endif %}
  323.                     {% if data.type == "citation" %}
  324.                         {% include "articles-blocks/citation.html.twig" %}
  325.                     {% endif %}
  326.                     {% if data.type == "solution_frame" %}
  327.                         {% include "blocks/block-picbkg-frame.html.twig" with {block: data} %}
  328.                     {% endif %}
  329.                     {% if data.type == "block_wrap" %}
  330.                         {% include "articles-blocks/block-wrap.html.twig" %}
  331.                     {% endif %}
  332.                     {% if data.type == "block_blue_back" %}
  333.                         {% include "articles-blocks/block-blue-background.html.twig" %}
  334.                     {% endif %}
  335.                     {% if data.type == "youtube" %}
  336.                         {% set embed_link = data.video_link|replace({'watch?v=' : 'embed/'}) %}
  337.                         {% set embed_link_splitted = embed_link|split('/') %}
  338.                         {% set videoID = embed_link_splitted|last %}
  339.                         {# <div class="youtube_player" videoid="{{ videoID }}" width="560" height="315" theme="theme light" rel="rel 1" controls="controls 1" showinfo="showinfo 1 " autoplay="autoplay 0" mute="mute 1" loop="loop 0" loading="loading 0"></div> TAC #}
  340.                         <div class="video-responsive mt-1em">
  341.                             <lite-youtube videoid="{{ videoID }}" class="br8" params="controls=1&start={{ data.timestamp }}&modestbranding=2&rel=0&enablejsapi=1"></lite-youtube>
  342.                         </div>
  343.                     {% endif %}
  345.                     {% if data.type == 'file' %}
  346.                         {% set block = data %}
  347.                         {% include "blocks/file.html.twig" %}
  348.                     {% endif %}
  349.                 {% endfor %}
  350.             {% endif %}
  351.             {% if display_map is defined and display_map is not empty %}
  352.                 <div class="map-cont">
  353.                     {% include "articles-blocks/simple-map.html.twig" %}
  354.                 </div>
  355.             {% endif %}
  356.             {% if content.main_content is defined and content.main_content is not empty and content.main_content|length > 0 %}
  357.                 {% for data in content.main_content %}
  358.                     {% if data.type == "linked_with" %}
  359.                         {% include "articles-blocks/linked-with.html.twig" %}
  360.                     {% endif %}
  361.                     {% if data.type == "see_more" %}
  362.                         {% include "articles-blocks/see-more.html.twig" %}
  363.                     {% endif %}
  364.                 {% endfor %}
  365.             {% endif %}
  366.         </article>
  367.     </div>
  368. {% endblock %}
  369. {% block javascripts %}
  370.     {% if content.adresse is defined and content.adresse is not empty %}
  371.         {{ encore_entry_script_tags('map') }}
  372.     {% endif %}
  373.     {% if content.main_content|length > 0 %}
  374.         {% for content in content.main_content %}
  375.             {% if content.type == "youtube" %}
  376.                 {{ encore_entry_script_tags('youtube_defer') }}
  377.                 {{ encore_entry_script_tags('lite-youtube') }}
  378.             {% endif %}
  379.         {% endfor %}
  380.     {% endif %}
  381.     {% include "articles/javascripts/base-article-js.html.twig" %}
  382.     {{ parent() }}
  383. {% endblock %}