Options for (Flickr) single image display in LightGallery

Update, for point 1, I think I can hide the title with this CSS:

.photonic-single-photo-header {
	display: none;
   }

• This reply was modified 5 years, 9 months ago by bkpr.
• This reply was modified 5 years, 9 months ago by bkpr.
• This reply was modified 5 years, 9 months ago by bkpr.

Let me start with a more basic question: why not use a regular HTML img tag instead of Photonic for this? The Photonic call is good for all the reasons that you want to eliminate – it automatically shows you the header (it changes dynamically), it links to the page on Flickr etc. But if you don’t want any of that … wouldn’t you be better off simply using the URL of the image in an img tag? It would save your site the effort of making a call to Flickr.

The answer to your second question is roughly the same as the first: wrap your img tag in an a tag and have it link to a larger size image. You can follow the instructions here to link regular images to lightboxes. I will admit though that this particular piece of documentation doesn’t measure up to Photonic’s standards, so if there is any specific lightbox you are looking to make this work with, let me know and I will tell you how.

The answer to your third question is a “no”, but there is a very simple workaround – use the album filter feature. This will create a single thumbnail for your album (it will be based on your cover photo, I believe), and clicking on it will show the gallery in a lightbox. You can add your second gallery at a lower point in the page, but be mindful that this will make two calls to Photonic for the same gallery.

Hey thanks for the quick reply!
Do you mean using an img and a tags with the URLS from Flickr, as opposed to wp-content?

Yes, that is what I mean. You could always write up very simple HTML that way.

Ha! I’ll give that a go, thanks ??

With relation to the no. 3 point, I don;’t think the cover image will be appropriate; what I’m ultimately trying to do is have large single images displayed throughout the text of a blog post, with a full gallery displayed at the bottom. Similar to this example: https://theradavist.com/2019/02/super-stoked-2019-gideons-333-fab-airlandsea-kyler-martz-cascadian-rambler/

• This reply was modified 5 years, 9 months ago by bkpr.

Well, you can make use of the solution for points 1 and 2, and combine it with Photonic’s deep-linking capability.

Basically, if you click on an image within a Photonic gallery, it changes the URL that you are seeing. E.g. this should automatically open the last image in my gallery. You can use the navigation arrows to then browse through the gallery.

So:

1. Pick out your image
2. Identify its deep-link from the gallery
3. Insert the full-size image as you would build out a regular img element
4. Link that to the deep-link that you are getting

Note that there is a risk here: gallery ids are dynamically generated by Photonic. Consequently the deep-link changes if the gallery id changes. So if you are adding galleries to posts, and you are displaying multiple posts in a page, it is very likely that what is a deep-link for a photo on a page today will no longer be the correct deep-link if you add a newer post with a gallery and that pushes down the current post.

To that end deeplinking works best on pages.

• This reply was modified 5 years, 9 months ago by Sayontan Sinha.
• This reply was modified 5 years, 9 months ago by Sayontan Sinha.

Gotcha thanks. To be clear, when you say works best on “pages”, do you mean a single blog post, an example in my case: https://bartkowalski.com/2018/08/hiking-machu-picchu-peru/ or a page like https://www.example.com/contact

I’m clarifying because a “post” and a “page” seem to have different interpretations, at least for me.

Update: the deep linking works well, although it’s a fairly manual process. Thanks!

• This reply was modified 5 years, 9 months ago by bkpr.
• This reply was modified 5 years, 9 months ago by bkpr.

In WordPress parlance the first instance is a “post” and the second is a “page”. Essentially I could go to https://bartkowalski.com/2018/08/ to see a list of posts you made in August 2018. If you were displaying full posts on these archives, then linking to a deep-link would become problematic, because you might end up adding more posts with galleries later in a month.

Yes, I understand. Fortunately for me I do not have a page with full-length posts. The only place the deep-linking gallery situation will happen is on a single post.

