WordPress, Jetpack, How-To show a gallery in Carousel by single link or thumbnail

How to launch a gallery in the Jetpack Carousel from a single thumbnail or link without rendering all the gallery as thumbnails in a WordPress Post

I quite like the Jetpack Carousel but unfortunately to have it display a gallery you have to render the entire gallery as thumbnails. What I want to do is launch the carousel from a single thumbnail or link. This gives the advantage of being able to display a couple of choice photos in a post and allowing the reader to view the full set if adequately interested.

So where to start? Well the one minor inconvenience is that you need to be working in Text rather than Visual mode in the WordPress post editor. Then select the Add Media button to create your gallery.
caro1

Then from the Insert Media screen choose Create Gallery.
Insert Media

I’m just going to choose a few random pictures that I have previously uploaded for this example.

Create Gallery

Adding captions and titles will make the carousel display more interesting and informative. Once you are happy with the gallery, insert it and in text mode in the editor it will look something like this:

Gallery code

and in your post preview it will display thus:

which actually doesn’t look too bad but when you have a hundred holiday shots or thirty/forty illustrations as in this post. Then it starts to get a bit messy. What I want to do is just display the thumbnail of the two horses and use that as the link for the entire gallery.

The first step is to preview your post so far, then click on the image that you want to use to launch the carousel. Note, the image you choose to launch the carousel will also be the first image that displays in the carousel.

Carousel

Then copy the address of the page from the top of the browser which should look something like this:
http://redeyedmonster.co.uk/?p=1669&preview=true#jp-carousel-1997
If you don’t mind publishing your post at this point and then selecting an image from the carousel you will find that the link is a lot neater:
http://redeyedmonster.co.uk/#jp-carousel-1997
That is the link you are going to use to launch the carousel. If you just want a text link then you could do something like this in the text editor:
<a href="http://redeyedmonster.co.uk/#jp-carousel-1997">Look at my photos!</a>

Which will render in your post thus:
Look at my photos!

To use one of the gallery thumbnails as an image for the link, select the add media button and select the image you want to use from the media library. It will already be there as part of your gallery.

Insertthumbnail

Select alignment and the image size you require e.g. thumbnail and then in the ‘link to’ section select Custom URL and paste the link to your carousel in the box below.

And that’s all you need to do:

Horses at the hilltop pool

Ta Da! “But wait a minute”, you say, “I still have all these gallery thumbnails clogging up my post!” Now here is the easy part, all you need to do is wrap the gallery code in a div with it’s display properties set to none:

<div style="display: none;">
[gallery ids="2003,2002,1998,1997,1991"]
</div>

That’s it. I hope you’ve found this helpful.