Image layout

  • Resolved janina1

    (@janina1)


    3 years, 8 months ago

    Hi,
    I am trying to create a layout wit images in two columns like this. How can I achieve this? The margins between images should be the same, so I cannot use three rows. But if I place everything in one row wit two columns, the images will not be in the correct order when the columns collapse (on mobile, all images should be stacked in the order yellow, blue, green, pink, olive, burgundy).

    Thank you for your help!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Support Andrew Misplon

    (@misplon)

    3 years, 8 months ago

    Hi Janina

    You can try adding two cells to a Page Builder row and inserting the SiteOrigin Image Grid Widget in the left cell. It’s the closest I think we have to what you’re after. You can choose an image size to use and set a max width and height for your images. You can also set the top, right, bottom, and left padding for all images.

    https://siteorigin.com/widgets-bundle/image-grid/

    Thread Starter janina1

    (@janina1)

    3 years, 8 months ago

    Hi,
    I don’t really understand – why two cells with the grid widget? And the problem is I don’t want to set a max-width – the images should be responsible and in a two column-layout for desktop and one column-layout for mobile.

    Plugin Support Andrew Misplon

    (@misplon)

    3 years, 8 months ago

    Hi, thanks for your reply.

    You can add two cells (columns) to a Page Builder row to limit the width of the widget. The row will be full-width on mobile devices.

    The Image Grid Widget is the closest I can think of for this task. It’s relatively quick to insert the Image Grid Widget and try it. You don’t have to set a max-width; you can leave that field blank.

    Plugin Support Andrew Misplon

    (@misplon)

    3 years, 8 months ago

    Hi Janina

    Here are a few screenshots showing a quick attempt using the SiteOrigin Image Grid and Page Builder.

    SO Image Grid

    Thanks

    Andrew

    Thread Starter janina1

    (@janina1)

    3 years, 8 months ago

    Hi,

    thanks, but I am not sure if it is clear what I am trying to achieve: I don’t want any empty space on the right (like in your screenshot the empty right cell). I want a two column-layout with images in each cell, but the right cell images have a top margin so they are offset from the top. This can be achieved by creating a row with two 50% cells and then adding images to each cell and then adding top-margin to the right cell, but then the images will not be in the correct order when the cells collapse – all images from the left cell will come first and the all images from the right cell whereas I need first image from left, first image from right, second image from left, second image from right etc…

    Plugin Support Andrew Misplon

    (@misplon)

    3 years, 8 months ago

    Hi Janina

    Thanks for your reply.

    You can adjust the Layout > Collapse Order to Right on Top when editing a row. Unfortunately, we don’t currently have any other collapse order options available.

    Thread Starter janina1

    (@janina1)

    3 years, 8 months ago

    Hi,
    that would not work – I need left image, right image, second left image, second right image etc..like you would have if you used several rows but only added one image in each cell.

    Plugin Support Andrew Misplon

    (@misplon)

    3 years, 8 months ago

    Hi Janina

    Thanks for your reply.

    Unfortunately, at the moment, we don’t have a method of alternating the collapse order at a row/cell level or within the Image Grid Widget. Sorry, I don’t have better news. I’ve logged your feature request and passed your feedback on to the team.

    Thanks again.

    Andrew

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Image layout’ is closed to new replies.