For a while now it’s been nearly impossible to post something online without including a picture and/or a video. Accordingly, there are various ways to do so with varying layers of complexity. Here we’ll look at quite a few ways you can add images and videos to your posts and pages…and these aren’t nearly all the options out there.
Basic Images
WordPress comes with an Image Block, which is one that I’ve used a lot. It usually is capable of handling all your needs, unless you have something rather exotic that you want to do with a picture.
Currently, when you insert an Image Block, you have the options of uploading (from your computer), selecting from the (WP) Media Library (pics you’ve uploaded earlier), from Google Photos, or from Pexels Free Photos, or inserting a pic from a URL.
I’m pretty sure I’ve only ever uploading from my hard drive or selected a picture already in the Media Library. I just don’t have the need to do otherwise. For example, the image of the pen just below was already in the Media Library.
Since the photos I use most often are roughly the same width as my posts, I usually leave them set a Full Size and center them using the popup menu. I also always add the Alt Text. Not only does this add words to your post (length), it also shows up if, for whatever reason, the image itself is unavailable. In fact, that’s it’s main purpose – being alternative text to the picture.
The other main option you have fore basic images is giving them rounded corners as shown above. This can be effective, but I wouldn’t use it very often.
Advanced Image (PublishPress)
With the PublishPress plugin, you get the Advanced Image Block. You can only grab pics from the Media Library, but you can add an image title and subtitle.
Other changes include picking the color of the text and the “overlay”, choosing the vertical and horizontal alignment of the texts (left at the default center, above), and deciding what to do when someone clicks on the picture. Go ahead…click it. Notice what options are maintained and which are lost.
Note that the Title will add a sub-item to your Table of Contents (assuming you have one, which you should).
Cover Photo
Below is a Cover Block that I gave a Fixed Background and a Linear Gradient Overlay.
A fountain pen, writing
As you scroll down the page, you should see the effect. I bet you’ve seen this on other sites lately, right? Now you know how it’s done. Don’t overdo it.
GIF (Jetpack)
With Jetpack you get the GIF Block with which you can search for and add one of those short, repeating (often annoying) animated gifs.
Pinterest (Jetpack)
The Pinterest Block lets you embed the URL of an image at Pinterest. The danger here, of course, is that the poster of such an image could someday remove it, leaving you with a hole in your post. The alternative is to link only to your own Pinterest posts (assuming you have an account there).
That seems kinda roundabout, but if you want visitors to your site to find your Pinterest page, I suppose it could be useful.
https://www.pinterest.com/pin/953918764792576899/The picture above is obviously not from my own account, so if someday it’s gone….
Image Compare Block (Jetpack)
The Image Compare Block does just what you’d expect. It lets you upload or select two images for a before and after comparison. This assumes that the two images are similar in most ways, but there’s no rule that says they have to be.
For example….
As you can see, the line down the middle is there so you can slide it left and right to get an accurate idea of the difference between the two images.
Okay, here’s a more realistic use of the block. It’s not perfect (my fault…they weren’t the same size to start with), but you get the general idea.
Images Slider (PublishPress)
The Images Slider Block can get a little funky if you use pics of different sizes.
To get these particular images to look somewhat similar, I had to turn off the Full Width and Auto Height options, and then I set the image width to 550 pixels.
Click an image just above to see them in a lightbox. Notice the differences.
The Images Slider also looks terrible when you’re in the WP editor. It also adds sub-items to your Table of Contents, if you add text to your pics.
Slideshow (Jetpack)
To use this similar block called the Slideshow, you’re prompted to create a Gallery in the Media Library. It’s not difficult, just unexpected the first time.
You can opt to have this slideshow play automatically (I didn’t) and to change the transition from Slide to Fade (I did). I also changed the pic size from Large to Medium.
Not bad. Could be worse.
Gallery and Tiled Gallery (Jetpack)
Speaking of the Gallery, WP gives you a basic Gallery Block and Jetpack add a Tiled Gallery Block. Each is shown (in that order) below.
You get more options with the Tiled Gallery – mosaic (default), circles, squares, columns for overall styles. You can round the corners (other than what the circles option does) and you can easily delete or reorder the pics once you’ve added them to the gallery. Just above is a gallery with columns selected. As you can see, you’ll want to be a little careful with this, depending on how many pictures are in your whole gallery. (Four isn’t necessarily a good number.)
Using the same pics in mosaic format, I chose sepia from the popup menu. You can also select, 1977, Clarendon, or Gingham. Play around with that a bit to see what they look like. They each have their uses, if the original pictures are accommodating.
Media and Text Block
This block lets you easily juxtapose an image next to some text, presumably text that describes something about the picture itself – like this text sorta does for the fountain pen, writing.
The text is set to Large by default. I changed the above to Normal and added a Drop cap, just cuz. When set to Large, you probably won’t want to add much text.
Video, YT, Advanced Video (PublishPress), & Embeds
Odds are that, if you want to add a video, you’re going to grab it from YouTube, and there’s a different block just for that purpose. If you have a video hosted on your own site, that’s what the Video Block is for.
The PublishPress Advanced Video Block can handle self-hosted clips, YT, Vimeo, and more, making it one of the more flexible blocks available.
If you choose to use the dedicated YouTube Block (or similar), I recommend embedding the video. It keeps visitors at your site that way. Since YT vids do get taken down from time to time, it’s a good idea to check your embeds once in a while to make sure visitors are seeing what you expect them to see.
I won’t post one in this section for that very reason.
There is also a more generic Embeds Block that you can use to embed videos, images, tweets, audio, and other remote content into your posts and pages. I really never do this, but if you have a reason to – perhaps for tweets and audio – go for it. The same caveat applies as mentioned above.
WordPress.tv Embeds
After a while, all these embeds start to overlap and get a little redundant. But WP does give you a dedicated block for embedding WordPress.tv videos. (Actually, I didn’t even know this existed until I started creating this post. So, don’t feel bad if you’ve never heard about it till now either.)
I found a video that isn’t likely to be taken down, so there you go. All I did to embed it was add this URL to the box in the block: https://wordpress.tv/2019/07/04/matt-mullenweg-matt-on-wordpress/
Instagram (Jetpack)
Finally, I’ll mention the Instragram Block (and the related Latest Instragram Posts Block) which you get with Jetpack. I know Instagram is a big thing – I even have an account – but I have no use for posting pictures from there on any of my own sites. Again, you may see things differently and want to use these blocks. Great!
The Instragram Block itself is just another dedicated embed. It looks like the Latest Posts version wants you to connect your post/page to an Instagram account. I’m not going to do either here. You get the idea by now.
