Page 1 of 1

Gallery Layout

Posted: 20 Oct 2024, 10:30
by newaki
Hello, I been playing around with the setting of gallery and I can not seem to figure out why this wont layout they way I was hoping.

the gallery is setup like this:

Main Category
      Pics
      Vids

The picture gallery is setup to go 5 images across (https://prnt.sc/6_6nuEuRjG6W)

The video gallery is either stretching the video across the width of the screen or shows 1 column (https://prnt.sc/YJVlmgDYzRR1https://prnt.sc/p4KlGJEjqZwx)

I would like for it to match the picture gallery or at least 3 across.

I am probably being dumb and messing something up.

Re: Gallery Layout

Posted: 20 Oct 2024, 11:56
by mjau-mjau
Hello. Unfortunately, X3 is not (yet at least) prepared well for video galleries. This is primarily because X3 can't create thumbnails from videos, and therefore, we can only EMBED videos directly. We can't simply add embedded videos directly into image-specific layouts, and therefore, video layouts are currently separate from image gallery layouts. As you will find, the Videos simply layout vertically stacked, and this will normally mean that they stretch to the width of the container they are inside.

Now, it might be possible to use a grid for videos instead of the plain vertical layout, but keep in mind this is embedded videos which will play within the area where they are embedded. For example, if you had 3 x videos in a grid, they will be quite small when the visitor is playing them. This is why we simply add them at "normal" size, scaled to the container they are within.

It might be possible to add some custom CSS, but there are some limitations.

Re: Gallery Layout

Posted: 20 Oct 2024, 16:02
by newaki
That absolutely makes sense, it was driving me crazy but I can live with it and slowing play around with CSS.

Thank you for clarifying this for me!

Re: Gallery Layout

Posted: 21 Oct 2024, 16:15
by JMM
Hello, Newaki,

I have quite a few videos on my various X3 sites, with a couple of those sites having more videos than pictures  :sunglasses:.  If you are still interested in doing it, THIS page shows 2 different methods to accomplish what you wish to do.

On that page, the 4 videos on the first (top) line shows what Karl mentioned about embedding your videos, and I have 4-across selected, but you can change that to whatever you want (noting, as Karl says, the more videos across, the smaller that they will initially be):
mjau-mjau wrote: Now, it might be possible to use a grid for videos instead of the plain vertical layout, but keep in mind this is embedded videos which will play within the area where they are embedded. For example, if you had 3 x videos in a grid, they will be quite small when the visitor is playing them. This is why we simply add them at "normal" size, scaled to the container they are within.
I'm spoiled, as my computer screen is 42", so they are not too small  :relaxed:.  But your users, when they wish to view one of your videos, can expand each video to full-screen, by clicking the box icon in the lower-right corner of each video (between the speaker and the 3 vertical dots).  In my case, I have a thumbnail picture that is associated with each of those videos, that is displayed before the user starts playing the actual video; but those thumbnails are an option, and are not necessarily needed.

The 4 videos on the second (bottom) line shows another method of doing what you wish to do.  This method does require that you have a picture associated with each video.  In X3, for each video-and-picture pair, you would hide each of the videos.  You would set up that gallery (folder) layout to display the pictures however you wish (grid, vertical, justified, etc.), similar to how you have your Pics categories displayed.

Then, for each picture, you would add a link to the actual video.  An an example, for my first video on that page, in the link field, I have:

Code
{path}Elton John - I'm Still Standing.mp4?autoplay
Below each of those links, I use the _self option, in order for autoplay to work.  The autoplay capability might be dependent on the browser that your users are using... I use Brave (Chrome-based), and autoplay works for _self.

So now, X3 will display those pictures in whatever layout that you choose, but when your visitors click on any of the pictures, instead of the actual picture opening in a pop-up, X3 will instead play the video full-screen  :relaxed:.

Hopefully some of the above will give you some ideas to try on your own X3 site.  Let me know if you need help with anything that I've mentioned above.

Regards,
John