Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 13993
Joined: 30 Sep 2006, 03:37

Embed photo gallery :drum:

18 Feb 2021, 06:40

Wow, new shiny toy! :drum:
*Although not entirely related to X3, this app showcases features that will find their way into future X3 versions.
embed.files.gallery

Embed photo gallery
Embed is modern Javascript photo gallery that can be added to any website. Instead of using <iframe>, Embed injects the gallery into an element on your page, creating natural page scroll, inheriting website styles, and making it easy to customize with CSS. * Embed requires PHP and uses www.files.gallery as the gallery backend.
Image

Features
  • Modern flexible layouts that can easily be adjusted.
  • Supports all file types.
  • Beautiful popup for navigating images.
  • Easy to style with custom CSS and CSS --variables.
  • Fast cache mechanism (inherited from Files app).
What's it for?
Embed is a modern, beautiful photo gallery that can easily be added into ANY website.

Instructions
Find instructions in this post:
viewtopic.php?f=67&t=10180

Need help?
Please post in the new Embed forum.
 
User avatar
GeoPal
Experienced
Posts: 227
Joined: 20 Dec 2007, 12:56

Re: Embed photo gallery 🌪️

18 Feb 2021, 07:29

Looks great, can't wait!
 
metallissimus
Experienced
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Embed photo gallery 🌪️

18 Feb 2021, 09:18

Grid span is an interesting approach on the problem of showing vertical and horizontal images without one of those being much smaller than the other.
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
cedkey
Posts: 6
Joined: 06 Apr 2020, 13:10

Re: Embed photo gallery 🌪️

21 Feb 2021, 15:45

Awesome, I can't wait to test ...
Well done for the job
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Embed photo gallery 🌪️

22 Feb 2021, 01:55

Thanks for the feedback folks  :clap: I have now completed the post and added setup instructions. Although this is an early version, it's ready to be used in production if anyone is interested. For now, I will need to get back to some X3 updates, but I'm looking forward to release further Embed photo gallery updates and more info!
metallissimus wrote:Grid span is an interesting approach on the problem of showing vertical and horizontal images without one of those being much smaller than the other.
Indeed. CSS "grid" is very cool, and there are loads of possibilities (which I intend to explore). KEEP IN MIND: The CSS grid is like a super-advanced table, where all grid items are essentially the same size. Unlike other layouts (for instance "rows"), each grid-item cannot adjust itself to fit the size of the image inside. However, like in the grid-span example you are referring to, one can for example assign "vertical" images to occupy TWO rows and "horizontal" images to occupy TWO columns. The grid will then attempt to "pack" the grid neatly (like tetris), although there is a chance there will be small gaps at places (which is mostly acceptable). With a default "square" grid, it means horizontal images become 2:1 while vertical images become 1:2, which is not "perfect". There are some other grid options I want to explore, which may offer better results, so stay tuned!
 
metallissimus
Experienced
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Embed photo gallery 🌪️

24 Feb 2021, 04:10

mjau-mjau wrote:With a default "square" grid, it means horizontal images become 2:1 while vertical images become 1:2, which is not "perfect".
Since the most common ratio in photographs is probably 3:2, couldn't you use a smaller square "base grid" and assign 6 squares to each image, so the ratio doesn't change? Square images would also fit nicely (4 squares), as would n:1 panoramas. 4:3, 16:9 and anything odd will of course still be cropped.
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Embed photo gallery 🌪️

24 Feb 2021, 05:08

metallissimus wrote:Since the most common ratio in photographs is probably 3:2, couldn't you use a smaller square "base grid" and assign 6 squares to each image, so the ratio doesn't change? Square images would also fit nicely (4 squares), as would n:1 panoramas. 4:3, 16:9 and anything odd will of course still be cropped.
In short, yes and I'm impressed by your thinking. 6 squares is perhaps a bit much, but why not just 3? Then we can assign 3:2 for landscape, 2:3 for portrait and 2:2 or 3:3 for square. The reason I would limit the grid cells, is for performance reasons, and to keep things more intuitive in regards to settings and customizing the grid (which can be done from CSS), and to minimize the chances of "gaps" in the grid.

