This relates to cases where the ListPages module is used to list pages that are structured as data forms and include URL and file fields. These fields may have contents in some pages but may be empty in others.
I'd like ListPages to allow me to display a standardized link to the URL or file (rather than displaying the raw URLs or filenames), if these exist, but not display anything if they don't exist.
For example, in a manufacturer's website, the code below lists a directory of its vendors and their phone numbers, and for those who have them, it should display links to their websites and to their catalogs.
[[module ListPages category="vendors"]]
**%%title%%** %%form_data{phone}%% [%%form_data{link}%% Website] [%%form_data{catalog}%% Catalog (pdf)]
[[/module]]
As it is currently, it looks fine for those pages that have a URL and a link. But for vendors with either or both fields are empty, it looks bad.
You could workaround this issue using CSS, if you want a solution that will work immediately.
For example:
For the CSS you can use either the CSS module, as I have done in the example, or add it to your existing theme.
When there is no website, the CSS class associated with that span element is 'website'. Therefore, because of the CSS rule we put in place, everything between the span tags is hidden when there is no website.
If a website URL was entered, the class would be something like 'websitehttp…' instead, which means that it is not affected by the CSS rule and the link is left visible.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation
Thanks Leiger
The workaround works!
I think my request is still in place, since the workaround is ugly and non-trivial (especially for files). But the importance of the request is certainly reduced..
I respectfully disagree that the workaround is ugly. While it does require coding that might be a little tougher to read, it really does work well. I have been using this technique for quite some time to hide empty data form fields. I take a more generic approach and name my classes something easy to remember that defines their purpose and use it like leiger described on both block and inline elements. Expanding on what leiger described, if I want to display conditional content if the form field is empty, I use the technique below. I have a form that can have 0, 1 or 2 image links on the form. If both images are absent, then I display a message indicating that. I use the .showme-inline class for conditionally displaying inline elements.
CSS
Sample to conditionally display data
This code is part of my form _template page. I use this form for an equipment inventory list that can have images attached showing the piece of equipment and/or its location.
I realize that this method doesn't relate specifically to ListPages, but in both cases it's a one-time "set it and forget it" task (unless you change the form or how you want to display the data).
Also, how would propose that the syntax in ListPages would work? It seems that it could get a bit messy trying to work that out as well.
This may be a discussion better suited for the community forum.
Community Admin
And I use a variation of this to display a default image if the user has not uploaded an image to the dataform themselves.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Thanks for the additional examples.
Perhaps my implementation of it was messy, or since I'm doing this for the first and only time, the code appears messy to me. Below is how my ListPages looks like with this workaround. It works great, but the way I had to convert form_raw{pdf} to an actual link to the files wasn't a trivial task for me.