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.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

Arrange images parallely (side by side)


Reply


3 Posts   2233 Views

Avatar
Marco_D

Community Member, 20 Posts

7 April 2009 at 1:41am

Hello guys,

currently I am starting to deal with SilverStripe. Therefore I am trying to create a first sample page.
My question is: Is there a possibility to arrange images side by side in that way that they are next to each other?
The only possibilities about positioning pictures I have found are
- on the left, on its own
- on the left, with text wrapping around
- on the right, with text wrapping around
- centered, on its own.

But I cannot see any feature that allows me to say picture X shall be directly next to picture Y.
Is there a workaround exisiting?

Best regards from Germany

Marco

Avatar
designerdre

Community Member, 19 Posts

7 April 2009 at 3:07am

Hello Marco,

My answer would be CSS in colaboration with the SilverStripe image placement options!

For every image placement option that choose, SilverStripe attaches a unique class to the div containing the image. For example, when you choose the "on the left with text wrapping" option the class "left" is applied to the div containing the image (I believe all images also have a class of image as well). Here is where it gets fun.

You can customize the behaviors of each placement choice using CSS. If I want to line my images up side by side using the "on the left with text wrapping" option I would apply a CSS rule such as the following since i know that this option who give my image div a class of "left":

.image.left { float: left; } or
.left { float: left; } granted that you have no other element in your code with the class of "left".

To add some spacing around each image add a margin to the style:

.image.left { float: left; margin: 5px 5px 5px 0px; }

That margin setting would add 5px to the top, right, and bottom of each image.

Hope this was helpfull!

Avatar
woodb2

Community Member, 48 Posts

25 April 2009 at 2:07am

I've found the easiest way is to use the table tool in the editor. Just insert a 1x2 table and insert the images in each cell. You can set the boarder to 0 any you'll never know it's there.