Contrib.social

Views: Rewrite output or use a template ?

Open on Drupal.org →
Created on 5 June 2023, almost 2 years ago
Updated 9 June 2023, almost 2 years ago

Hello,

I need to use a tailwind CSS carousel, and I wonder which way is better to do it.
Basically, I see 2 options. Rewrite the output of the view with the HTML markup ; or using a template to implement the same HTML markup.
This one is like this:

<div class="flex js-view-dom-id-97a4ba6c839c29d85a611ec731bd8710c2322cbf1f26cade939f0f21d6c9bb51">

    <div>

  <a class="group relative flex h-screen w-1/3 items-end justify-center overflow-hidden pb-20 transition-[width] duration-1000 hover:w-[calc(33.33%+50%)]" href="/node/11">
<img srcset="https://picsum.photos/id/237/200/300" class="absolute left-0 top-0 -z-10 h-screen object-cover" alt="Lycée Brise-Lames" title=""> 
    <div class="absolute bottom-0 left-0 z-20 w-full h-1/3 bg-gradient-to-t from-gray-800 to-transparent"></div>
    </a><h3 class="font-serif text-4xl italic text-white transition duration-1000 group-hover:-translate-y-12 z-50"><a class="group relative flex h-screen w-1/3 items-end justify-center overflow-hidden pb-20 transition-[width] duration-1000 hover:w-[calc(33.33%+50%)]" href="/node/11">
</a><a href="/node/11" hreflang="und">Lycée Brise-Lames</a>
</h3>
  
  
</div>
    <div>

  <a class="group relative flex h-screen w-1/3 items-end justify-center overflow-hidden pb-20 transition-[width] duration-1000 hover:w-[calc(33.33%+50%)]" href="/node/10">
<img srcset="https://picsum.photos/id/237/200/300" class="absolute left-0 top-0 -z-10 h-screen object-cover" alt="Lycée Le Rocher" title=""> 
    <div class="absolute bottom-0 left-0 z-20 w-full h-1/3 bg-gradient-to-t from-gray-800 to-transparent"></div>
    </a><h3 class="font-serif text-4xl italic text-white transition duration-1000 group-hover:-translate-y-12 z-50"><a class="group relative flex h-screen w-1/3 items-end justify-center overflow-hidden pb-20 transition-[width] duration-1000 hover:w-[calc(33.33%+50%)]" href="/node/10">
</a><a href="/node/10" hreflang="und">Lycée Le Rocher</a>
</h3>
  
  
</div>
    <div>

  <a class="group relative flex h-screen w-1/3 items-end justify-center overflow-hidden pb-20 transition-[width] duration-1000 hover:w-[calc(33.33%+50%)]" href="/node/9">
<img srcset="https://picsum.photos/id/339/200/300" class="absolute left-0 top-0 -z-10 h-screen object-cover" alt="Lycée Caucadis" title=""> 
    <div class="absolute bottom-0 left-0 z-20 w-full h-1/3 bg-gradient-to-t from-gray-800 to-transparent"></div>
    </a><h3 class="font-serif text-4xl italic text-white transition duration-1000 group-hover:-translate-y-12 z-50"><a class="group relative flex h-screen w-1/3 items-end justify-center overflow-hidden pb-20 transition-[width] duration-1000 hover:w-[calc(33.33%+50%)]" href="/node/9">
</a><a href="/node/9" hreflang="und">Lycée Caucadis</a>
</h3>
  
  

</div>
    <div>

  <a class="group relative flex h-screen w-1/3 items-end justify-center overflow-hidden pb-20 transition-[width] duration-1000 hover:w-[calc(33.33%+50%)]" href="/node/8">
<img srcset="https://picsum.photos/id/137/200/300" class="absolute left-0 top-0 -z-10 h-screen object-cover" alt="Lycée Célony" title=""> 
    <div class="absolute bottom-0 left-0 z-20 w-full h-1/3 bg-gradient-to-t from-gray-800 to-transparent"></div>
    </a><h3 class="font-serif text-4xl italic text-white transition duration-1000 group-hover:-translate-y-12 z-50"><a class="group relative flex h-screen w-1/3 items-end justify-center overflow-hidden pb-20 transition-[width] duration-1000 hover:w-[calc(33.33%+50%)]" href="/node/8">
</a><a href="/node/8" hreflang="und">Lycée Célony </a>
</h3>
  
  