Aspect ratio classes
As mentioned earlier, the grid itself doesn't know (and doesn't care) about the size and aspect of images inside. Instead, as in the demo, I need to assign CSS classes (for example "img-square", "img-vertical" and "img-horizontal") to each element up front, based on the calculated aspect ratio each image. We can then style each class to occupy multiple rows and/or columns by CSS. The classes created from aspect are just approximate ... For example, in the demo I assign img-horizontal only if the ratio > 1.3, and img-vertical if the ratio < 0.8, else we end up with square-looking images spanning multiple columns or rows (looks less appealing than square for "squarish" images). One could of course go even further and create FIVE aspect classes (ultra-narrow, narrow, square, wide, ultra-wide), but it gets complicated assigning col/row spans for each class, and I think we are asking for more than CSS Grid is essentially designed for.

Empty grid gaps
One thing that starts happening as soon as you create different row-spans and col-spans, is that you will start getting empty gaps in the grid. I am not 100% sure how the grid deals with gaps, but it does try it's best to fill empty areas, although it won't entirely change the order of items. It seems almost like Tetris. When you use basic 2X row and column spans (like in the demo), it works nicely (perhaps perfectly) because all grid items are simply multiplications of 2. Once you start with 3/2 and 2/3 row and col spans, you will start getting empty "gaps" that the grid fails to occupy ... In my opinion, this is not a huge problem at all, but it is a compromise. Once col/row spans get more complex, more gaps will appear.

I'll do some more tests soon.
 
metallissimus
Experienced
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Embed photo gallery 🌪️

24 Feb 2021, 07:14

mjau-mjau wrote:6 squares is perhaps a bit much, but why not just 3? Then we can assign 3:2 for landscape, 2:3 for portrait and 2:2 or 3:3 for square.
I think we actually mean the same thing. 6 squares because they make up an rectangle with a ratio of 3:2 or 2:3.
I'll do some more tests soon.
I'm excited to see what you will come up with!
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Embed photo gallery 🌪️

24 Feb 2021, 23:30

metallissimus wrote:I think we actually mean the same thing. 6 squares because they make up an rectangle with a ratio of 3:2 or 2:3.
Right!
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Embed photo gallery 🌪️

18 Mar 2021, 02:41

metallissimus wrote:I'm excited to see what you will come up with!
I updated Embed to 0.0.7 and updated the demo to showcase new GRID options (and more):
embed.files.gallery

I basically removed the "grid-span" layout, as the options there could just be merged into "grid". Grid options 2/1 and 3/2 work quite nicely, although you will find there is chance of empty spaces as the browser attempts to populate the grid in a Tetris-like fashion.

Grid 2-1 works nicely, and it seems like there are almost never any empty spaces.
Image

Of course, 2-1 is slightly narrow for many images. One could increase the grid "height" to optimize slightly for horizontal images. Vertical images will then become even taller (than 2:1) but this might be acceptable. In the below, I set grid height to 120%:
Image

Grid 3-2 definitely provides a better aspect for most images, although there is a higher chance of empty spaces as the layout attempts to populate the less uniform grid:
Image

Also demonstrating new round, which can be cool:
Image
 
metallissimus
Experienced
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Embed photo gallery 🌪️

18 Mar 2021, 11:06

mjau-mjau wrote: Grid 3-2 definitely provides a better aspect for most images
I love this! Can totally see it in use for my wedding photography, where I do mix landscape and portrait orientation a lot. I'm curious to find out how it will work (in regard to gaps) when there are no square images at all.
A little thing I'm missing right now: A toggle to switch off rounded corners. I do like the radius corresponds to the space, but I'd prefer to have the ability to use space and still have sharp corners.

Will this come to X3.30 maybe or is it rather something for X4?
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Embed photo gallery 🌪️

18 Mar 2021, 22:43

