X3Photo Gallery Forums

RIIID · 11 May 2025, 12:58

Hello Karl,
Thanks again for the great software — I'm really enjoying working with it!

I’m currently planning to set up an event gallery for an organization, where multiple people are taking photos during events. The idea is that several photographers can contribute their images to the same gallery. Ideally, each contributor would have their own login, and if they upload to the same event folder, it would be great to display the name of the photographer along with their photos.
Is something like this possible in X3? And if so, what would be the best approach to implement it?

Thanks in advance for your help!

Richard Dvořák

11 May 2025, 22:02

RIIID wrote:Ideally, each contributor would have their own login, and if they upload to the same event folder, it would be great to display the name of the photographer along with their photos.

Basically you want to automatically create a "title" for each uploaded photo based on the logged in user? There isn't any automation for this. I think at best, you are looking at a custom PHP solution that saves a custom title for each uploaded image, based on the logged in user. It's not the smallest task.

It would definitely be more manageable if you limited each contributor to their own folder, where you could easily assign default captions for each folder.

RIIID · 12 May 2025, 01:32

For attribution, showing the copyright from EXIF metadata would actually be sufficient—no need for a separate title or caption.
Right now, the gallery still runs on Menalto Gallery 3. I've already tested your

index.php

drop-in under

/var/albums/

, and it nicely displays the names within the EXIF data in the file descriptions. Of course, not all images have that metadata yet, but updating it would be easy.
In X3, however, I couldn’t find a way to select or display the author/copyright information from EXIF. Is that possible?
Also, how can I create additional user logins in X3? I couldn’t figure that part out yet.

12 May 2025, 04:33

RIIID wrote:In X3, however, I couldn’t find a way to select or display the author/copyright information from EXIF. Is that possible?

X3 will display all relevant EXIF info (camera meta data), but it will onlydisplay IPTC title/headline, description and keywords. We don't attempt to extract, format and display any further IPTC values. Files Gallery can display author/copyright, but this is something quite different.

RIIID wrote:Also, how can I create additional user logins in X3? I couldn’t figure that part out yet.

You mean for the control panel? That requires database. Go to panel Settings > Panel > Login Type: "Use Database".

RIIID · 13 May 2025, 16:47

OK, so, I’m trying to add a custom EXIF field ("Artist") to the lightbox caption in X3 Gallery, so that it displays below the usual EXIF data (Model, Aperture, ISO, etc.) in the overlay.

What I’ve achieved so far:

I’ve created a working config/exif-data.php endpoint that returns EXIF data from images, including IFD0.Artist, as JSON:
Code
```
}
  "artist": "Richard Dvorak",
  "copyright": ":copyright:2006 by Richard Dvorak"
}
```
I successfully append "Foto: Richard Dvorak" inside the .popup-exif-caption element during the first image load using a MutationObserver.

The problem:

On swiping to the next image in the PhotoSwipe lightbox, the EXIF field is not displayed anymore.
I tried using
x3_photoSwipeLoaded and
pswp.listen('afterChange', ...), but the DOM is either not updated yet or the target
.popup-exif-caption element is missing at that point.
I also tried combining
afterChangewith a
setTimeout() or
setInterval() waiting for the DOM to be ready — but this is unreliable and introduces flickering or duplicates.

My question:
What is the correct or recommended way to reliably inject a custom field (e.g. from EXIF) into the .popup-exif-caption block every time the lightbox image changes?

Code sample (current approach that fails on swipe):

