Is their template logic to output HTML based on display size?

Posted December 16, 20231 yr

I couldn't find anything in the docs, but I want to apply some different code in template logic for desktops, tablets and phones.

We can use media queries in CSS to make styling relevant for certain device screen widths and we have ipsResponsive_showPhone etc.

However, is there a utility available to do the same for HTML in IPS' template logic, perhaps a PHP expression or something?

Something like:

{{ is small-device/phone? }}
this code
{{elseif is medium-device/tablet? }}
this code
{{else}}
use this for everything else
{{endif}}

Many thanks!

December 16, 20231 yr

No, there is no equivalent you can use in IF checks. What IPS does is include the multiple HTML blocks in the page output and then show/hide them with the CSS classes:

With outputting all of them, it won't matter even if the size changes. For example, the browser's window can be resized on desktop, or you can use the web developer tools to emulate a phone/table.

Edited December 16, 20231 yr by teraßyte

December 16, 20231 yr

Author

Thanks for the confirmation, I didn't want to reinvent the wheel and assumed there would be something built-in for IPS devs to reuse. I just want to insert some code in the head to preload an image based on device screen size. I'll have a look for some JS on MSDN.