metallissimus wrote:I'm curious to find out how it will work (in regard to gaps) when there are no square images at all.
I took the liberty to remove "square" images, and there is definitely a similar increased chance of gaps. It's logical to assume that 3:2 creates a higher chance that items (in order) simply don't always fit in order. With 2:1 you are dealing with simpler multiplication symmetry.
Image
metallissimus wrote:A little thing I'm missing right now: A toggle to switch off rounded corners. I do like the radius corresponds to the space, but I'd prefer to have the ability to use space and still have sharp corners.
Keep in mind this is just a DEMO of the embed app and the layouts. When you use the app itself, you can easily set --embed-border-radius: 0 (enter value) regardless of layout and space between items. The reason I didn't want to choke the demo-interface with radius, is because I can't combine controls for "soft" (3px) with "round" (50%). Also, the "soft" border-radius looks ugly when there is no space (or very little space), so I wanted to avoid "soft" when the user adjusts space down to zero. Therefore, I just control border-radius automatically specifically for the demo, but it is an option in the app.
metallissimus wrote:Will this come to X3.30 maybe or is it rather something for X4?
Good question. Something I need to figure out in the coming months ...
 
metallissimus
Experienced
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Embed photo gallery 🌪️

19 Mar 2021, 07:46

mjau-mjau wrote: I took the liberty to remove "square" images, and there is definitely a similar increased chance of gaps.
Doesn't look too bad though, thanks for testing. If one really wants to avoid the gaps at all cost I guess it might be possible with careful ordering of the images (and probably restrictions on gallery width, so it's always the same).
Therefore, I just control border-radius automatically specifically for the demo, but it is an option in the app.
Alright, I wasn't aware of that. I probably won't use embed on its own, but I'm curious about it because I assume a lot of it might come to photo gallery some day.
Good question. Something I need to figure out in the coming months ...
Can you give an outlook on the development? Will there be considerably more updates to X3 or is X4 almost around the corner? And if so, how far away is this corner time wise? (Sorry for OT, maybe another thread would be more suitable to this question.)
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Embed photo gallery 🌪️

19 Mar 2021, 11:09

metallissimus wrote:Doesn't look too bad though, thanks for testing. If one really wants to avoid the gaps at all cost I guess it might be possible with careful ordering of the images (and probably restrictions on gallery width, so it's always the same).
Agreed! I personally don't mind the gaps, considering it creates a unique and functional layout, with minimal cropping without emphasizing either landscape or portrait. Yes it could be technically possible to manually prepare a sort order that prevents gaps, but it would be really tedious to setup, especially as the layout responds across different screen sizes. I would say, if it's important to avoid gaps and/or you want a more "uniform" layout, then choose square grid or rows.

3:2 presents images quite nicely, thanks for making the suggestion. Although 2:1 offers minimal chance of gaps, it does not really present the images properly, and therefore seems more like an interesting "stylistic" option.
metallissimus wrote:Alright, I wasn't aware of that. I probably won't use embed on its own, but I'm curious about it because I assume a lot of it might come to photo gallery some day.
Indeed.
metallissimus wrote:Can you give an outlook on the development? Will there be considerably more updates to X3 or is X4 almost around the corner? And if so, how far away is this corner time wise? (Sorry for OT, maybe another thread would be more suitable to this question.)
Well, before I can answer that in detail, I need to figure out some strategies myself. It's definitely not "almost" around the corner, and although I am considering X4, it does not mean I won't keep X3 updated. Besides, X4 would be fundamentally similar to X3, but re-designed with new browser technologies in mind, and everything we have learned. It wouldn't be unthinkable to just keep it "X3", but I am thinking major changes in core, layouts and skins, and lots of stuff will go into the trash ... This may qualify for a new version (for many reasons). Anyway, I can't really say much more right now right here. You can post a topic if you like, but I have some planning to do before I can give solid answers.

Even if I start X4, it does not exclude the chance that we could also add this new "grid" option into X3, since it's relatively abstract from other settings.
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Embed photo gallery :drum:

01 Jun 2021, 07:01

Yes it supports lazy image loading. You can test yourself in the demo ... Scroll down, and you will see images load as the appear in they viewport.
https://embed.files.gallery/