Search…

X3 Photo Gallery Support Forums

Search…
 
kevin135
Topic Author
Posts: 6
Joined: 01 Aug 2016, 07:09

Need help for clickable image option

23 Feb 2021, 17:10

Hi,

I need to use clickable image option on justified galleries (i.e. "Images are clickable" but not "open in popup"). I have 3 problems for which I don't find solutions:

1) I want to remove title and date which are displayed at the top of each images after they were clicked, in order to have a background entirely white without any text
2) I would like to display vertical images at the same height size than horizontal images, actually vertical images are strongly zoomed (and thus not appear entirely on the screen) because X3 dispays it based on their width as the height of horizontal images. You can see an example of this problem here with a vertical image : https://www.kevin-barre.com/Photography ... 2012_5911/ which is not displayed as the same height of horizontal image here: https://www.kevin-barre.com/Photography ... 2012_6064/
3) I would like visitors after clicking on an image to be able to navigate to the next or the previous one using the keyboard arrows, currently you have to click on the arrows on the screen using the mouse.

Many thanks for your help

Best, kévin
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Need help for clickable image option

23 Feb 2021, 21:51

First of all let's be clear: You want to DISABLE the popup, and instead have images open in the normal page layout? Like the link below? Please confirm.
https://demo.photo.gallery/galleries/la ... ntarctica/

If so, you are asking a lot, because the "image landing" page is meant for SEO and sharing (so that images have their own unique page). It does not have any specific layout functionality, and simply displays the image on page. The popup was created for optimal display of image across all screens, and superior navigation for human visitors. That is not the case for the "image landing page", which is a simple page. May I ask exactly why you have disabled the popup?
kevin135 wrote:1) I want to remove title and date which are displayed at the top of each images after they were clicked, in order to have a background entirely white without any text
They can be removed by adding some custom CSS. Settings > Custom > Custom CSS:
Code
.file .title, .file .date {
  display: none;
}
kevin135 wrote:2) I would like to display vertical images at the same height size than horizontal images, actually vertical images are strongly zoomed (and thus not appear entirely on the screen) because X3 dispays it based on their width as the height of horizontal images. You can see an example of this problem here with a vertical image : https://www.kevin-barre.com/Photography ... 2012_5911/ which is not displayed as the same height of horizontal image here: https://www.kevin-barre.com/Photography ... 2012_6064/
This is what happens when you add images into a standard page layout. They will scale to the width of the page-area. I am not sure what you see on your side, but the images are definitely not zoomed ... In both cases, they are scaled down from the original. Of course, this layout is not optimal for viewing "vertical" images, because they will often extend beyond the scroll of the screen, but (sorry to say) that's what happens when you disable popup (which is superior for this). I'm actually a bit surprised, because the behavior you are asking for, is what the popup is created for.

If you really need to hack it, the only thing I can think of, is to limit the HEIGHT of each image to the screen height, which means it won't overflow the scroll. This will not have optimal results on all screen sizes. Try to add this in Settings > Custom > Custom CSS:
Code
.file figure {
  box-shadow: none !important;
}
.file img {
  max-height: 100vh;
  width: auto !important;
}
Result is that the vertical images are contained within screen area without scroll:
Image
If that isn't sufficient, you really should re-consider what you are trying to do. You are basically asking for a behavior that is planned in depth to work perfectly in the popup, and that is why all photo services/websites always have a popup mechanism.
kevin135 wrote:3) I would like visitors after clicking on an image to be able to navigate to the next or the previous one using the keyboard arrows, currently you have to click on the arrows on the screen using the mouse.
Again, this is exactly what the popup does perfectly. One can navigate with keyboard, arrows and even swipe (which is necessary on touch devices). Also, when navigating the popup, images appear instantly, while in your case, it needs to load the page. Why don't you use the popup? I must admit, this is really baffling to me ... You are essentially asking for features that are built-in to the very advanced (and complex) popup, which can't simply be merged into a simple page.

The above could perhaps be added with custom Javascript behavior. Let me know if you want me to come up with some custom code that allows keyboard navigation, but that's as far as you can stretch this basic layout. How did you intend for mobile users to navigate?
 
kevin135
Topic Author
Posts: 6
Joined: 01 Aug 2016, 07:09

Re: Need help for clickable image option

24 Feb 2021, 04:08

Many thanks for your quick and complete answer ! 

Your solutions work well, and indeed be able to navigate using keyboard could be nice if you can provide CSS, and by swipe on touch devices. If I opt for this option I will also need to keep the close button which now disapears when we remove image title and date of standard layout page, as well as to rename back and next buttons with "previous" and "next", actually it is the image name which is displayed inside buttons.

However, the main reason for which I prefer this display way is that popup displays image in full screen. My idea is to keep white space around images, it is why I visually prefer the result of standard page layout. If I can adjust image size display in popup, then popup should works well for me. Is it possible to adjust size of image inside popup to reduce it and to disable fullscreen button? 

Many thanks for your help,
kévin
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Need help for clickable image option

24 Feb 2021, 05:36

