Search…

X3 Photo Gallery Support Forums

Search…
 
metallissimus
Experienced
Topic Author
Posts: 148
Joined: 17 Oct 2019, 06:54

Modify grid gallery

30 Sep 2021, 13:08

Is it possible to modify the grid gallery in such a way that every grid item  (the container for the images) is square but without cropping the images? That way horizontal and vertical images would show at the same size. (Similar to this: https://funlifecrisis.com/wp-content/up ... -theme.jpg)
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13146
Joined: 30 Sep 2006, 03:37

Re: Modify grid gallery

01 Oct 2021, 02:06

Currently no, because with the existing X3 grid system (without "crop"), images will expand to the width of container, which means the height will expand relative to the aspect of each image. This in turn means that each row's height will be decided by the tallest image in the row. Natural flow in HTML ...

The only way to achieve something like that, is to predefine the exact size of image containers (so they are all identical, usually symmetrical square), and then force each image to scale within it's container. You can achieve something like that in our Files app demo (click layout > Grid, and uncheck "cover"). I made a screenshot, where I also removed the container background color as in your screenshot. In my opinion, this is inconvenient and clumsy to view for the visitor as there is no symmetry when they scan images from left to right.
Image

If anything, I would want to keep a background color to keep the elements symmetric, making it easier to view, like in the default Files app non-cover mode.
Image

The above feature (using CSS grid) will eventually find it's way into X3, but even this layout is quite complicated, because we have to scale the width of all grid elements to fit available width, while maintaining a perfectly square aspect ratio for each element (height must increase proportionally with width).
metallissimus wrote:That way horizontal and vertical images would show at the same size. (Similar to this: https://funlifecrisis.com/wp-content/up ... -theme.jpg)
Looks like some concept and not something actually created? I would note that this image seems to be designed with a very "fortunate" order of images vs aspects that creates more visual symmetry than you will normally get from such a layout.
 
metallissimus
Experienced
Topic Author
Posts: 148
Joined: 17 Oct 2019, 06:54

Re: Modify grid gallery

01 Oct 2021, 14:14

Thanks for the thorough answer.
mjau-mjau wrote: Looks like some concept and not something actually created? I would note that this image seems to be designed with a very "fortunate" order of images vs aspects that creates more visual symmetry than you will normally get from such a layout.
I believe this is an actual instagram screenshot. Of course it's much easier to have a nice result there, because you can rely on always having three columns and the same order of images. I agree that in your screenshot from files it doesn't look as nice, maybe it's just not a good idea for larger (screen)spaces/larger amounts of images.
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13146
Joined: 30 Sep 2006, 03:37

Re: Modify grid gallery

02 Oct 2021, 01:10

metallissimus wrote:I believe this is an actual instagram screenshot.
I was thinking the same, although that would probably be with the help of some 3rd-party app that stores "square" images with white borders integrated directly in the image (so that the full image is contained with the square), because this layout is not available from Instagram.

In any case @metallissimus, it's interesting to follow your quest for layouts which emphasize vertical and horizontal images equally. I believe we also debated in another post in regards to a layout in Embed where images can be set to "span" across multiple rows or columns, depending on their aspect :clap:
 
metallissimus
Experienced
Topic Author
Posts: 148
Joined: 17 Oct 2019, 06:54

Re: Modify grid gallery

02 Oct 2021, 06:04

mjau-mjau wrote:
metallissimus wrote:I believe this is an actual instagram screenshot.
I was thinking the same, although that would probably be with the help of some 3rd-party app that stores "square" images with white borders integrated directly in the image (so that the full image is contained with the square), because this layout is not available from Instagram.
Absolutely! Especially before instagram allowed other aspect ratios than square a lot of people used this technique to present landscape or portrait images.

This could be of course a solution to my idea, too: Put white bars around every image. But this only works if it's somehow possible to set thumbnails independently of the images shown in the popup, otherwise you waste a lot of space on mobile. Is this possible without building the entire gallery by hand (like I did with the six images shown here: https://hochzeiten.danielbollinger.de/)?
In any case @metallissimus, it's interesting to follow your quest for layouts which emphasize vertical and horizontal images equally. I believe we also debated in another post in regards to a layout in Embed where images can be set to "span" across multiple rows or columns, depending on their aspect :clap:
Yeah, it's something that's really bothering me with online galleries in general, you always have to decide which orientation to emphasize. OTOH this this creates some visual interest, which might be a benefit on its own.
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13146
Joined: 30 Sep 2006, 03:37

Re: Modify grid gallery

03 Oct 2021, 01:57

metallissimus wrote:This could be of course a solution to my idea, too: Put white bars around every image. But this only works if it's somehow possible to set thumbnails independently of the images shown in the popup, otherwise you waste a lot of space on mobile. Is this possible without building the entire gallery by hand (like I did with the six images shown here: https://hochzeiten.danielbollinger.de/)?
This would be complicated and clumsy at best. There is the "smart crop" feature which attempts to crop images with focus on important features (like human faces), but you cannot easily custom-create individual thumbnails. That would require manually creating multiple resize versions inside render/w***/path/filename.jpg, and if the images were moved/updated/changed, the resized versions would need to get recreated also.

Besides, this seems overkill just to achieve something which technically could be achieved with CSS (as explained in previous post) ... I think we could make it work with some CSS, but the challenge might be that we need to set a specific HEIGHT (px) for the image container elements. The containers will normally expand slightly (width) to fit the assigned area, so the container (and therefore the image inside) will not be exactly square. This works symmetrically in Files / Embed only because we are using a modern CSS grid method with a "hack" that forces height to match the width ... But grid is not yet available in X3 (and does not work in IE11), so it's premature.