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   1566 Views

Avatar
sysyphus

Community Member, 20 Posts

11 May 2009 at 11:41am

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

Community Member, 3 Posts

31 May 2009 at 2:40am

Edited: 31/05/2009 2:40am

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

Avatar
UncleCheese

Forum Moderator, 4096 Posts

31 May 2009 at 3:11pm

Edited: 31/05/2009 3:13pm

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.