Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 12636
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.photo.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 files.photo.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: 212
Joined: 20 Dec 2007, 12:56

Re: Embed photo gallery 🌪️

18 Feb 2021, 07:29

Looks great, can't wait!
 
metallissimus
Experienced
Posts: 110
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.
 
cedkey
Posts: 4
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: 12636
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: 110
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.
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 12636
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: 110
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!
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 12636
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!