BoltWire

Fancy Class Lists

Posted 07/03/22 by Dan Vis

Today 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)]

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]]
*/


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]

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 Dan Vis on 09/06/20
No problem Kasey, it will get easier with time. In two weeks or so I'm going to talk about how to setup processes and audits to ensure high quality content on your site... That will make all these things you are learning much much easier.
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 Dan Vis on 09/04/20
Well, the image you set on the offer page has to be one you have in your files folder!

For example, on offer.hebrews, you have your image set to hebrews.jpg, but you don't have an image with that name in your files folder. You do have hebrewssm.jpg, and you have offer.hebrews.jpg--but neither of those match. So your option is to either reset the image data variable to one of your existing image, or rename one of those images to match the data value. Make sense?

Same thing on ltps.

I assumed your offer.hebrews.jpg was supposed to be the right image so renamed it. Nice to see the file manager works just fine. Both picture are showing up now.

As for Philemon, there is no offer page at all, much less an image--so I changed the search function to exclude classes that don't have an offer page. If you want to exclude other classes, such as classes you are working on, ask me and I can tell you how. It's easy.

Last I made a few tweaks to the template so it displays slightly better. You had a lot of text and your skin has very large headers so the two table cells looked lopsided. I just move the header up over the image and text so it displays properly.

I made some other observations about your site, I'll send you by direct message...
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 Dan Vis on 09/02/20
Ok, let me know if it doesn't fix things up for you...
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 Dan Vis on 09/02/20
Kasey, that's because you haven't set the image value as a data variable in your offer page.

Take a look at this line in the display template:

[^{offer.}:image} width=300px^]

Basically, your search is finding all your class pages: class.hebrews, class.philemon, etc. And then running each one through the template to generate a display.

The means insert the second part of the page name, ie: hebrews, ltps, etc. So each template is going to look like this with that part inserted.

[^{offer.hebrews:image} width=300px^]

So now this part {offer.hebrews:image} means retrieve the data variable "image" from page "offer.hebrews". So go to that page (offer.hebrews), create an "image" field, and insert the name of the image (hebrews.jpg or whatever).

If you don't have a data variable set, then the data var will return a blank, making the template look like this:

[^ width=300px^]

When BoltWire sees that, it gives a message that there's a problem with your link.

Remember you have to do this for each class! So whenever you create a new class, as part of that process, you need to always remember to set the image on the offer page. Other than this, it should work great!
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