Adding HTML attributes to media attachments

Omeka S Development
1

Apologies in an advance since this a question coming from someone with somewhat limited knowledge of PHP (me): for items with a JPEG file attached, I’m trying to figure out how to add a custom HTML attribute to the linked image. It’s an attribute so we can use Fancybox.js on the site—data-fancybox="gallery".

So instead of this…

<div class="media-render file">
  <a href="image.jpg" ...>
    <img ... />
  </a>
</div>

…I’m hoping to have this code:

<div class="media-render file">
  <a href="image.jpg" data-fancybox="gallery" ...>
    <img ... />
  </a>
</div>

Is there a way to do that through one of the /view/* PHTML templates? Or would I have to make changes to a different file, like a PHP helper?—and if the latter, is there a way to override the helper via the theme, or would we need to just edit the existing code for that Omeka installation?

For future projects we’ll likely use the native Omeka S lightbox block for our resource pages (thank you for making that an option!!) but we’re in a bind at the moment as we’re working to migrate an existing project into Omeka S with as few visual changes as possible.

(Edited to fix a typo and change the forum category)

2

Hmm, that’s a relatively hard place to make a change like the one you’re looking to make.

The place where that markup lives is the file application/src/Media/FileRenderer/ThumbnailRenderer.php: this is what’s used when we “render” a file that’s going to embed an image, and it’s not something you can override in a theme.

We can do some things to make it easier to change this but that’s how it stands now.

For Fancybox specifically, I’d probably think about just changing the script side so you don’t need the data-fancybox part, something like:

Fancybox.bind('.media-render.file > a', {
    groupAll: true
});
4

Sorry for the radio silence - I posted the question and then was out of the office for two weeks! Bad timing on my part. We quickly came to the same conclusion and went with similar code:

$(function() {
  $(".media-embeds > .media-render.file > a").attr("data-fancybox", "gallery");
  
  $('[data-fancybox="gallery"]').fancybox();
});

Appreciate your help, @jflatnes!