How To Add A Slideshow To Your WordPress Blog Post Using Gutenberg

While I’m still experimenting using the new Gutenberg editor on WordPress, I’ve come across the ‘slideshow’ block which many people asked me about in one of my previous posts.

Today, I’m giving it a go and wanted to share with you how to create a slideshow on a blog post. Please note that this is for WordPress.Com users. It may be different for self-hosted bloggers.

  • On the ‘draft post’ screen, click on the ‘add block’ symbol in the top left of your screen.
Click the ‘+’ symbol
  • A new menu will open.
  • Look for the ‘Jetpack’ box and click in it to open it.
  • When the box opens, look for the ‘slideshow’ block.
  • Click on the ‘slideshow’ block.
  • A new block will open.
  • Either drag and drop the photos and images you want to add to your slideshow to the block, upload new ones, or select them from your WordPress media library.

For the purpose of this post, I’m dragging and dropping the photos I want to add to the slideshow from my own photo library.

Click on the side arrows to view the photos in the slideshow.

  • If you want to add captions, add the photos to your WordPress media library, click the edit button, and in the caption area of each photo add your caption.
  • You can also change the size of each photo by clicking the edit button just under the photo.

As you will see, my photos now all have a caption.

If you watermark your photos and images for copyright purposes, like I do, ensure your captions do not overlap the watermark on any images and photos that are in portrait mode. You may have to place your watermark elsewhere on your photos and images. The watermarks I use are small, so they don’t interfere with my short captions.

Any questions?

Leave them in the comments section and I will get back to you.

Bonus

Check out another tutorial from Nancy Ducey on adding a slideshow to your blog post using Gutenberg. It covers a few more things I’ve not mentioned in my post. Click here for full details.

Click here to follow my blogging tips magazine on FlipBoard.

Click here to follow my blogging tips on Mix.Com

Copyright © 2019 hughsviewsandnews.com – All rights reserved.

