Fancy Class Lists
Posted 01/21/22 by Dan VisToday I was asked how to fancy up my members.classes page to show pictures and more, as desired. I decided to share my answer here as it may be help to others. It's also a good example of how templates work in BoltWire.
The easiest way to do this is to have graphics the same name as the class, or at least have some sort of system you can use to specify the image in your template. So here's one easy way to do it:
Go to members.classes and find these lines down at the bottom:
!!Current Classes
[(search group=class fmt='[[offer.{+p2}|+]]' none='//No classes found...//' type=-header,footer,side)]
[(search group=class fmt='[[offer.{+p2}|+]]' none='//No classes found...//' type=-header,footer,side)]
See the parameter that says "fmt". That means format. And it controls how each link is displayed. Basically we're "searching" for all pages in the group "class", that is, beginning with class, like class.gardening, class.exercise). We're skipping the zone pages (header,footer,side), and have a "none" message in case no pages are found. Make sense?
So to change the fmt parameter to give an image:
fmt='[[offer.{+p2}|img:{+p2}.jpg]]
That assumes the image name is the same as the class name ({+p2} means the second part of the page name).
But you can make the display as fancy and complicated as you like. I use templates (which has more options than fmt) using code like this:
[(search group=class template='classlist' none='//No classes found...//' type=-header,footer,side)]
/*
[[#classlist]]
[(template first)][t]
[(template each)][r top][c][[offer.{+p2}|[^{offer.{+p2}}:image} width=300px^]]]
[if mobile][r][c][else][c] [c][if]
!! [[offer.{+p2}|+]]
<(source offer.{+p2}:description)>
[(template last)][t]
[[#end]]
*/
/*
[[#classlist]]
[(template first)][t]
[(template each)][r top][c][[offer.{+p2}|[^{offer.{+p2}}:image} width=300px^]]]
[if mobile][r][c][else][c] [c][if]
!! [[offer.{+p2}|+]]
<(source offer.{+p2}:description)>
[(template last)][t]
[[#end]]
*/
This is much more complicated, but let me see if I can explain it. First, I wrap the whole template in commenting markup, so it doesn't display on the page. This template itself opens and closes with table tag. Each entry is a row with a picture cell, and a description cell. On mobile devices, I put the description on the next row so it is below the picture, so it fits on the screen. For the image, I go to my offer page, and get the image from an "image" data var. That allows me to use any image I want for the offer page. And change it as needed. I just have to set it in the offer page. That's also where I keep the description for each class--in a data var called description.
I also force the image to a width of 300px, so I don't have to worry about having multiple versions of the same image at different sizes.
So when the page is loaded, BoltWire goes running around to each offer page, pulls in the information it needs, and generates a handy display...
Note, I also use the image variable in my offer headers--and there it is full size. So as they go through the signup process, they always see a nice big image at the top of the page. That's pretty easy too. You could just do something like this on offer.header
[if set "{offer.{p2}:image}"][^{offer.{p2}:image} width=600px^]
[if]
[if]
Basically, it checks to see if an image data value is set, and if it is, displays that image at the top. If not, it shows nothing. Do it once, and it works everywhere...
Comments
 |
Posted by Kasey Norton on 09/06/20 | |
| Dan Thank you so much!!! I will try to copy what you did there when I add in a new class! | ||
|
Posted by Kasey Norton on 09/03/20 | |
| Dan Okay, I have tried and tried to get this class list page set up right but it still displays invalid link. I'm so confused! | ||
|
Posted by Kasey Norton on 09/02/20 | |
| Dan Okay, I think I understand all that. I will play with it here in a bit and see what happens. Thank you! | ||
|
Posted by Kasey Norton on 09/02/20 | |
| Dan I have tried this and it's just showing "invalid file name" rather than a picture. Obviously, I did something wrong 😂 | ||
Join Us
To read more posts, or to leave a comment, join our FREE community...JOIN NOW