I use NetPhotoGraphics to handle a 2.5 gig gallery, spanning back 20 or so years. The gallery used to be a home grown PHP script, then it was Gallery, then Gallery 2, then ZenPhoto, and now NetPhotoGraphics (which ostensibly is a fork of ZenPhoto, but diverged in a way I’m more supportive of).
Anyway. I use this gallery in conjunction with a WordPress site. I’ll post news on WordPress and link to the gallery. But for years, to do that my choices were:
- make a text link
- make a photo which is a link
- copy all the thumbnails over and link each one
Those all suck. Especially the third, since you can’t (out of the box) custom link images in a gallery in WordPress and frankly I don’t like any of the plugins.
Once upon a time, I used a ZenPhoto plugin, but it’s been abandoned for years and stopped working a while ago. I needed something that had an elegant fallback (i.e. if you uninstall the plugin) and seriously thought about forking the WordPress plugin…
But then I had a better idea.
Why oEmbed?
oEmbed is an industry standard. By having your app (Flickr, Twitter, your WordPress blog) offer a custom endpoint, someone can embed it easily into their own site! WordPress has supported many embeds for a long time, but as of 2015, it’s included oEmbed Discovery. That’s why you can paste in a link to Twitter, and WordPress will automagically embed it!
I maybe wrote an oembed plugin for another CMS so I could embed things into WordPress… Because the other option was a MASSIVE complex WP Plugin and FFS why not?
— ipstenu (Mika E.) (@Ipstenu) September 26, 2021
(Note: I shut down my twitter account in November ‘22 when it was taken over by a narcissist who brought back abuse.)
I just pasted the URL https://twitter.com/Ipstenu/status/1441950326777540609 in and WordPress automagically converts it to a pretty embed. About the only social media company you can’t do that with is Facebook, who requires you to make an app (I use Jetpack for it). Anyway, point being, this is also how tools like Slack or Discord know to embed your content when you paste in a link!
By making an oEmbed endpoint, I allow my site to become more shareable and more engageble, which is a net positive for me. If I do it right, out of the box it’ll allow anyone with a WordPress site (i.e. me) to paste in a URL to my gallery and it looks pretty! Win win!
The NetPhotoGraphics Plugin
Now. I’m a terrible designer, so I literally copied the design WordPress itself uses for embeds and spun up a (relatively) fast solution: oEmbed for NetPhotoGraphics.
The code is one file (oembed.php) which goes in the /plugins/ folder in your NetPhotoGraphics install. Then you activate the plugin and you’re done. There are only one thing to customize, the ‘gallery’ icon. By default it grabs a little NPG logo, but if you put a /images/oembed-icon.png image in your gallery, it’ll use that.
And does it work? Here’s how the first version looked on a live page:
I wanted to limit the images since sometimes I have upwards of 200 (look, episodes of CSI are a thing for me). And frankly pasting in a URL to the gallery is a lot easier than drilling down on a list of a hundred albums. This is exactly what I needed.
Since the creation of that, I worked with netPhotoGraphics and he helped me make it better.
One Bug and a Future
There’s room to grow here. Thanks to S. Billard, we’ve got a lot more flexible. You can override the basic design with your own theme, you can replace the icons, and there are even options to adjust the size of the iframes. Part of me thinks it could use a nicer design, maybe a single-photo Instagram style embed instead of what I have, but that’s not my forte. Also I have yet to get around to putting in ‘share’ options. (Pull Requests welcome!)
And yes, I know the security isn’t ‘enough’ but I wasn’t able to get it to work how I wanted due to a weird bug. You see, I did run into a rare quirk with WordPress due to how I built out the site. IF you have your gallery in a subfolder under/beside a WordPress install AND you try to embed the gallery into that WordPress site, you MAY find out WP thinks your embed is WordPress and not NPG.
In my case, I have:
example.com– WordPressexample.com/gallery– NetPhotoGraphics
I guess WordPress reads a little too deep into who’s WP and who’s not, which resulted in me making this WordPress filter:
add_filter( 'embed_oembed_html', 'npg_wrap_oembed_html', 99, 4 );
}
function npg_wrap_oembed_html( $cached_html, $url, $attr, $post_id ) {
if ( false !== strpos( $url, '://example.com/gallery' ) ) {
$cached_html = '<div class="responsive-check">' . $cached_html . '</div>';
$cached_html = str_replace( 'wp-embedded-content', 'npg-embedded-content', $cached_html );
$cached_html = str_replace( 'sandbox="allow-scripts"', '', $cached_html );
$cached_html = str_replace( 'security="restricted"', '', $cached_html );
}
return $cached_html;
}
Change '://example.com/gallery' to the location of your own gallery install.
No I don’t like this either, but it was a ‘get it done’ moment. Also this is why the iframe security is lacking.