-1

Wanted to do the following, I have 2 settings made for a slider on my website.

But I wanted one for mobile and one for desktop, however I thought the following (I'm an amateur developer, sorry if I have a lot of errors) I will use the {% if %} to distinguish the sizes.

When I did it at first, already loading the page at the defined size, it showed me the right banner, but then I went to reload the page with the screen already maximized, it was the same banner, I made some changes and the same thing, then I realized that the mobile does not rotate the images, but fixed, but which you can change.

But anyway, my question is, how do I use {% if width > 375px %} in my .tpl?

Code:

{% if width > 375 %}
                    {% for slide in settings.slider %}
                        <div class="swiper-slide slide-container">
                            {% if slide.link %}
                                <a href="{{ slide.link }}" aria-label="{{ 'Carrusel' | translate }} {{ loop.index }}" title="{{ slide.title }}">
                            {% endif %} 
                            {% set has_text =  slide.title or slide.description or slide.button %}
                            <div class="slider-slide">

                                <img {% if loop.first %}src="{{ slide.image | static_url | settings_image_url('1080p') }}" class="slider-image"{% else %}src="{{ slide.image | static_url | settings_image_url('tiny') }}" data-src="{{ slide.image | static_url | settings_image_url('1080p') }}" class="slider-image swiper-lazy blur-up-huge"{% endif %} alt="{{ slide.description }}">
                            </div>
                            {% if slide.link %}
                                </a>
                            {% endif %}
                        </div>
                    {% endfor %}
                {% else %}
                    {% for slide in settings.slider_mobile %}
                        <div class="swiper-slide slide-container">
                            {% if slide.link %}
                                <a href="{{ slide.link }}" aria-label="Banner Rotativo Mobile {{ loop.index }}" title="{{ slide.title }}">
                            {% endif %} 
                            {% set has_text =  slide.title or slide.description or slide.button %}
                            <div class="slider-slide">

                                <img {% if loop.first %}src="{{ slide.image | static_url | settings_image_url('1080p') }}" class="slider-image"{% else %}src="{{ slide.image | static_url | settings_image_url('tiny') }}" data-src="{{ slide.image | static_url | settings_image_url('1080p') }}" class="slider-image swiper-lazy blur-up-huge"{% endif %} alt="{{ slide.description }}">
                            </div>
                            {% if slide.link %}
                                </a>
                            {% endif %}
                        </div>
                    {% endfor %}
                {% endif %}
Christiano Bourguignon
  • 19
  • 2
  • PHP and tpl is executed on the server, before the HTML is delivered to the browser. In fact PHP does not even know whether what it is sending the HTML back to is definitely a browser, or some other type of program. Therefore it cannot know the screen resolution. It also cannot react when the page is already delivered to the browser and the user decides to change the window size or rotate the screen. CSS media queries have been the solution to responsive design for many years now, because it runs in the browser. Write your html cleverly and you won't need to repeat much of it. – ADyson Jul 16 '21 at 21:34

1 Answers1

1

You cannot do that in your tpl because the tpl is parsed at the server side and the server does not necessarily have the client's screen size. You need to use css to do that, have a look at: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries or use any css framework like bootstrap that helps you do that.

Hisham
  • 411
  • 3
  • 9
  • I even did this, but performance dropped drastically, using tpl the browser would pull only the necessary information, not making requests that won't be used which is in the case of using @media queries and display queries: none; – Christiano Bourguignon Jul 16 '21 at 19:24