5 Ways to Create Image Widgets That Won’t Slow Down Your Site

See bunches of easy ways to make beautiful widgets with single images and gallery layouts that won’t slow down your site.

These are super alternatives to social media widgets that bring in images from platforms like Pinterest and Instagram which cause significant slow downs on your page load time.

See this video on speed tests I did with various Pinterest widgets and code for more on just how much they slow down your site, and why you want to create custom widgets like this yourself instead.

---

Subscribe to the BlogAid YouTube Channel
to more helpful videos like this

---

Video Transcript

 

Let’s start with the most basic way of creating an image widget, and that’s by using the new Image widget that came with WordPress 4.8.

It’s labeled simply Image in the available widgets list.

Let’s place it in our Primary Sidebar widget area.

Give it a title.

Let’s select an image

Let’s grab an image with text over it that I borrowed from my client’s site Meg Hemmelgarn of Green with Décor.

Of course, you already know to input your Alt Text and such, but to make this video quick, we’re going to forego that.

Now that the image is there, you’ll see a field to add a link. That’s great because we can link directly to Pinterest or Instagram, a single blog post, or our category archive page. So, lots of possibilities here.

I’m going to input just the BlogAid home page to keep this fast and simple.

Save the widget.

And let’s see how that looks.

It looks great in the sidebar, but you have no text link.

So, you’ll want to use an image like this that has text over it so folks will know what it’s about and click it.

Okay, let’s try the new gallery widget in WordPress 4.9

This works just like creating a gallery of images for a page or post.

I’m going to select 4 images that I borrowed from client’s site Meg Hemmelgarn of Green with Decor.

Then create the gallery.

In the gallery settings, I’m going to set it to 2 columns.

And you can already see the limitation we’re going to run into.

The Link To settings are limited to

• Attachement page
• Media file
• Or nothing

So, that’s not necessarily going to work well for us, but I want to show you what you can do with this that will save you a ton of time.

Let’s insert the gallery and click Save.

And go take a look on the site

This widget creates an outstanding looking, full width gallery of thumbnails that are cropped nicely and have a bit of margin between them.

Now, even though the linking doesn’t suit our purposes, we can create a nice image from this to use in a widget that does let us link how we need it to, like the Image Widget we created previously.

So, use your favorite screen capture tool. I’m using SnagIt from TechSmith.

This is a super fast way to create a bunch of seasonal collages to use anywhere on your site too.

I’ve actually already saved an image like this so we can use it in the next widget we’re going to try.

Let’s jump back to our widgets.

This time, let’s try the lowly little ole Text widget, which is no longer so pitiful.

The native Text widget has been significantly beefed up in WordPress 4.8 and again in 4.9

Now it’s super easy to add an image, text, links, anything you like.

Let’s give this a title.

I’m going to add a letter as a placeholder for an image for a moment, and then create a new paragraph and add my text of Pin with me.

And I’m going to make a link out of that.

Now I’m going to do something special with it.

Let’s jump to the Text view mode.

Let’s call in a style that is in every Genesis theme.

We’re going to make a button out of this link.

Between the a and href, input class=”button”

That’s all there is to it

Let’s return to the Visual view mode.

Highlight the placeholder text and add an image.

Let’s use the gallery screenshot.

Now, let’s link the image too, because you know that’s what folks are going to click most of the time, even when there is a button.

Click the image once to highlight.

Click the link tool.

Now here’s the trick. Scroll down because the link field is below the image.

And then input your link.

Let’s save this and have a look

Wow, doesn’t that look nice.

And both the image and the button are linked.

Here’s an idea. You could actually create a bunch of these based on seasons, categories, you name it, and then switch the whole widget out any time you like.

Your widgets page has an Inactive Widgets area where you can store the ones you are not using. That way the customization you spent time creating will hold. You can even change the title once it’s in this section so that you know what season and/or category it is. Just change it to Pin with Me or such when you move it back to your active sidebar.

Okay, I want to show you one other way to create image widgets.

We’re going to use the Image Widget plugin by Modern Tribe.

Let’s Activate it.

And then jump back to our widgets area.

You have a new available Image Widget. The one to the left of it is the native WP Image widget, so don’t get them confused.

Okay, let’s place it in our sidebar.

Select your image.

Once you do that, you’ll see all of the plugin options.

Input the title. This will become the title bar of the widget.

You can add Alt text, which I believe overwrites any alt text you may have already assigned to that image.

The related field is probably not what you think. It’s HTML5 rel tags, like rel=author or such. There is a link available if you want to see a full list of those tags. Leave this blank if you don’t know how to use it properly, else you’ll confuse Google.

Then you can add a Caption. Think of this like a regular text field. You can add a link too, but you have to manually code it.

Next is the Link for the image, because folks are 100% more likely to click the image than to click a text link anyway.

The Link ID is like an anchor or jump link, or to call in CSS class.

The next drop-down allows you to select opening the link in the same or new window.

Then you can select the size of the image and the alignment.

Let’s have a look.

Nice and clean.

If you do want a link on your text too, you could steal that button coded one from the other widget, haha.

Okay, the last way I’ll show you how to create an image widget involves straight coding, but we’re going to let WordPress do all the heavy lifting for us. This way may come in handy if you have other code scripts to include too.

I’ve created a page that I saved as a draft.

In it I added one of those gallery screenshots of images from my clients site, Lisa Torres, of Delicious Table.

And below it I added some text and linked both it and the image. Plus I made a button of the text link.

All of this is exactly like what we did in the Text widget.

But now I can also add other code or javascript or whatever else I need.

Then we can jump over to the Text view mode.

And all of that code has been created for us.

Let’s copy that.

Now let’s jump back to our widgets.

This time we’re going to use the Custom HTML Widget because we have some pretend javascript code in this one, right?

Paste it all in and save.

Let’s have a look.

Looks very nice and we have our javascript tracking or other code in there too.

And both the image and button are clickable.

So, now we have 6 different ways to create our image widgets, depending on our needs.

The best part is, we can stop relying on social media widgets that are such an incredibly bad performance drag on our sites, not to mention a security issue.

And we can change these out as often as we like to freshen the look on our sites.

I hope you’ve enjoyed this tutorial on image widgets.

Be sure to subscribe to the BlogAid YouTube Channel for more helpful tips like these.