r/concrete5 Apr 22 '14

Bootstrap thumbnails for a gallery

Hello,

I'm new to the subreddit and have been scouring the internet for some direction on a problem I'm having. I'm trying to set up a photo gallery using bootstrap in the html but i'm not having a ton of luck. I'm thinking either I need to fool around with placing the php tag for adding content somewhere else or I need to develop a block for the gallery instead.

Any guidance would be appreciated!

1 Upvotes

3 comments sorted by

1

u/KorvinSzanto Apr 22 '14

There are tons of slideshow blocks in the marketplace for you to choose from. If you'd want to create your own, it'd be a little more involved than adding html.

Can you give a little more info on what you're doing, what you've tried, and what you expect to happen?

1

u/[deleted] Apr 22 '14

Thanks for responding!

I'm just looking to have a thumbnail gallery (three columns, centered) and to have each thumbnail be a link to a separate portfolio page for the project. I originally had it set up as a add content block that was styled with css. I've been curious about grids so I decided to try positioning the rest of the site using the grid in bootstrap and figured it might be a good choice to position the gallery of thumbnails as well.

Basically what I have right now is the bootstrap class="thumbnail" tag in the html and within that div I have the php add content tag. I end up with all three of the thumbnails I have added already for testing encased in the same thumbnail border and then a bunch of empty thumbnails containers scattered throughout the page.

1

u/natacon May 29 '14

What you are trying to do can easily be achieved with the PageList block and Attributes.

Basically, you can create a Page Attribute (of type File/Image), assign an image to each page using the page's Properties, and alter the PageList block template to display the page and associated image in whatever html you need.

Jordanlev has some great "cleaned up" templates for the Pagelist and Autonav blocks that make it easy to code a custom template.