Hi,

Unfortunately I am unable to simply test this out due to the IT environment I am working in, so apologies for just coming out with a question rather than a 'problem'. I have searched for answers but can't find any.

I am using bootstrap and couch to create a series of announcements on a home page. A clonable template page 'announcements' creates title, body, and link for the bootstrap card. I am then using cms:master page='announcements' to call these, and I have set a limit='12'.

The layout, using bootstrap, organises these cards into a number of columns, which are responsive to screen size (working entirely with vanilla bootstrap breakpoints etc.)

This is fine until we get down to one column (am breakpoint) at which point 12 cards is just too many imo.

Will the following code work??

Code: Select all

<cms:if screen.width gt '576'><cms:master page='announcements.php' limit='12'><cms:else><cms:master page='announcements.php' limit='6'></cms:if>

Can CMS even use that value in the if query? Do I need to somehow set a variable elsewhere on the page for CMS to query? Do I need the "px" in after the "576"??

Again, apologies that I haven't been able to simply test this for myself as I normally would, but hopefully it's an easy question to answer? Whatever the answer, perhaps a small section could be added to the CouchCMS documentation for the 'if' tag to explain how complicated a logic statement we can use?

Thanks in advance!

Anthony

[trendoman]

https://css-tricks.com/forums/topic/hid ... -practice/

Thanks for the link. However, given the lack of any further comment on your part, I am not quite sure what you are suggesting with it.

If you are suggesting that it is bad practice to hide content on mobile devices, then perhaps you have misunderstood what I am attempting to achieve. In my case, on all devices, the number of announcements is being limited (there will, over time, be a large number of announcements and they are likely to be time-sensitive) so that the landing page will only display the 12 most recent. I have already included an option to 'pin' certain announcements so that they will not disappear from the landing page (i.e. they appear first, and ignore the limit). I have also included a link from the landing page to the announcements page, where all announcements are shown in date order.

It is only on the landing page (where there is also content underneath the announcements) that I want to limit the number of items, and in particular to limit it to even fewer when on mobile (since a column of 12 bootstrap cards will take a lot of scrolling to get to the content underneath!!)

Sorry if I didn't adequately plead my case for wanting to achieve this outcome, but the link you provided does not in any way answer my question.

Any help anyone can provide would be most gratefully received.

[KK]

@AnthonyW90, I'll try to answer the specific questions you posed -

Can CMS even use that value in the if query? Do I need to somehow set a variable elsewhere on the page for CMS to query? Do I need the "px" in after the "576"??

You are mixing up two processes that are literally geographically far apart - all <cms:xyz> Couch tags execute 'server side' using PHP while the 'screen.width' part that you mentioned can only be done 'client-side' (using JavaScript).

That is to say, there is no way for Couch (or PHP) running server-side to figure out the screen resolution of the client-side - at least not directly.
Indirectly, there are workarounds (that you can google) that involve the use of JS to explicitly provide the client screen resolution to the server which then can respond appropriately.

So, to answer your query, can Couch use that value in its query and return the reduced set of pages? Yes, of course. Provided it has access to that value (i.e. screen resolution).

It does not have this natively so you'll have to put together a hack that will use JS to sniff the screen resolution and, if it is small enough, call Couch again with this info (usually as a querystring parameter). Upon getting this request, Couch can use a new value for the 'limit' parameter and output fewer records.

Hope the answer helps.

Thank you KK

Of course, playing with bootstrap I had got quite carried away with the ease with which complicated styles could be called up using relatively simple tags - I had completely lost sight of the fact that the CMS is server side!

I may play around with some script to call one of two possible 'embeds' and then have two separate PHP files, one which calls 12 cloned pages and one which calls 6. That may be easiest.

Thanks again

Anthony