96 comments

  1. Found this seriously useful post via RoamingAbout. I’d tried to create a post using Guttenberg and had to recreate it again using the classic editor given gallery limitations. I will try my next post using Guttenberg given your tips here. Thank you!

    1. You’re welcome, Lisa. Gutenberg takes some getting used to, but there is a ‘Classic Editor’ block in Gutenberg which you can use for adding images if you don’t like the Gutenberg image blocks. WordPress is still developing some of the image blocks to make them more user-friendly.

  2. Thanks for this, Hugh. I like the idea of having a slideshow but haven’t got round to changing to Gutenberg so I’d be using the current editor if I ever get round to trying.

  3. Hi Hugh, up until now, I don’t think I’ve ever tried a slideshow but I have one going out in my latest post today thanks to your encouragement! Always good to try new things and I’m getting the hang of the whole new editor so I’m on a roll 🙂 . Thanks again and Happy Easter to you.

    1. Fantastic, that’s great to hear, Debbie. I don’t use slideshows on my blog posts, but I know a lot of bloggers who do. I tend to just use a couple of single images or photos per post. However, now I know how to create a slideshow, maybe I will start to add them.

      Happy Easter. 🐣

      1. Just wondering of you know how many photos can go into a slideshow Hugh? I did try to create another one in a recent post and it seemed to only let me have 6 photos but I’m not sure if I was missing something. Do you happen to know?

        1. Hi Debbie, I only tried six in my demo. However, I just tried adding 11 photos on the ‘test ‘ post in my draft folder and, in the preview, the slideshow worked fine with all 11. It could be something to do with the size of the photos you are using. Try reducing the size of some of the photos/images and see if you can then add more. I always reduce the size of my images to 900 x 600 pixels (or as near to that size as possible). If that fails, your next call should be the Happiness Engineers.

  4. Hugh – thank you for directing on how to post a slideshow/gallery. Wouldn’t have known to go there.

    On a different note with an individual photo, can you add tight text around a photo within the same block as the photo? Also notice where you have to be in reader mode to browse free media library in search of photos. Didn’t see where that was different in the new Gutenberg Editor either in the Admin mode.

    1. When you add a photo to your post, there is an option to add a caption (just underneath the photo), Pat. I tried it on a few images I added to some pages on my blog yesterday, and they all worked fine. Also, unlike the captions on the photos in the slideshow on this post, the captions were all centred. I need to play around a bit more with these tools, but I do know that WordPress is also in the process of improving features for images and photos.

      For free images, WordPress has some options when looking in your media library. See the screenshot below (taken from my blog’s media library).

      1. Thank you, Hugh. Didn’t quite look that way on my end but will check again. Maybe I have to be logged in via WordPress rather than user/password.

        On another question on photos. In Word you can wrap text around a photo in a paragraph and resize the photo pulling on the handles around the photo and the text will adjust around it. Have you seen anything like that in bringing in images in a block and combine it with text?

        Thank you again for all your help, Hugh.

        1. I’ve certainly been able to align a photo to the left or right of text (using the alignment buttons) so that the text wraps itself around an image, Pat. That’s something I’ve always been able to do, even in the classic editor. However, with Gutenberg, you can also resize the photo by pulling handles at each side of a photo (something I could not do in the classic editor).

        2. That’s good to hear it’s possible, Hugh. Being new to this new Editor, my first attempts to add text in a block with a photo didn’t work out too well. It’s just going to take more practice and playing around with it. Thank you.

        1. From what I’ve read, all WordPress themes work with Gutenberg, Dan. However, WordPress does say that sometimes they will still find an error with a particular block/theme combination but that this is getting rarer. I’m still reporting the odd bug to them. Some of their themes were designed specifically with Gutenberg in mind like, for example, the new Twenty Nineteen theme. Others themes built and/or updated with Gutenberg in mind are –

          Affinity, AltoFocus, Business, Button 2, Calm Business, Canard, Dara, Dyad 2, Elegant Business, Friendly Business, Gazette, Illustratr, Independent Publisher 2, Intergalactic 2, Ixion, Karuna, Libre 2, Libretto, Lodestar, Modern Business, Penscratch 2, Pique, Photos, Professional Business, Publication, Radcliffe 2, Rebalance, Scratchpad, Shoreditch, Sketch, Sophisticated Business, Textbook, Toujours. Twenty Eighteen. (In fact most of the ‘Twenty’ themes have been updated to work best with Gutenberg.

          Hope that helps.

        2. Thanks Hugh. Apparently, the issue with the captions maybe theme related, in that the caption text isn’t stored in the metadata of the image like it used to be. I’ll have more on this if I can get to the bottom of it.

      1. Your shots are very scenic. I visited England with my parents 40 years ago, in May of 1979. We were lucky to have a solid week of great weather – very warm, but not a drop of rain. I understand Mute Swans are originally from England. Since my blog encompasses walking and nature, I often include Mute Swans in my posts, but I’ve yet to get photos of them with their cygnets, especially the moms with the chicks on their back. I hope to find some this Spring. Even the ducks and ducklings are scarce, but the Canada Geese and their goslings are plentiful and very sweet to watch.

  5. Great, I will tuck this away Hugh and Shelley will like it too. I am so glad you convinced me to try Gutenberg. I have done two more posts since the initial one and today’s post included justification – I remember you mentioned that in your post. I also tried gallery and liked that and centered my photos. So three things – baby steps for now but I’m feeling a bit more comfortable with it now.

    1. That’s fantastic to hear, Linda. Well done for giving it a go. I’m sure you’ll find your confidence with using Gutenberg to get even better the more you use it. For me, now, it’s like being a kid in a sweet store.

  6. Now that is a nice feature. I wonder whether all WordPress themes incorporate the slideshow with Gutenberg. I also like how your captions are in a separate bar underneath. That way, they probably wouldn’t interfere with watermarks. Thanks for this tutorial, Hugh. My plan is to finally update WordPress next week – haven’t done that in months,worried about the site collapsing while on the road – and then introduce Gutenberg. Wish me luck. 🙂

    1. All themes where Gutenberg can be used will have these features, Liesbet. The captions are great, although I didn’t find out if they could be centred. It’s when an image or photo is in portrait mode that the caption may overlap any watermarks.

      Good luck with the updates. You’re certainly doing the right thing by giving yourself plenty of time when doing them.

  7. What an awesome presentation Hugh! Now, since I’m a dinosaur and won’t use Gutenberg, did we ever have the ability to add slideshow on old editor? Asking for a friend! LOLLLLLLLLLLLL ❤

    1. I can’t resist having a look around all areas of Gutenberg, Terri. I’m finding new stuff almost every day. I think WordPress is adding new blocks every month.

      Great to hear about the images showing up great on your Samsung tablet. It’s claimed that Gutenberg is mobile friendly (providing updates have been downloaded).

    1. Support for the classic editor is remaining until the end of 2020, Sue, but don’t get left behind when it’s withdrawn. Guthenberg does need time, but I’ve found it’s actually paying me back in time for using it.

      1. I’ll get round to it when I have time to breathe…which is not just before the big April workshop 😉
        I do object, though, to being forced to use something I don’t need… especially when, for all I have seen of it, it is designed with commercial blogs in mind.
        I have a fear that introducing a more complicated-looking system ( even if it isn’t harder in use) will force a lot of less flexible and tech-savvy bloggers out, when many older and isolated people depend on being able to write and be part of a community.
        (Sorry, I’ll get off the soap box now…)

        1. I was exactly the same when Gutenberg was launched, Sue. I couldn’t see the point of it when we already had an editor that was working mostly well. I’ve always disliked change of any kind. Then I made some time to read some guides and watched some tutorials on how it worked. I set up a ‘Test” post in my draft folder and spent about half an hour a day playing on it. The more I used the new editor, the more confidence I built up using it. Some of the problems I was having using the classic editor (such as my pingbacks not always working) went away once I started to publish posts using Guthenberg. There are still some bugs in it, but I’m now a Gutenberg convert after seeing many of the new features it has. I know it won’t be for everyone, but I’d never have believed that I’d actually be able to say that I do like it.

          Don’t hesitate to ask if you have any questions about using it. I’m still poking around and discovering new stuff (which I’ll be writing about here on the blog).

    1. Thanks, Colline. Under ‘Common Blocks’ there is a ‘Gallery’ block. Also, under ‘Jetpack’ you’ll find the ‘Tiled Gallery’ block. I haven’t tried using them yet (as I tend to only use single photos or images in my posts), but I’m guessing you’d use the same method as the ‘slideshow’ block to set them up.

      1. Thank you Hugh. I will try that as I’ve been switching to the classic editor when I want to insert a gallery. I really appreciate all the advice that you are giving.

        1. WordPress is in the process of updating the gallery features on Gutenberg after feedback from many of its users, Colline. It’s great too that there is a ‘classic’ block which users can switch to if they want to combine some on the classic features on Gutenberg.

  8. Wow! They did a great job of hiding the slide-show block. I never would have thought to open the jetpack! The word itself seemed like a warning “Don’t touch.”

    1. I know. I guess they have to group them somehow. Apparently, ‘Jetpack’ is the name for one of the plugins for WordPress. It’s all very science fiction to me. Blocks you use the most can be found under ‘Most Used’, so it’ll end up in there if you use it a lot.

    1. Hi John, yes all WordPress.Com users can switch between the classic editor and the Gutenberg editor. On a draft post (while in the classic editor) in the menu on the righthand side of the page, click on ‘Learn More’ under ‘Try the new block editor…’ (I’m attaching a screenshot).

      Then click on ‘Try The Block Editor.’ You’ll then be switched over to Gutenberg. To go back to the classic editor, click on the three small dots in the top righthand corner of the screen, scroll down to ‘Switch to Classic editor’ and click on it.

      Hope that helps?

    1. It took me a few attempts, Sean. Once I read the instructions and the guide I attached to my previous post about Gutenberg, I soon got stuck in. I set up a ‘Test’ post in my draft folder. It’s still there, and I’m still using it to explore Gutenberg.

      1. Hugh – can you tell me how to add a caption to a video? I see where it can be added but couldn’t find how to edit it? I’m self-hosted and may be different and writing via Admin side versus Reader side. Thank you!

        1. Hi Pat, I use iMovie on my iMac to add captions to videos and then upload the video to YouTube. If I want to edit any captions, it has to be done on iMovie. This saves me adding videos to my WordPress media library which would take up a lot of space. I have used the YouTube block in Gutenberg but mainly only to add music videos to my Weekend Music Share blog posts. I have, however, added videos to blog posts from the Bloggers Bash meetings I have attended. I could not see anywhere you could add any captions on YouTube, but that does not mean it can not be done.

          I found this on Google, but not sure if it will be of any help to you?

          https://jeremy.hu/wordpress-subtitles-video/

          It may be worth either asking the company who hosts your blog or having a search around Google.

        2. Thanks, Hugh. When I bring in a link from a YouTube video I want to use in one of my posts (not one of mine), it shows where a caption can be added at the bottom but not sure how to get to it.

          It’s all new to me and no doubt there’s going to be a lot of little things like that. Eventually, it shows up. For me, the differences are because I’m self-hosted and login as a user rather than via WordPress to write my posts.

          I’ll check out your link and explore some more. Thanks for all your help.

        3. I know, Hugh, can be complex. Thank you for the pointers. At least, it shows me where to look and another way to try something. It’s all good and I always seem to find a way. Appreciate your help.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.