Looking for a more flexible way to work with images in the new WordPress block editor?
In this post, we’ll show you how you can use Toolset Blocks to create your own static or dynamic image sliders and galleries in the block editor.
If you’re not familiar with Toolset, it’s a suite of tools that help you work with custom content and dynamic WordPress sites.
It can help you add and display custom post types, custom fields, and more. And with Toolset Blocks, you can do all of that using native WordPress block editor.
WP Mayor readers can get an exclusive 20% discount when they purchase Toolset.
Below, we’re going to focus on one specific part of Toolset Blocks – images.
Keep reading to learn how it works and how it can help you build better WordPress sites.
How Does Toolset Blocks Help With WordPress Images?
Toolset Blocks helps you display your WordPress site’s content using the native WordPress block editor – no code required.
We previously wrote about Toolset Blocks here.
You might be saying, “Colin, the block editor already lets you display content – that’s the entire point!”.
The difference with Toolset Blocks is that it also helps you display custom content, like custom fields and taxonomies that you’ve added with Toolset. You can even use the block editor to design the templates for any custom post types that you’ve created.
I’m getting a bit off track, though, because this post is about images.
With Toolset Blocks v. 1.2, you get access to two image-focused blocks:
- Gallery – create grid, masonry, or collage galleries.
- Image Slider – create sliders and carousels with different layouts, captions, and more.
Both of these blocks let you create galleries or sliders from a static set of images, along with plenty of options to control the style and layout of your galleries/sliders.
However, where these blocks get more useful, and where they differentiate themselves from other gallery and slider block plugins, is that you can also dynamically insert images into your galleries and sliders from anywhere on your site.
You could upload images using a custom field that you’ve added with Toolset and then automatically insert those images in a gallery. You could even create a template for a custom post type that you’ve added and then automatically fill the gallery that way.
For example, on a real estate website, you could create a “House” custom post type with an image repeater field to upload images of each house’s interior. Then, you could use those images to dynamically populate a gallery that appears as part of each house’s listing.
Cool, right? I’ll show you how this works in the next section.
How to Use the Toolset Image Blocks With Static Content
Now, I’ll show you step-by-step how to use the new Toolset gallery and slider blocks.
For each block, I’ll start by showing you how to use it with a static set of images. This will give you a good idea of each block’s capabilities.
Then, in the next section, I’ll show you how it works to dynamically populate your galleries and sliders.
Gallery Block
When you insert the new Gallery block, you’ll be able to choose from three different layouts:
- Grid
- Masonry
- Collage
Once you choose your layout, you’ll be able to add images by:
- Uploading new images
- Choosing existing images from your Media Library
- Dynamically populating them from custom fields added to this post (or any other post)
I’ll save the dynamic content for the next section, so let’s just upload some new images for this example:
And voila – you’ve got a gallery. You can then use the block sidebar on the right to configure:
- Styles for your layout, like how many columns to use in a grid or masonry gallery.
- Captions for each image.
- Whether or not to open images in a lightbox.
The grid and masonry layouts are fairly self-explanatory, but the collage layout includes a neat feature that lets you choose from pre-made collage layouts or design your own:
If you design your own layout, you can use a grid system to configure the size and placement of each gallery item, which is really cool:
Software: SnipasteImage Slider Block
The Image Slider block functions similarly to the Gallery block.
When you create a new image slider, you’ll be able to choose from the same three sources:
- Upload
- Media Library
- Dynamic Sources
Then, you can use the options on the side to:
- Change the number of columns. One column would be a traditional slider, while you can create carousels by adding multiple columns.
- Choose different slider styles.
- Control styles.
Now that you know the basics, let’s get into the more advanced use for these two widgets and I’ll show you how you can dynamically populate your galleries and sliders.
How to Use the Toolset Image Blocks With Dynamic Content
While the new Toolset blocks are useful with static images, there are already lots of blocks that can help you create static galleries and images.
Where the new Toolset image blocks get really powerful (and unique) is when it comes to dynamic content.
You can dynamically populate the content of a gallery or slider with images from an Image custom field that you’ve added with Toolset. You can also use a repeating image field, which lets you add as many images as needed to the custom field.
So…how might this work in practice?
To make this example a little more concrete, I used Toolset to create a “House” custom post type. Then, I added a repeating image field where I can upload photos of that house’s interior.
Here’s an example of what the regular repeating image field looks like when I create a new “house”:
Software: SnipasteNow, I’ll show you how to dynamically pull those images into a gallery or slider.
Gallery
When you add a Gallery block, you’ll still be able to choose your own layout and use all the other settings that I showed you before.
Only now, when you see the prompt to add images, you’ll choose Dynamic Sources:
Then, you’ll be able to choose the repeating image custom field as your source:
Once you select that source, you’ll see a preview of your gallery using the images from the custom field that I showed you earlier:
If you were to add or remove images from that custom field, those changes would automatically apply to your gallery.
Image Slider
You can use the exact same approach for your image sliders.
When you add a new Image Slider block, you can choose Dynamic Sources for your images and then select your repeating image field just as I showed you with the Gallery block:
Try Toolset
We’ve teamed up with the team behind Toolset, the page builder which lets you build WordPress sites without coding, to offer you an exclusive 20% discount.
20% Discount
You Can Use Dynamic Content in Other Posts/Pages, Too
In addition to dynamically inserting images for the post that you’re currently working with, you can also dynamically populate a gallery or slider elsewhere on your site.
For example, let’s say you’re writing a blog post where you want to feature images of a house that you just added to the House custom post type.
To get started, you’d add a new Gallery or Image Slider block to the blog post and choose Dynamic Sources just as before.
Only now, in the Post Source drop-down, you select Other Post. Then, you can search for the post that has the images you want to query. In this example, that’s the “House” listing for “123 WP Mayor St”:
Then, you can select the field that you want to query. And once you’ve done that, you’ll see your dynamically populated gallery just as before:
If you were to update the images in the “House” custom post type, those images would automatically update in your blog post.
It works the same for the Image Slider block.
You can also use the Gallery and Image Slider blocks in the templates that you create with Toolset, which gives you another way to harness dynamic content.
For example, you could design the template that you use for the “House” custom post type so that it automatically populates a gallery from each house’s custom fields.
Start Using Toolset Blocks Today
Toolset gives you the power to build custom, dynamic WordPress sites without relying on custom code.
With Toolset Blocks, you can work with your dynamic content right from the native WordPress block editor.
In this post, we’ve highlighted how Toolset Blocks can help you work with images using the new Gallery and Image Slider blocks.
In terms of the settings and style options, the blocks are already flexible and competitive with other gallery and slider plugins.
However, what really sets Toolset Blocks apart is the ability to dynamically populate your galleries and sliders.
You can create repeating image fields using Toolset and then use those image fields to populate galleries and sliders anywhere on your WordPress site, including templates that you create with Toolset.
If you want to see some examples of what Toolset can do and learn how it works, check out the Toolset documentation and reference sites.
And if you want to try Toolset yourself, the link below to get started.
About Colin Newcomer
Colin Newcomer is a freelance blogger for hire with a background in SEO and affiliate marketing. He helps clients grow their web visibility by writing primarily about digital marketing, WordPress, and B2B topics.
Related Articles
-
Many themes come with their own sliders. There are also great plugins that create slides out of anything. Still, in many cases, creating your own slider is the best solution.…
-
WP Bannerize is an amazing Banner Image Manager. In your template insert: , use new shortcode featured or set it like Widget.
-
Nothing is more effective at capturing the fleeting attention of readers than engaging images. Bloggers do well to pepper their posts with strong imaging, and now there is a way…
-
Ever wanted to build a magazine site but don’t know where to start? Sure, WordPress is a great base, but if you can’t code to save your life, you need…
Keep reading the article at WP Mayor. The article was originally written by Colin Newcomer on 2020-09-02 07:00:00.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.