XF 2.0 Template conditionals

[AndreaMarucci]

I'd need some help with template conditionals since I've made some mod in a template under the postbit that show an image based on post count, but I'd need that the image is shown only in desktop and not in mobile.

Searched but I've not found any reference.

Can someone help me?

 

[Russ]

No conditional for mobile vs desktop.

You'll need to just hide it using media queries.

@media (max-width: @xf-messageSingleColumnWidth) { .customPostCount { display: none; } }

Single Column Width is when the message collapses into a horizontal area. You can check Page Setup for other XF media query breaking points.

 

[AndreaMarucci]

Thanks Russ, sorry for asking but I've a code like this so how can I integrate your code with this one correctly?

<xf:if is="$user.message_count >= 5000">
                        <br>
                        <div align="center"><img src="styles/default/xenforo/ranks/11masterchiefpettyofficerofnavy.png"></div>
                         <xf:elseif is="$user.message_count >= 4000"/>
                        <br>
                         <div align="center"><img src="styles/default/xenforo/ranks/10fleetmasterpettyofficer.png"></div>
                        <xf:elseif is ="$user.message_count >= 3000"/>
                         <br>
                        <div align="center"><img src="styles/default/xenforo/ranks/09commandmasterchiefpettyofficer.png"></div>
                        <xf:elseif is ="$user.message_count >= 2000"/>
                         <br>
                        <div align="center"><img src="styles/default/xenforo/ranks/08masterchiefpettyofficer.png"></div>   
                        <xf:elseif is ="$user.message_count >= 1000"/>
                         <br>
                        <div align="center"><img src="styles/default/xenforo/ranks/07seniorchiefpettyofficer.png"></div>
                        <xf:elseif is ="$user.message_count >= 500"/>
                         <br>
                        <div align="center"><img src="styles/default/xenforo/ranks/06chiefpettyofficer.png"></div>   
                        <xf:elseif is ="$user.message_count >= 250"/>
                         <br>
                        <div align="center"><img src="styles/default/xenforo/ranks/05pettyofficerfirstclass.png"></div>
                        <xf:elseif is ="$user.message_count >= 100"/>
                         <br>
                        <div align="center"><img src="styles/default/xenforo/ranks/04pettyofficersecondclass.png"></div>
                        <xf:elseif is ="$user.message_count >= 50"/>
                         <br>
                        <div align="center"><img src="styles/default/xenforo/ranks/03pettyofficerthirdclass.png"></div>   
                        <xf:elseif is ="$user.message_count >= 10"/>
                         <br>
                        <div align="center"><img src="styles/default/xenforo/ranks/02seaman.png"></div>
                        <xf:elseif is ="$user.message_count >= 5"/>
                         <br>
                        <div align="center"><img src="styles/default/xenforo/ranks/01seamanapprentice.png"></div>   
                    </xf:if>

 

[Steve F]

Add a class to your images such as this:

<div class="rank-image" align="center">

Then as Russ said but with the new class:

@media (max-width: @xf-messageSingleColumnWidth) { .rank-image { display: none; } }

 

[AndreaMarucci]

Tank you all very very much!!!

 

[AndreaMarucci]

Tried and it works like a charm. Thanks again for the support!