Search…

X3 Photo Gallery Support Forums

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

Slideshow and "Hide context"

18 Oct 2019, 09:18

Hello,

on my page (layout: sidebar) I have a slideshow with the following settings:
- "Use as Intro" checked
- Height 100%
- Fit "contain"
- Gallery width "narrower"

It looks beautifully until I check "Hide context" when suddenly the slideshow is no longer centered but is left aligned at the edge of the sidebar.
Do I need some custom css to counter that behaviour or did I miss some setting?

Best regards,
Daniel
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Slideshow and "Hide context"

19 Oct 2019, 03:07

Looks like a BUG. When you remove the context, the slideshow INTRO container element doesn't respect stretching to 100% width (since it is positioned absolutely) when you have no other content on the page. On the other hand, I am curious why would want to set a NARROW width for the slideshow intro? The slideshow intro is meant to be placed behind the menu, at 100% width, at specified height. The actual width of the images within will in any way depend on the aspect of the images, so they will likely create margins on both sides anyway. By setting a narrow width with the slideshow intro, you are just creating unnecessary margins on left/right, in addition to the margins created by the natural aspect of the image. The slideshow intro is definitely meant to scale from side-to-side of screen (wide), and then you will use height and contain/fit to control how the images scale within the area made available to the slideshow.

To circumvent the issue, you could add the following to Settings > Custom > Custom CSS:
Code
.module > .layout-slideshow {
  margin-left: auto !important;
  margin-right: auto !important;
}
By using a narrower layout for your slideshow intro, you are simply limiting the possible width of the images:
Image

... which otherwise would be the same when the slideshow at full width, because the image will scale to slideshow height:
Image

However, for example on a smaller screen, since you are specifying a limited width, the image will have to scale within the limit width:
Image

While if set to full width, your images would be capable of scaling within the entire width of screen:
Image
 
metallissimus
Experienced
Topic Author
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Slideshow and "Hide context"

21 Oct 2019, 05:01

Thank you for your extensive explanation and the quick solution!

As to why I want that, there are three reasons:
1. I like a clean, simple layout with lots of whitespace.
2. The fullscreen option isn't really usable with images that have their subject outside the center of the frame because on mobile you won't see it. Unless there is a "set focal point" feature that I missed so far, which if not I would highly recommend considering implementing.
3. My logo doesn't work on top of the images I want featured in the intro slideshow.
mjau-mjau wrote:The slideshow intro is definitely meant to scale from side-to-side of screen (wide), and then you will use height and contain/fit to control how the images scale within the area made available to the slideshow.
I tried that first but then the slideshow sticks to the top of the screen and I don't know how to center it vertically.
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Slideshow and "Hide context"

21 Oct 2019, 10:16

Ok. I already gave you the custom CSS solution to center the slideshow if you want it fixed for your case. Here are some additional comments:
metallissimus wrote:1. I like a clean, simple layout with lots of whitespace.
I can only see that you are limiting the width of the image in SOME cases. As you can see from my first two screenshots, the image will often be the same anyway, but it might not work well on smaller screens (for example ipad).
metallissimus wrote:2. The fullscreen option isn't really usable with images that have their subject outside the center of the frame because on mobile you won't see it. Unless there is a "set focal point" feature that I missed so far, which if not I would highly recommend considering implementing.
Since you are using CONTAIN mode, the entire image will ALWAYS be entirely visible, also on mobile. It will scale to fit within the frame. In your case, since you are limiting the width, images might be scaled down more than they need to.

