templates/includes/blocks/instagramSection.html.twig line 1

Open in your IDE?
  1. <section class="instagram-section overflow-hidden"
  2.   section-shade="light">
  4.   <div class="lg:hidden p-8 border-t border-gray"
  5.     fade
  6.     fade-trigger="scroll">
  7.     <a class="flex justify-between items-center text-[2rem] text-blue font-extrabold"
  8.       href="{{ content.InstagramAccountUrl }}"
  9.       target="blank">
  10.       <span>#{{ content.InstagramAccountName }}</span>
  12.       <svg class="w-6 h-6">
  13.         <use xlink:href="#instagram"></use>
  14.       </svg>
  15.     </a>
  16.   </div>
  17.   {% set posts = [
  18.   {
  19.   'img': './assets/oaks-lane/home/insta-1.webp',
  20.   'title': 'Oaks Lane Instagram',
  21.   'href': '#'
  22.   }, {
  23.   'img': './assets/oaks-lane/home/insta-2.webp',
  24.   'title': 'Oaks Lane Instagram',
  25.   'href': '#'
  26.   }, {
  27.   'img': './assets/oaks-lane/home/insta-3.webp',
  28.   'title': 'Oaks Lane Instagram',
  29.   'href': '#'
  30.   }, {
  31.   'img': './assets/oaks-lane/home/insta-4.webp',
  32.   'title': 'Oaks Lane Instagram',
  33.   'href': '#'
  34.   }, {
  35.   'img': './assets/oaks-lane/home/insta-5.webp',
  36.   'title': 'Oaks Lane Instagram',
  37.   'href': '#'
  38.   }, {
  39.   'img': './assets/oaks-lane/home/insta-6.webp',
  40.   'title': 'Oaks Lane Instagram',
  41.   'href': '#'
  42.   }
  43.   ]
  44.   %}
  46.   <div
  47.     class="relative grid grid-cols-3 divide-x divide-gray border-t border-gray w-[180vw] lg:w-full left-1/2 lg:left-0 -translate-x-1/2 lg:translate-x-0">
  48.     {% set n = 0 %}
  50.     {% for post in medias.data %}
  52.     {% if n <= 5 %}
  54.     <div class="instagram-post relative aspect-[1.28_/_1] p-6 md:p-8 xl:p-12 border-b border-gray">
  55.       <div class="relative w-full h-full overflow-hidden group">
  56.         {# Image size 570*450 #}
  57.         <img class="object-cover w-full h-full scale-[1.4] opacity-0"
  58.           src="{{post.media_url}}"
  59.           target="_blank"
  60.           alt="okas"
  61.           loading="lazy">
  62.         <div
  63.           class="absolute inset-0 flex items-center justify-center bg-blue/40 opacity-0 group-hover:opacity-100 duration-500 ease-basic-ease">
  64.           <a class="absolute inset-0 z-10 text-[0px]"
  65.             href="{{post.media_url}}" target="_blank">okas</a>
  66.           <div class="w-4 h-4 text-white overflow-hidden">
  67.             <svg
  68.               class="w-full h-full translate-y-full group-hover:translate-y-0 delay-200 duration-500 ease-basic-ease">
  69.               <use xlink:href="#instagram"></use>
  70.             </svg>
  71.           </div>
  72.         </div>
  73.       </div>
  74.     </div>
  75.     {% set n = n + 1 %}
  77.     {% endif %}
  80.     {% endfor %}
  81.   </div>
  82. </section>