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:
.file .title, .file .date {
display: none;
}
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:
.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:
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?