Jump to content
ottogal

Free positioning of images

Recommended Posts

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.

gallerylayout.jpg

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

 

grid-values.jpg

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...