Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

All other Modules

Discuss all other Modules here.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Editing layout on Image_Gallery module


Reply

3 Posts   1512 Views

Avatar
sysyphus

11 May 2009 at 11:41am Community Member, 20 Posts

Hi I am working on the Image Gallery module on the following site: http://kidscostumes.co.nz/costumes/ I've edited it a wee bit to remove tops links to the various galleries. What I would like to do now is to have the gallery thumbnails to appear in two columns going down the page rather than one single column.

I'm fairly new to silverstripe and only have a basic working knowledge of php so any help would be appreciated

Avatar
divining

31 May 2009 at 2:40am (Last edited: 31 May 2009 2:40am), Community Member, 3 Posts

I will let you know as soon as I have finished with it myself, currently working on it. :)

Avatar
UncleCheese

31 May 2009 at 3:11pm (Last edited: 31 May 2009 3:13pm), 4085 Posts

Putting dynamic content into columns is a little prohibitive on the web because you need to have a way of closing the column in the middle of a loop. In the case of the gallery, you'll need to set your template up with a hard coded value of how many images go into each column. The downside is you'll have to make sure the images per page always remains the same in the CMS.

First, you never alter the code of the module, so when updates come out you don't have to overwrite anything. So take image_gallery/templates/Layout/ImageGalleryPage_album.ss and copy the contents into /mysite/templates/Layout/ImageGalleryPage_album.ss. Run a ?flush=1 and the template is now yours to customize. Any template in your mysite or theme directory will always override its core counterpart.

Let's assume you have images per page set to 10 in the CMS and you want two columns. The gallery items are displayed in a UL by default, which cannot be divided into columns because its only allowed children are LI tags, so you'll have to use two separate ULs.
<ul class="left">
<% control GalleryImages %>
<li>...</li>
<% if Pos = 5 %></ul><ul class="right"><% end_if %>
<% end_control %>
</ul>

As you see, we check for when the loop has executed 5 times and close the first list and begin the next.

You can handle the markup any way you want, but that's the basic idea for the control.