</div>
    <div>

  <a class="group relative flex h-screen w-1/3 items-end justify-center overflow-hidden pb-20 transition-[width] duration-1000 hover:w-[calc(33.33%+50%)]" href="/node/6">
<img srcset="https://picsum.photos/id/257/200/300" class="absolute left-0 top-0 -z-10 h-screen object-cover" alt="Lycée Marie Gasquet" title=""> 
    <div class="absolute bottom-0 left-0 z-20 w-full h-1/3 bg-gradient-to-t from-gray-800 to-transparent"></div>
    </a><h3 class="font-serif text-4xl italic text-white transition duration-1000 group-hover:-translate-y-12 z-50"><a class="group relative flex h-screen w-1/3 items-end justify-center overflow-hidden pb-20 transition-[width] duration-1000 hover:w-[calc(33.33%+50%)]" href="/node/6">
</a><a href="/node/6" hreflang="und">Lycée Marie Gasquet</a>
</h3>

</div>
    <div>

  <a class="group relative flex h-screen w-1/3 items-end justify-center overflow-hidden pb-20 transition-[width] duration-1000 hover:w-[calc(33.33%+50%)]" href="/node/5">
<img srcset="https://picsum.photos/id/637/200/300" class="absolute left-0 top-0 -z-10 h-screen object-cover" alt="Lycée Edmond Rostand" title=""> 
    <div class="absolute bottom-0 left-0 z-20 w-full h-1/3 bg-gradient-to-t from-gray-800 to-transparent"></div>
    </a><h3 class="font-serif text-4xl italic text-gray-600 transition duration-1000 group-hover:-translate-y-12 z-50"><a class="group relative flex h-screen w-1/3 items-end justify-center overflow-hidden pb-20 transition-[width] duration-1000 hover:w-[calc(33.33%+50%)]" href="/node/5">
</a><a href="/node/5" hreflang="und">Lycée Edmond Rostand</a>
</h3>
  

</div>
    <div>

  <a class="group relative flex h-screen w-1/3 items-end justify-center overflow-hidden pb-20 transition-[width] duration-1000 hover:w-[calc(33.33%+50%)]" href="/node/2">
<img srcset="/sites/d9dev-pf/files/diapo-lycee/provence_formation_c_grawitz_bdef_036.jpg" class="absolute left-0 top-0 -z-10 h-screen object-cover" alt="Lycée Charlotte Grawitz alt" title="Lycée Charlotte Grawitz title"> 
    <div class="absolute bottom-0 left-0 z-20 w-full h-1/3 bg-gradient-to-t from-gray-800 to-transparent"></div>
    </a><h3 class="font-serif text-4xl italic text-white transition duration-1000 group-hover:-translate-y-12 z-50"><a class="group relative flex h-screen w-1/3 items-end justify-center overflow-hidden pb-20 transition-[width] duration-1000 hover:w-[calc(33.33%+50%)]" href="/node/2">
</a><a href="/node/2" hreflang="und">Lycée Charlotte Grawitz</a>
</h3>
</div>
</div>

In both cases I need to know how to implement navigation like TW does, and which is the right way to print the variable part (fields) . For the template option, which template type do I need to modifiy, actually I think about view's one, but not so specific because of the views-view-unformatted--caroussel-2023.html.twig. The views template more accurate seem to be: views-view-fields--caroussel-2023--block-3.html.twig
The rewrite output option seem to me more simple, but less versatile.

Thanks for yours point of view.

💬 Support request
Status

Closed: works as designed

Version

9.5

Component
Views  →

Last updated 15 minutes ago

Created by

🇫🇷France aiphes

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @aiphes
  • Comment almost 2 years ago →
    🇫🇷France aiphes
  • Status changed to Closed: works as designed almost 2 years ago
  • Comment almost 2 years ago →
    🇳🇱Netherlands Lendude Amsterdam

    As with most things Drupal, there is no 'right' way of doing it, whatever works for you is what is best.

    My personal preference would be to do it in a template. Extensive rewriting has always lead to a maintenance burden in the future. Rewrites are hard to find in the UI (there is zero indication in the Views UI that a rewrite is in effect for any field) and error prone since you will not have an IDE available to you to point out any missing tags or other errors.

    So I agree with your assessment that "The rewrite output option seem to me more simple", but in the long run, it will not be the best option in my experience.

    In short, my 2 cents: If its done in a project that will only be live for a couple of months, do the rewrite, if you need to maintain the project for years to come, go for the template

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024