Page 1 of 1

Popup caption display

Posted: 18 Oct 2024, 06:08
by Mibu
Hi,
Under Gallery/Pop-up/Show Caption I can select which elements I want to display. How can I change their sequence?
Specifically I'd like to
(1) Show the filename in the last row (not after the title), but below the EXIF information
(2) Show the filename in brackets (filename) and with a smaller fontsize

Thank you
Michael

Re: Popup caption display

Posted: 18 Oct 2024, 06:40
by mjau-mjau
Mibu wrote:Under Gallery/Pop-up/Show Caption I can select which elements I want to display. How can I change their sequence?
Assuming that the order can be changed easily would be like assuming there is no planned design to the order and no grouped items. To give you complete control of the order, I would need to slap all items on top of each other without grouped items (on single lines) and hope for the best. However:
Mibu wrote:(1) Show the filename in the last row (not after the title), but below the EXIF information
You might be able to hack this by assigning FLEX on the caption contain, and then sorting items with CSS order. For example:
Code
.pswp__caption__center {
    display: flex;
    flex-direction: column;
}
.popup-caption-title {
  order: 10;
}
Keep in mind, the above is just an example of how it can be solved. You will likely need to then add an "order" to other caption items. Also, setting the container to flex will break the natural centering limited to block width, and just align left ... Maybe that can be fixed, but I won't be spending time trying to figure that out unless you are certain to be taking this route of customizing order via FLEX.
Mibu wrote: (2) Show the filename in brackets (filename) and with a smaller fontsize
You really need to open browser inspector (right-click element in browser, and click "inspect"). From there on, you can identify class names of any item you want to modify the style for. For example title (which could be file name, unless overridden by IPTC title):
Code
.popup-caption-title {
  font-size: .9em;
}
.popup-caption-title:before {
  content: "[";
}
.popup-caption-title:after {
  content: "]";
}

Re: Popup caption display

Posted: 18 Oct 2024, 07:01
by Mibu
Thank you so much!
Assuming that the order can be changed easily would be like assuming there is no planned design to the order and no grouped items.
Sorry, no disrespect meant with regards to your design :grinning: - the whole X3 application is marvelous!

Boths changes do exactly what I was looking for. There is just a minor issue, that now the whole caption block is shown on the left side, rather than centered below the image. Can it be moved back to the center?

Re: Popup caption display

Posted: 18 Oct 2024, 10:03
by mjau-mjau
Mibu wrote:There is just a minor issue, that now the whole caption block is shown on the left side, rather than centered below the image. Can it be moved back to the center?
I found a solution. Use inline-flex instead of flex.
Code
.pswp__caption__center {
    display: inline-flex;
    flex-direction: column;
}
.popup-caption-title {
  order: 10;
}

Re: Popup caption display

Posted: 18 Oct 2024, 14:00
by Mibu
I would never have found that solution - great. A big thank you.
Problem solved.

Re: Popup caption display

Posted: 23 Oct 2024, 07:50
by pede
Would it also be possible to suppress or hide individual EXIF details in this way?
I would like to display only the camera model and the date the photo was taken in some galleries, but without displaying ISO, focal length, aperture and shutter speed.

Re: Popup caption display

Posted: 23 Oct 2024, 08:48
by metallissimus
pede wrote: Would it also be possible to suppress or hide individual EXIF details in this way?
Yes, they are all single elements, so you can choose which ones to hide. Adding this to the pages custom CSS hides them all:
Code
.popup-exif-aperture, .popup-exif-iso, .popup-exif-exposure,.popup-exif-focal_length{
  display: none;
}

Re: Popup caption display

Posted: 23 Oct 2024, 12:16
by pede
That's really great! Thanks for the quick solution!