kevin135 wrote:navigate using keyboard could be nice if you can provide CSS
It will be Javascript ...
kevin135 wrote:and by swipe on touch devices.
Sorry no. What is the visitor supposed to swipe? The entire page? This is a complex feature built-in the advanced popup mechansim. If you want swipe and by far the best behavior, please revert to the popup. I can't build this into a "page".
kevin135 wrote:If I opt for this option I will also need to keep the close button which now disapears when we remove image title and date of standard layout page
I think we can fix that, but it won't be perfect of course ... Just the same X somewhere on page, which unlike the popup, isn't fixex to top right of screen, because your page must scroll.
kevin135 wrote:as well as to rename back and next buttons with "previous" and "next", actually it is the image name which is displayed inside buttons.
Sorry, but this can't be fixed.
kevin135 wrote:However, the main reason for which I prefer this display way is that popup displays image in full screen. My idea is to keep white space around images, it is why I visually prefer the result of standard page layout. If I can adjust image size display in popup, then popup should works well for me.
But are you testing your pages from ALL screen sizes? Sounds like you are using a very large screen, but that's perhaps 10% of your visitors. Nobody wants the images smaller on small-medium screens, and there is no room for additional white-space. Could it be that you are sitting closer to screen than most users (relative to screen size of course)? In the end of the day, at best, you are offering an inferior interface for your visitors. The only reason images are smaller in the page you are currently using, is just because the image is randomly limited by width of the page-TEXT content (which didn't even suit your vertical images). This is at best, a huge hack.
kevin135 wrote:Is it possible to adjust size of image inside popup to reduce it and to disable fullscreen button?
You can remove the fullscreen button, but you can't reduce the size. Have you tried to see how your images would look if they were reduced in size also on mobile and medium-size screens?

I hope I don't sound arrogant, but I think you are vastly under-estimating the capabilities and need for a popup-mechansim, and how this has been tested for necessity and functionality across different screens. You can't just migrate such behaviour into a normal scrollable page. The popup "locks" the interface to the screen area, without scroll, and add it's own interface and behaviour perfectly adopted for viewing and navigating images.
 
metallissimus
Experienced
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Need help for clickable image option

24 Feb 2021, 06:24

kevin135 wrote: However, the main reason for which I prefer this display way is that popup displays image in full screen. My idea is to keep white space around images.
I understand that, I'm a fan of clean layouts with lots of whitespace myself. As Karl already explained, this makes only sense on large screens, but there's a simple solution: Upload the images in the largest size you would like to display, the popup won't enlarge them on large screens but they will still fill smaller screens. A starting point could be 1200px on the long edge, which leaves lots of space on an HD screen.
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: Need help for clickable image option

24 Feb 2021, 23:20

metallissimus wrote:I understand that, I'm a fan of clean layouts with lots of whitespace myself.
I started thinking about this yesterday ... It could have been interesting to have an option to add MARGIN to the popup image. However, how to apply this progressively across different screen sizes? Mobile/tablets don't have room for margin, and for "medium" screens like my mavbook 13", I'm not sure, but it certainly couldn't have the same margin as large screens. Also, how about zoom?
metallissimus wrote:Upload the images in the largest size you would like to display, the popup won't enlarge them on large screens but they will still fill smaller screens. A starting point could be 1200px on the long edge, which leaves lots of space on an HD screen.
Indeed. The only thing I don't like, is how this does not cater properly to retina (hiDPI, double-pixel density) screens. For example, on a Macbook Retina (2560 x 1600 which "displays like" 1280 x 800), an 800 px image will consume 1600 actual pixels on screen, and should really be serving a larger images (up to 2x the size of the area that the image consumes). With default large-size images (like 2000 px), this would normally work out nicely because images would get scaled down to "fit" inside the popup on most retina screens anyway. Not a huge deal, but worth mentioning.
 
metallissimus
Experienced
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Need help for clickable image option

25 Feb 2021, 04:36

mjau-mjau wrote: It could have been interesting to have an option to add MARGIN to the popup image. However, how to apply this progressively across different screen sizes?
I like that! I could imagine an interface similar to the column count you can set for different sized screens.
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
kevin135
Topic Author
Posts: 6
Joined: 01 Aug 2016, 07:09

Re: Need help for clickable image option

26 Feb 2021, 17:46

Hi,

many thanks for you feedback. In my case I had several solutions to answer my problem. I finally chose to use slideshow gallery instead of justified+popup. 

However I kept one vertical gallery as a "News" page, allowing me to add some text to new images (http://kevin-barre.com/Photography/News/) regularly in the form of blog. I also allow for clickable image (e.g. http://kevin-barre.com/Photography/News ... _Brittany/), but as I added a description to each one (i.e. all text above the image), your first code you cited in your first response does not work (but it works well on title and date). I tried to adapt it by adding a ".file .description" argument but it does not work, do you known what argument can I use to remove the description text above images ?

Anyway your different responses helped me to think (and re-think) my website structure, it's not finished but it suits me perfectly !

Thanks again.

Kévin

ps : I agree that a margin option (with % transparency and color choice) on popup could be really nice, but the impressive panel of solutions you propose in this tool is of course already nice !
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Need help for clickable image option

26 Feb 2021, 23:39

kevin135 wrote:do you known what argument can I use to remove the description text above images ?
Try this:
Code
.file .subheader {
  display: none;
}