TPL files : Can we ajust a value depending on screen size ?

[leo46]

Hello everybody.

 

I know the @media function in CSS, but i would like to know if there is anyway to use different value depending on the screen size of the user, in the TPL file only ?

Let me explain :

My subcategories image are displayed on one line. If the screen is 1280px wide, 6 image can be displayed on one line.
Then below there is a button "see more" to display the rest, attached to a JS function. Here the code :

{assign var=countcat value=$subcategories|@count}
			{if $countcat > 6}
				<div id="seemore">See more <img alt="{l s='See more'}" src="{$img_dir}more16.png" /></div>
				<div id="seeless">See less <img alt="{l s='See less'}" src="{$img_dir}less16.png" /></div>
			{/if}

But if the display is wider, let's say 1920, i can display 10 pictures instead of 6.

How can i say :

If media_screen < 1280px:
then if $countcat > 6
....

elseif media_screen > 1280px :
then if $countcat > 10

Thank you

Edited August 12, 2016 by leo46 (see edit history)

[leo46]

The only solution i found today was putting several times the same div in the html, but with different class, and then use the css to display or not each class depending on the media screen.

But this is kind of heavy :

{if $countcat > 10}
				<div id="seeplus" class="large_see">{l s='see more'} <img alt="{l s='see more'}" src="{$img_dir}more16.png" /></div>
				<div id="See less" class="large_see">{l s='See less'} <img alt="{l s='See less'}" src="{$img_dir}less16.png" /></div>
				<div id="seeplus" class="medium_see">{l s='see more'} <img alt="{l s='see more'}" src="{$img_dir}more16.png" /></div>
				<div id="See less" class="medium_see">{l s='See less'} <img alt="{l s='See less'}" src="{$img_dir}less16.png" /></div>
				<div id="seeplus" class="small_see">{l s='see more'} <img alt="{l s='see more'}" src="{$img_dir}more16.png" /></div>
				<div id="See less" class="small_see">{l s='See less'} <img alt="{l s='See less'}" src="{$img_dir}less16.png" /></div>
			{elseif $countcat > 6}
				<div id="seeplus" class="medium_see">{l s='see more'} <img alt="{l s='see more'}" src="{$img_dir}more16.png" /></div>
				<div id="See less" class="medium_see">{l s='See less'} <img alt="{l s='See less'}" src="{$img_dir}less16.png" /></div>
				<div id="seeplus" class="small_see">{l s='see more'} <img alt="{l s='see more'}" src="{$img_dir}more16.png" /></div>
				<div id="See less" class="small_see">{l s='See less'} <img alt="{l s='See less'}" src="{$img_dir}less16.png" /></div>
			{elseif $countcat > 5}
				<div id="seeplus" class="small_see">{l s='see more'} <img alt="{l s='see more'}" src="{$img_dir}more16.png" /></div>
				<div id="See less" class="small_see">{l s='See less'} <img alt="{l s='See less'}" src="{$img_dir}less16.png" /></div>
			{/if}

And CSS :

@media (max-width: 767px) {
  .large_see{display:none;}
  .small_see{display:none;}
  .medium_see{display:none;}
}
@media (min-width: 768px) and (max-width: 992px) {
  .large_see{display:none;}
  .medium_see{display:none;}
}
@media (min-width: 992px) and (max-width: 1199px) {
  .large_see{display:none;}
  .small_see{display:none;}
}
@media (min-width: 1200px) and (max-width: 1598px) {
  .large_see{display:none;}
  .small_see{display:none;}
}
@media (min-width: 1599px) {
	.medium_see{display:none;}
	.small_see{display:none;}
}

[Krystian Podemski]

No, it's not possible. If you need to do that you're doing something wrong.