Jump to content

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.


Link to comment
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.

Link to comment
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.

Link to comment
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:

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

Works like a charm.

Thanks again for all your hints and proposals!



  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...