Jump to:

23367 Posts in 18143 Topics by 2863 members

General Questions

SilverStripe Forums » General Questions » Arrange images parallely (side by side)

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

Page: 1
Go to End
Author Topic: 2155 Views
  • Marco_D
    Avatar
    Community Member
    20 Posts

    Arrange images parallely (side by side) Link to this post

    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

  • designerdre
    Avatar
    Community Member
    19 Posts

    Re: Arrange images parallely (side by side) Link to this post

    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!

  • woodb2
    Avatar
    Community Member
    48 Posts

    Re: Arrange images parallely (side by side) Link to this post

    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.

    2155 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.