WordPress Content Management: Learn how to insert media into posts and pages in WordPress.
How to Use the New WordPress Block Editor – Your WordPress “Gutenberg” Guide
Included in this tutorial are uploading images, linking to videos and managing the WordPress media library.
The process described in the video and below also applies to adding a single image from NextGen Gallery.
Did you know that the images in these tutorials have all been inserted as single images?
Step 1 – Open the editor and place your cursor
Open the page or post
you want to insert the image into.
IMPORTANT – Place your cursor on the page where you want the image to appear before clicking the insert media button.
Just above the editor tools click the button next “Add Media” – a pop up window appears as shown below.
Alternatively simply drag and drop the images into the editor as shown on the image below bypassing the use of the “add media” button.
Once you drop the images in the editor an upload dialogue box opens.
You can upload one or many images. On most servers you’ll be limited to images of 2MB or less in size, so if you have a high-res digital camera you might need to resize the images before uploading.
To upload multiple images simply select the different images while holding CTRL. You may only insert one image at a time directly on a page.
Once you’ve selected the images, press the Open button. The upload will start, showing a progress bar as it uploads and creates optional images sizes.
Step 2 – Select options
This dialogue provides a lot of options and controls – let’s go through them:
Title – The name of your image. This text may appear when a visitor’s cursor rests on an image. See also SEO for Artists
Caption – the caption text for the image that will appear under the image on your site.
You can also add links into your captions. Please see the Create a Hyperlink tutorial as you a simply create the link using this method and copy and paste it into the caption box.
Alternative Text – a brief description of the image (is used by search engines to index your image). See also SEO for Artists
Description – the description, mainly for use when you use the built in gallery for WordPress.
Alignment – This allows you to set how the image is aligned, none, left, center, right.
Link To – this is the default URL address where the image is stored on your site. But it also allows you to create a link to another website – quickly and effectively. You can also press the three buttons – None, meaning the image has no link; File URL, the default; and Post URL, which will show your image within the design of the site rather than as an image on its own.
Size – choose which size of image to insert. If it’s not too large, you can use the Full Size image – just make sure it fits into the space available. Otherwise, a Thumbnail, by default, is a 150 x 150px square; Medium is resized to fit into a 300 x 300px space and will maintain the aspect ratio. The default thumbnail size can be changed under Settings>Media.
Once you’ve selected your options, press the Insert into Post button to add the image to your content.
The image in the page editor
The image appears on the page and you can apply further adjustments if needed to the settings described above.
To do this hover on the picture, you’ll see a row of icons appear as shown below. The “X” will delete the image from the page (it will still be in the media library) and a pencil to click to edit further. You can also change the float of the image from left, center, right and none.
Apply further image editing
Change your image alignment, captions or add more info.
LINK TO Options
Media File: will link the image to the full size image in a pop up if you have a lightbox plugin installed or to the full size image on a new page.
Attachment Page: most themes have an attachment page that will display the image with a description if you type on in and previous and next links
Custom URL: if you want the image to link to another page the type or copy and paste the URL in box below, removing the default one that links to the image.
None: Select none if you don’t want the image link to any of the above
Resize Image
If needed drag the corners of the image to reduce of enlarge the image. This is particularly handy when trying to get a paragraph of text to align with the image.
Edit Image
Crop, rotate or flip the image from right inside the page editor.
Adding video clips to your posts
Since WordPress 2.9, video embedding facilities have been added to WordPress. Simply put, all you need to do now is get the link for a video, paste into the editor, select it and click on the video link button.
NOTE: If the video you want to embed is one of your own, upload it to the media library, then copy and paste the Link URL provided on to the page/post. Then proceed as outlined on the image above.
Further reading from WordPress https://codex.wordpress.org/Embeds
WordPress Default Gallery
NOTE: THIS PROBLEM SEEMS TO BE FIXED IN 3.5 JUST MAKE SURE YOU SELECT THE APPROPRIATE LINK WHEN INSERTING YOUR IMAGE. SEE STEP 3 ABOVE
Notice the highlighted text on the image below “Gallery (2)”. This is the default gallery that comes with WordPress. On an Artbiz site we use NextGen Gallery in place of the default gallery. You may wonder what this is and you can read all about it at this post WordPress Gallery
Troubleshooting:
When you upload an image on a post or page it gets listed in under the gallery tab. If you insert the image again via the Gallery tab WordPress automatically assigns the attachment template to the image. This is fine if you want to use the built in WordPress Gallery but if you are trying to link out to an external website or just want an enlargement of the image with thickbox, these links will fail.
To correct this, the image “Link URL” needs to be changed to “Link to Image” in order to remove the attachment template that WordPress applies. Update and then open the image once more to type in the external URL if you want to link to another website or page.
Quick Study Video for Inserting Single Images on to a Page
Add Video
Now that you have inserted some media and have typed in some text let’s add a hyperlink to some of the text
Kim,
I have several videos that I’ve loaded to the video page with more to come. When I use the embed feature, the resulting video window takes up a lot of real estate on the page, so instead I linked the YouTube URL to text on the page. Great. Little real estate is used, but when the person clicks, I’d really like it to open into a new window. I’m afraid I’m going to lose people if they have to use the back arrow. Do you know a way I can do this? Thanks!
Jon
Have a look at this tutorial Jon, http://artbiz.ca/school/content-management/create-a-hyperlink-in-wordpress/
Note where it say “Open link in new window/tab”, check that box.
Kim, I’ve looked for how to do this but alas. Perhaps not using the correct meta. I have multiple images for one book. I don’t want 3 separate images (which is what I have now) but want to be able to view those multiple images in one post in the gallery. Is that possible and how? Thanks!
I`m not sure I`m following but my best guess would be either a tag gallery – http://artbiz.ca/school/nextgen-gallery-management/create-a-nextgen-gallery-tag-gallery/
Or, a WordPress Gallery using Jetpack – http://artbiz.ca/school/nextgen-gallery-management/create-a-nextgen-gallery-tag-gallery/
Or, maybe you need to combine all 3 images together using Photoshop and then upload as one image. It would need to be done in an imaging program like PS as images can`t be combined in WordPress.
Hope one of the above works, if not please send me a link to where you`re at.
Kim
Hey Kim! I have a question, I recently changed the content of my welcome page, feature image and body text… no problem! But whenever I or someone else shares my homepage… I still get the Original Image as the default. Which is really NOT cool since it makes it look like I haven’t updated the content since I first launched. Which I hadn’t and I realized that was looking old!
I emptied all the cache’s, removed the graphic’s source from the media library… and I STILL get that Old Image 🙁
Thanks for any suggestions…
b
Did you set a default image in your share plugin or sharing service?
No, and I don’t see anywhere in the share plugin settings to do so… I will contact them to see if they have any suggestions – that’ll take some luck getting a reply 🙂
Hi Kim,
I don’t see a video link button.
A
The easiest way to add video and have it actually work is to upload it to YouTube and then copy and paste the embed code generated by YouTude and paste it into the “Text” view of the editor.
Hi Kim:
I have several questions.
1) when I want to add images to my gallery, I don’t have a choice as to where my images is coming from as shown in your video. I can only import my image from my computer
2) when I upload an image into my gallery, the image doesn’t seem to get copied into the image library. Is this an automatic function or do I have to upload the same image into the image library separately?
3) when I look at my image under “manage gallery”, the meta data is my camera data. Is it possible to create metadata for the image different from the camera data? If so, how do I do it?
Clement
Hi Clement
Okay…
1. Typically you upload your images to NextGen Gallery from your computer. Where did you want to add them from?
2. Your image is not copied to the Media Library when uploaded to NextGen but you can access NextGen Gallery images when inserting media on the page. Look on the left side of the media library interface for NextGen Gallery.
3. You need to add metadata “file info” using Photoshop. Use the this tutorial http://artbiz.ca/school/nextgen-gallery-management/resize-images-for-your-website/
Hi Kim:
Maybe I don’t understand the relationship between the media library and the gallery. I always thought that the media library is where you store all your images and you can pick and choose which ones you want for your gallery. Hence the question of why I don’t have the option to choose the source of my images when uploading to the gallery.
Seems like there are too many places where I have to enter metadata, description for my image – when I create the image (File Info, Save for the web etc) and when I go to the gallery (under manage gallery and album). Am I doing redundant operations? Not sure how the different data relate to each other. Is there one place I need to enter data and have the data propagate to all the other places?
Clement
NextGen Gallery is a very powerful plugin that you can use instead of the default media library. It creates nice looking galleries and has image organization. Whereas the media library stores everything in one interface. NextGen adds the link to the media library so you can insert single images into posts.
If you don’t have the NextGen Gallery plugin then yes you would create your galleries using the media library. Personally I prefer to use the media library for single images like a picture of me for my bio.
It’s always a good idea to add metadata to images, you never know where they will end up in search engines. You have an element of control over that if you add the data.\