document.addEventListener("x3_photoSwipeLoaded", function (e) {
  const pswp = e.detail;
  let lastImgPath = '';

  pswp.listen('afterChange', function () {
    const curr = pswp.currItem;
    if (!curr?.src) return;

    const imgPath = curr.src.split('/content/')[1];
    if (!imgPath || imgPath === lastImgPath) return;
    lastImgPath = imgPath;

    // try to wait for .popup-exif-caption to exist
    const interval = setInterval(() => {
      const exifBox = document.querySelector('.popup-exif-caption');
      if (exifBox) {
        clearInterval(interval);

        // Clean previous entries
        exifBox.querySelectorAll('.popup-exif-artist').forEach(el => el.remove());

        fetch('/config/exif-data.php?img=' + encodeURIComponent(imgPath))
          .then(res => res.json())
          .then(data => {
            if (!data.artist) return;

            const br = document.createElement('br');
            const el = document.createElement('span');
            el.className = 'popup-exif-el popup-exif-artist';
            el.innerText = 'Foto: ' + data.artist;
            exifBox.appendChild(br);
            exifBox.appendChild(el);
          });
      }
    }, 50);
  });
});

Goal:
I would like to cleanly inject one additional line like:

<span class="popup-exif-el popup-exif-artist">Foto: Richard Dvorak</span>

…under the other EXIF entries, on every image, once and reliably – without relying on setInterval() hacks.
Any insight into a better hook or lifecycle trigger inside X3 that ensures .popup-exif-caption is in place after image change would be much appreciated!

Thanks in advance,
Richard

13 May 2025, 22:49

Wow, that's some effort, glad you got something technical like that working in the first place ... As you must have found out, X3 isn't really designed to be easily modified like this.

For me, I'm not even sure how you inject on the first image on load. I can't remember any event 'x3_photoSwipeLoaded`, and normally, you would not be able to access the internal photoswipe API methods from an external script. Do you have a link so I can at least see what's going on up until now?

Unfortunately, X3 just isn't flexible in regards to this. PHP is rendered into templates, responses are cached based on templates, and then there is no built-in Javascript mechanisms to deal with unexpected EXIF fields. As in your case, you would need to "inject" the data, which is a bit clumsy of course.

RIIID · 14 May 2025, 16:57

Thanks for the feedback — much appreciated!
I've set up a temporary test gallery here:
https://seth.dvorak.photos/Test01/
When you open any image for the first time, you'll see that the EXIF "Artist" is displayed correctly. However, as soon as you swipe to the next image, the data disappears.
For reference, you can inspect the EXIF data directly here:
https://seth.dvorak.photos/config/exif-data.php?img=Test01/IMG_9416.jpg
Let me know if you'd like access to the admin panel to take a closer look.

Thanks again,
Richard

14 May 2025, 22:45

As far as I can see, this triggers once after `DOMContentLoaded` from the MutationObserver.

For triggering consecutive events, I'm not sure where you get this from:

document.addEventListener("x3_photoSwipeLoaded", function(e) {

Surely it doesn't trigger? Try `console.log('x3_photoSwipeLoaded')` inside the event? The main problem here is that the PhotoSwipe object isn't accessible public. Not only because it would be an anonymous function, but also because it's instance name is minified (unknown).

Update: While writing this, I did see that the data did get injected occasionally (randomly) also while navigating. I am not sure what event is triggering this, so now I'm a bit confused. Surely you wouldn't need both MutationObserver and the afterChange event.

Perhaps if you can give me panel login, I can log some events just to see when and how they are triggering? It definitely requires a hacky solution to achieve this, but seeing you are more than half way there, we should be able to complete it somehow.

RIIID · 15 May 2025, 02:07

I've sent a PM with Login data. Take a look.
Not sure where I got "x3_photoSwipeLoaded" from - blind luck ;). Yes, it is weird that at times artists shows.

I think the better way would be to extend the KEHA76_Exif_Reader class and have that data available (in "app/extensions/exif_reader.php")

// artist & copyright
 if(isset($dataEXIF['Artist'])) $myexif['artist'] = $dataEXIF['Artist'];
 if(isset($dataEXIF['Copyright'])) $myexif['copyright'] = $dataEXIF['Copyright'];

And then add these two to as expected EXIF fields in all the right places.
But that would be core changes and something I wanted to avoid.
So far, all I had to change is the .htaccess in /config/ to allow my exif-data.php.

15 May 2025, 04:50

I did some tests ...

RIIID wrote:Not sure where I got "x3_photoSwipeLoaded" from - blind luck ;).