Unfortunately there’s a glitch with the deep-linking: the deep-linked image doesn’t seem to trigger the lightbox. It will only open in the lightbox after one of the gallery thumbs (below the text) has launched the lightbox first. See this new public page where I have it all setup: https://bartkowalski.com/2019/02/the-2019-goose/

Without resorting to becoming my personal website troubleshooter, if you have any ideas as to why this might be happening I’d love to hear them. Thanks again!

Hmm… this approach will not work.

It is not that the deep-linking has a glitch; it is just that when you reference an element within the same page, the request doesn’t go to the server (that is the correct behaviour – referencing elements on the same page should not cause a server round-trip). So, when you click on this link from this support page, you will see that the lightbox opens up fine. That is because when your page loads (i.e. a round-trip to the server happens) the lightbox is initialized by default. But once the page is loaded, accessing internal elements is not causing a round-trip, so the lightbox is not popping up.

I am not sure if there is a reliable way to solve this. Maybe consider adding a class to the anchor:

<a href="https://bartkowalski.com/2019/02/the-2019-goose/#gallery[photonic-flickr-set-1]/46449661774/" class='photonic-launch-lightgallery'><img src="https://farm8.staticflickr.com/7904/46449661774_a9886fcf87_k_d.jpg" alt="Drive-side view of vintage titanium Mongoose road bike leaning against a wall" data-no-retina="true"></a>

But this starts getting into the territory of trying to fit a square peg in a round hole.

Thanks again for your thoughts. I think at this stage I’ll just have the individual images open on their own, and leave the gallery separate. This could even be a better user experience than launching the full gallery when someone expects to look at a single image in larger form. For small sets of a few photos, I’ll use the rel=“group1” approach to link them, although this wasn’t working with LightGallery in my quick test yesterday, but it’s likely I didn’t write to code correctly.

Thanks again for your help. I’ve thrown you a few bucks for maintaining such a high quality plugin and being super quick on support ??

although this wasn’t working with LightGallery in my quick test yesterday, but it’s likely I didn’t write to code correctly.

It is more than likely that the plugin is not working here, as it is one of those few features that people do not use. Somewhere down the line I probably lost this as one of my unit test cases, and the later lightbox scripts ceased to have non-Photonic gallery support (standalone images work, but not images grouped with a separate “rel”). It might be a simple matter of me putting in the right documentation for this though.

Hello Sayontan.

A quick follow up question regarding single, manually linked images + opening in the Lightbox. I’ve noticed that if I don’t have any Photonic shortcode on the page, individually linked img links do not open automatically in the Lightbox view, while img links on pages which also have Photonic gallery shortcode *do* open in the Lightbox view. This is true even if thumbs from the Photonic gallery display are never clicked, i.e., Lightbox is never initialed from the Photonic gallery thumbs.

Examples: (pass = cars)
Page with no gallery shortcode:
https://bartkowalski.com/2019/03/single-image-test-without-gallery/

Page with gallery shortcode:
https://bartkowalski.com/2019/03/single-image-test-w-gallery/

Is this expected behaviour? I’m not sure if this is out of your support scope, given I’m asking about pages specifically WITHOUT Photonic code. If this is the case, please let me know.

Cheers
Bart

In 2.21 I made a change to how the JS files for Photonic are loaded. Specifically, I ensured that the JS was only called when the shortcode was being invoked. While Photonic’s JS is not bloated by any means (for all the stuff it does it still features at < 40KB for most lightbox scripts), it still incurs a performance hit on websites when the site has to load a file, and this becomes more pronounced on pages where there is no Photonic.

Shortly after release a user pointed out that there are cases when people use Photonic for non-Photonic galleries – a use-case that I had not considered. If you look at that thread, there are two solutions provided. One really innovative one by another user, and another via a change I made subsequently in 2.22. You can take your pick.

Let me know if you run into any issues.

Thank you.

Both options worked for me but I’m using the checkbox as the shortcode triggers my loading spinner which then doesn’t disappear (assuming because it’s trying to load a generic gallery without any actual parameters (using [photo-gallery] custom shortcode at the top of the post)).

Thanks again for your help and thorough replies. Very much appreciated ??