If you speak of COVER mode (like we use in the X3 demo), you are right that will cut off images, depending on image aspect vs screen aspect. This solution is only an option when it's acceptable that images get cut off. The advantage of this option, is that there are not margins left/right/top/bottom, which gives the "intro" a much cleaner and meaningful implementation. OPTIONAL of course.
metallissimus wrote:3. My logo doesn't work on top of the images I want featured in the intro slideshow.
The entire point of the slideshow intro mode, is to place it at TOP of screen, under menu and logo, thus to give an "intro feeling" with images, without having to scroll. In your case, since you don't want the images under the logo (and unlikely under the menu also), then it's unclear to me why you would use the intro plugin in the first place. If you need an inline slideshow, BELOW the menu and logo, with restricted width, then you could use the slideshow in plain mode (not intro mode, which means it's attached to top of screen).
metallissimus wrote:
mjau-mjau wrote:The slideshow intro is definitely meant to scale from side-to-side of screen (wide), and then you will use height and contain/fit to control how the images scale within the area made available to the slideshow.
I tried that first but then the slideshow sticks to the top of the screen and I don't know how to center it vertically.
In intro mode, the slideshow intro will ALWAYS start at top of screen, because that's the point of the slideshow intro. You can then decide the height of the intro area, and how the images scale within the intro area (contain or crop). The configuration of the slideshow intro is for the AREA of the slideshow. The images you have must clearly SCALE within the given slideshow area, based on cover or contain.
 
metallissimus
Experienced
Topic Author
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Slideshow and "Hide context"

21 Oct 2019, 11:16

mjau-mjau wrote: In your case, since you don't want the images under the logo (and unlikely under the menu also), then it's unclear to me why you would use the intro plugin in the first place.
I am going for something like Jason Riker does on his site: https://jasonrikerphoto.com/ I am not sure if you missed that I am using the sidebar layout since much of what you're referring to is about the top menu. Anyways there's no need to further discuss this, I am perfectly happy with the solution you gave me earlier!
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Slideshow and "Hide context"

21 Oct 2019, 22:33

metallissimus wrote:I am going for something like Jason Riker does on his site: https://jasonrikerphoto.com/
Sure! That website is using full width (not narrow) slideshow, with images set to "contain" (contained within the slideshow area).
 
metallissimus
Experienced
Topic Author
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Slideshow and "Hide context"

22 Oct 2019, 05:59

mjau-mjau wrote:
metallissimus wrote:I am going for something like Jason Riker does on his site: https://jasonrikerphoto.com/
Sure! That website is using full width (not narrow) slideshow, with images set to "contain" (contained within the slideshow area).
If I use that setting I don't have the whitespace around the images he has on big screens. But if I read the code on that site correctly that's only a matter of image size so  I only need to upload smaller images for the slideshow?
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Slideshow and "Hide context"

22 Oct 2019, 06:22

metallissimus wrote:If I use that setting I don't have the whitespace around the images he has on big screens. But if I read the code on that site correctly that's only a matter of image size so  I only need to upload smaller images for the slideshow?
It's a bit unclear to me why you need "whitespace". If the original image is 1600 px, and there is room enough to display the entire image at full size in the slideshow, then why would you scale it down to 1000 px just to get some "white space" around the image? This is not logical. The slideshow intro will shrink images to fit inside, but it will not shrink images to create "white space" just for the sake of it.

There are three FIT options: Cover, will make the image scale to either height or width, so that the entire slideshow area is covered by the image. The image may then be cropped depending on slideshow area aspect vs image aspect. Contain will scale the image to fit inside the slideshow area, while keeping the entire image visible. This option will result in empty margins either left/right or top/bottom of the image, depending on image aspect vs slideshow area aspect. These margins are not useful, and you have no control of the margins, but it's the only way you can get images to fully display. Scaledown, is same as Contain, except it will never scale images beyond their original size (which prevents them from becoming blurry/pixelated). It will only scale DOWN images to fit within the slideshow area if required.

Perhaps Scaledown is the option you are looking for? That is what is used on Jasonrikerphoto.com. It doesn't technically add whitespace ... it just prevents images from scaling beyond their original dimensions. Most likely, this will simply mean that on very large screens, there may be some margins / white space, but this depends on your uploaded image size. After all, if your images are BIG ENOUGH, also for large screens, why would it need to scale down the images?
 
metallissimus
Experienced
Topic Author
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Slideshow and "Hide context"

22 Oct 2019, 09:00

mjau-mjau wrote: It's a bit unclear to me why you need "whitespace". If the original image is 1600 px, and there is room enough to display the entire image at full size in the slideshow, then why would you scale it down to 1000 px just to get some "white space" around the image? This is not logical.
But which logic states that I have to show my images at the biggest size possible? Anyways for me that's rather a question of aesthetics than logic.

Perhaps Scaledown is the option you are looking for? That is what is used on Jasonrikerphoto.com.
Maybe, I haven't decided yet. I guess it's a technically cleaner solution than the workaround you showed me above, because it's something X3 is built for. On the other hand it behaves a little differently, e.g. on smaller screens in landscape orientation the logo is on top of the slideshow.

Thank you for sharing your thoughts and for your further explanations.
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Slideshow and "Hide context"

22 Oct 2019, 23:35

metallissimus wrote:But which logic states that I have to show my images at the biggest size possible? Anyways for me that's rather a question of aesthetics than logic.
I can see that point. But how would we decide how much to scale down images within the slideshow, and what factors would it be based upon? How would it apply on small screens vs large screens, and how would it apply a setting?

The wide/narrow module settings are primarily meant for limiting page content to "readable" width (like a book), to keep optimal viewing/reading for humans. It also applies in some cases for galleries, but galleries and images can normally take more width of the screen space (which is one of the advantages of large screens of course). It's not logical limit width of the slideshow intro, because how your images are displayed, will depend on the HEIGHT of the slideshow, so outcome is at best a bit random, at least not anything planned.
metallissimus wrote:Maybe, I haven't decided yet. I guess it's a technically cleaner solution than the workaround you showed me above, because it's something X3 is built for. On the other hand it behaves a little differently
All I can say is that contain and scaledown are identical, except scaledown will never scale UP slideshow images beyond their original pixel dimensions. They aren't different in any other way.
metallissimus wrote:e.g. on smaller screens in landscape orientation the logo is on top of the slideshow.
The point of the intro is to place it attached to top of screen ... how would you have it differently? In topbar layout mode, which also applies for mobile, it means the slideshow will be UNDER the menu and logo, attached at 0 (top of screen). This is of course what most people want, so it creates a seamless intro, normally taking 100% of the current screen size. A problem of course, could be if you need to run your slideshow in CONTAIN mode ... Yes, it allows images to be fully visible on all screen sizes, but it creates random margins top/bottom or left/right of images, which may be distracting when combined with other interface elements.

I must admit, it seems like you are expecting some magical intro solution, across all screen sizes/aspects, not based on a logical approach. I would be happy to see links to other websites (also non-X3).
 
metallissimus
Experienced
Topic Author
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Slideshow and "Hide context"

23 Oct 2019, 06:55

Please don't mistake my questions and comments for critique. I am not saying X3 should behave differently, I am just trying to find out how I can make some small adjustments I prefer. X3 looks exceptionally good "out of the box" and reading your explanations I can easily see why – it's all thought through very well. I just like some things to be a little different to discern my site a bit from others.

I must admit, it seems like you are expecting some magical intro solution, across all screen sizes/aspects, not based on a logical approach. I would be happy to see links to other websites (also non-X3).
Well, maybe not magical, but you're right insofar that I am looking for the (aesthetically) "perfect" solution. Admittedly I don't know yet how that would look like...
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Slideshow and "Hide context"

23 Oct 2019, 09:29

Sure, no problem. I know I was probably over-commenting a bit, but I like to explain concepts, and I definitely listen to customers. Hope you find a solution! Feel free to ask more questions or provide feedback.