This event doesn't actually get fired at all ...

RIIID wrote:Yes, it is weird that at times artists shows.

All events actually come from the mutationObserver, also when the caption changes. This is "almost" working. However, you are using `querySelector('.pswp__img[src]')` which sometimes returns the PhotoSwipe placeholder <div> which doesn't actually contain any SRC. Therefore it most often fails, but works sometimes (depending on navigation speed vs load speed).

In conclusion, it's the mutationObserver that is doing all the work. The problem here is that it triggers a lot, every time the DOM mutates (which is very often mostly unrelated to Photoswipe). So although this could technically be used, it needs to be optimized quite a lot, getting the correct image src, and only firing when not already triggered or loading. I can't make a recipe without spending a fair amount of time.

RIIID wrote:I think the better way would be to extend the KEHA76_Exif_Reader class and have that data available (in "app/extensions/exif_reader.php")
Code
// artist & copyright
 if(isset($dataEXIF['Artist'])) $myexif['artist'] = $dataEXIF['Artist'];
 if(isset($dataEXIF['Copyright'])) $myexif['copyright'] = $dataEXIF['Copyright'];
And then add these two to as expected EXIF fields in all the right places.

Yes of course. But this then requires an official release and implementation. Modifications to the script you mention must be compiled into TWIG templates, and more importantly, I would need to implement a design by Javascript and CSS into the caption, that suits additional EXIF data.

RIIID · 15 May 2025, 13:06

Thanks so much for looking into this — I had a feeling it might be something like that.
I'm not a developer myself and currently quite busy with photography work, so I might just leave it as-is for now. If possible, maybe you could consider adding this to a future feature request list? I realize most users probably don’t need the Artist EXIF field, but showing the Copyright might actually be useful for many.

Thanks again for your time and support!

Best,
Richard

16 May 2025, 01:06

I felt a bit bad, since you had already created the PHP script to get copyright and it was halfway working.

First I create a more optimal MutationObserver, which effectively triggered once (and only once) when the caption element changed. However, I came to a roadblock when I couldn't from logically figure out which current popup image was active (there are three loaded into the slideshow at any time).

But then I discovered we actually have access to the popup object from global `popupob.mygallery`. I didn't complete the entire script, but it seems this could be done now ...

//
function x3_load(){
  //
  start_caption_observer();
}

//
function start_caption_observer(){
  
  // get popup caption container
  const caption = document.querySelector('.pswp__caption__center');

  // Create an observer instance linked to the callback function
  const observer = new MutationObserver((a, b) => {
    
    // this triggers every time caption changes
    console.log('caption changed');
    
    // however, we might not even need to use MutationObserver, as I managed to locate the Photoswipe object, so we can use the internal PhotoSwipe API instead ...
    console.log('pswp', popupob.mygallery);
  });
  
  // Start observing the target node for configured mutations
  observer.observe(caption, { childList: true });
}

X3Photo Gallery Forums

Multi-user Event Gallery with Photographer Attribution in X312 posts

Multi-user Event Gallery with Photographer Attribution in X3

Re: Multi-user Event Gallery with Photographer Attribution in X3

Re: Multi-user Event Gallery with Photographer Attribution in X3

Re: Multi-user Event Gallery with Photographer Attribution in X3

Re: Multi-user Event Gallery with Photographer Attribution in X3

Re: Multi-user Event Gallery with Photographer Attribution in X3

Re: Multi-user Event Gallery with Photographer Attribution in X3

Re: Multi-user Event Gallery with Photographer Attribution in X3

Re: Multi-user Event Gallery with Photographer Attribution in X3

Re: Multi-user Event Gallery with Photographer Attribution in X3

Re: Multi-user Event Gallery with Photographer Attribution in X3

Re: Multi-user Event Gallery with Photographer Attribution in X3