Free positioning of images

[ottogal]

Hi all,

given a template containing an Images field (with unlimited files allowed). Editing a page using this template, I'm looking for the ability to position the images freely (within a <section> element of the template - see the image). Is there a way to achieve this?

Thinking loud: A CSS solution (with inline style) using position:relative and values for top and left would need these values to be saved as properties of the individual image... Or do I need some JS gallery able to do it?

Any ideas are much appreciated.

[entschleunigung]

I think with css grid layout, you can do it.

[jacmaes]

As @entschleunigung said, CSS grid looks like a good solution. This codepen can get you started.

[ottogal]

Thank you both. It seems I was not clear enough about the aim. I'm not talking about a masonry type of layout. The images should be freely positioned, indepentent of each other. So a grid solution seems not adequate.

[jacmaes]

Not sure what you mean with "freely positioned". In any case, you might not be very familiar with CSS grid, but they can be freely positioned on the grid: They don't have to be next to each other, there can be gaps as in your screenshots. My example is slighly misleading as they are grouped together, similar to a masonry layout.

[jacmaes]

Here's a demo that loosely reproduces your screenshot:

https://codepen.io/jacmaes/pen/qBWJrRY

[wbmnfktr]

For freely positioned images you could try a repeater field containing:

• image field (single image)
• text or select field for position (relative, absolute)
• text field for x-position
• text field for y-position
• text field for height
• text field for width
• optional: fields for alt and description text

Above this you might want to add something to change responsive behaviour and other settings.

[johndoe]

I might be cutting some corners here, but I'm just lazy. Tables.

 

 

[entschleunigung]

grid layout would still be the better option, but there is another way. the following example has a background image and the boxes work similar to masks. you would have to refine it, but it could work like this or similar.

https://codepen.io/entschleunigung/pen/rNBqyNj

[ottogal]

@jacmaes @entschleunigung @wbmnfktr @johndoe

Thank you all for your efforts. I see that using grids is not so bad an idea. The repeater field option might be easier to handle for an not so savvy editor. I'll do some experiments...

 

 

 

[jacmaes]

I recommend Sarah Edo's grid generator. This is what I used for my quick demo:

https://cssgrid-generator.netlify.com/

[ottogal]

11 minutes ago, jacmaes said:

I recommended Sarah Edo's grid generator. This is what I used for my quick demo:

https://cssgrid-generator.netlify.com/

Thanks for the hint - looks helpful.

[ottogal]

Hi all,

I'd like to give some feedback about the solution I ended up with.

To bundle a few extra fields together with each image, instead of using a repeater I used the module ImagesExtra by @justb3a:
https://github.com/justb3a/processwire-imageextra

I created an ImageExtra field named imagex and added the following fields:
startrow, startcol, widthcols, zindex

They refer to a grid of rows and columns, each 2rem high and 2rem wide.
startrow and startcol are the topmost row and the leftmost column covered by the image; widthcols is the width of the image, given as count of columns.
zindex is the value of the usual z-index attribute to control which image is on top of the stack (in case of overlapping images).

The picture below shows an image in the grid with the values startrow=2, startcol=4, widthcols=6 and zindex=1.

The CSS grid is defined as follows:

.wrapper {
    display: grid;
    grid-template-rows: repeat(60, [row] 2rem);
    grid-template-columns: repeat(40, [col] 2rem);
    grid-gap: 0;
    width: 80%;
    margin: 0 auto;
    padding: 0;
}
.wrapper div {
    width: 2rem;
    height: 2rem;
}

The CSS definitions for the images are embedded in the HTML code using a style element, allowing the use of php variables.
(Note that the value of widthcols is used to calculate the width of the image in the unit rem, stored in the variable $wrem. The height is calculated automatically, keeping the aspect ratio.)

The images together with the extra field values are stored in the field $imagex, and in the foreach loop for each of them the class definition is built: 

<section class="wrapper">
    <?php
    if ($imagex) {
        $i = 0;
        foreach ($imagex as $pic){
            $i++;
            $sr = $pic->startrow;
            $sc = $pic->startcol;
            $w  = $pic->widthcols;  $wrem = 2*$w . 'rem';
            $zi = $pic->zindex;
            echo "
<style>
.no$i {
  grid-row: row $sr;
  grid-column: col $sc;
}
.no$i > img {
  width: $wrem;
  z-index: $zi;
}
</style>
            ";
            echo "\n<div class=no$i>\n";
            echo "<img src=$pic->url alt='$pic->description' />";
            echo "\n</div>\n";
        }
    };
    ?>
</section>

Works like a charm.

Thanks again for all your hints and proposals!