Permalink 3 users found helpful
how can i add multiple images in a block.
ie: 3 images in a horizontal row

View Replies: View Best Answer
tallacman replied on at Permalink Reply
1) add three image blocks each with an image one third the width and float left.
2) group images together in photoshop and place the one resulting image in the block.
3) write a new php block that will take three images and do the work automatically.

Hope this helps.
jordanlev replied on at Permalink Reply
I think an easier way to do this is to add a "Layout" to your page. Click "Add to Main" and choose "Add Layout" from the popup menu. Enter 3 columns and 1 row. Now you have 3 slots in your page, add 1 image block to each of those slots and they will line up horizontally.
Bacarroadmin replied on at Permalink Reply
Hi where's the "Add to main" option located?
jordanlev replied on at Permalink Best Answer Reply
Welll, it may not actually be called "Add To Main". What I mean is, when you are logged in to your site, and you go to the page you want to put these images on, and you click the "Edit Page" button at the top-left of the toolbar, then you get a bunch of editable areas on the page which have red outlines around them. At the bottom of each of these red outlined areas are little grey areas with names like "Add To Main", "Add To Sidebar" -- but they may be called something else depending on your site's theme ("Add to Footer", "Add to Container", "Add to Main Content", etc.) -- it's always in the form of "Add to _____" though.

Click that, and choose "Add Layout".
Bacarroadmin replied on at Permalink Reply
Thank you!
khunbill1 replied on at Permalink Reply
I have done this [ add a "Layout" to your page. ] but, say when I want three images in a layout I add 5 or 7 columns [#1 and #7 being edge pads]. The reason for this is to be able to kern or space the image blocks across the block I want them under. I imagine some of this can be achieved with padding but I haven't played with that - I'll post back once I do.

You can see an example of 5 images in 9 columns here near the footer of my dev site [EDIT 23NOV13] I have changed theme and this example can no longer be seen - I wil update again once I have the page fixed [End EDIT] and once the site goes live at In this example the images are so wide that they fill the width of the main block. Had they been narrower you'd see white space between each image.

What I would like to do is be able to lock the layout after I have tweaked it to fit my needs -and- even more so once I have the horizontal layout loaded with images save that somehow or convert it into a Global item - any ideas?