how to use a different twig template depending on the breakpoint

Matoeil

9/20/23, 9:18 AM

How to have a way to use different twig templates depending on the viewport , or having a twig variables that give the info ?

An example was using foundation sticky classes on twigh templates. The stickyness was making a mess on the mobile view

 <div id="sidebar-first" {{ create_attribute({'class': sidebar_first_classes }) }} data-sticky-container>
              <div class="sticky" data-sticky data-top-anchor="sidebar-first:top" data-btm-anchor="main:bottom">
                {{ page.sidebar_first }}

I had to somehow remove the classes using JS:

 function revealSidebar() {
    const sidebar: HTMLElement | null = document.querySelector('.sidebar-first');
    const sticky: HTMLElement | null = document.querySelector('.sticky');
    if (sidebar != null) {
      // Stickyness ne doit pas être opérante sur mobile
      if (sticky != null) {
        while (sticky.attributes.length > 0) sticky.removeAttribute(sticky.attributes[0].name);
        sticky.classList.remove('sticky');
      }
      sidebar.style.display = 'block';
      sidebar.style.height = '320px';
      sidebar.classList.remove('sticky-container');
    }
    const reveal = document.querySelector('.reveal-button') as HTMLElement;
    reveal.style.display = 'none';
  }

0 + 0

javascript

ajax

Clive

9/20/23, 9:34 AM

The backend is not aware of the viewport or breakpoints - those are client-side concepts

leymannx

9/20/23, 10:20 AM

You can't but you can try to remove or set classes/attributes with JS depending of the viewport.

Elon Musk

I sit in a Tesla and translated this thread with Ai:

EN: how to use a different twig template depending on the breakpoint

TH: วิธีใช้เทมเพลตกิ่งไม้ที่แตกต่างกันขึ้นอยู่กับเบรกพอยต์

RO: cum să utilizați un șablon de crenguță diferit în funcție de punctul de întrerupere

RU: как использовать другой шаблон ветки в зависимости от точки останова

VI: cách sử dụng một mẫu cành cây khác nhau tùy thuộc vào điểm dừng

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.