Home » Blog of Donncha Hughes – Startup Web Training » Working with Images on your Website – Part II

Working with Images on your Website – Part II

The following two tabs change content below.

Donncha Hughes

Sole Trader/ Proprietor
Donncha Hughes is a mentor, trainer and business advisor. I deliver group and one to one training on Wordpress. My background is assisting business with development of marketing, business plans, grant and finance applications. See www.startuphughes.com for more...

This is the second of a two part blogpost that addresses how to ‘work with images for your Website’. The first blogpost talked about sourcing the images and manipulating them in terms of size and adding text as part of the messaging. This second part (originally published in 2015) assumes that you have lots of images that you now want to add to various posts and pages within your website and will discuss:

  • how to insert Media into a WordPress page or post;
  • What is a Featured Image?
  • What is a thumbnail?
  • How to add a slideshow of images to a page or post (or widget area such as sidebar or footer)
  • how to add a gallery of images to a page or post – may or may not be a Menu item called Galley
  • update all of the above with the new WordPress block editor

#.1 How to insert Media into a WordPress page or post

Adding media such as an image or photo to your WordPress site is now fairly easy. In the page that you want to insert the image, navigate to the section of the Visual Editor where the image will be presented and select the button ‘ADD MEDIA’

Add media in WP ii

A pop up box will appear allowing you to pick from images already in the library or to upload images directly from your computer. Follow the instructions. Please note that multiple files can be uploaded at a time and you can decide if you want the image inserted full size or as a thumbnail (150 pixels wide by 150 pixels tall).

Add media in WP Upload

For SEO purposes, all images should be properly labelled with descriptions and ALT Tags.

After each image has been inserted, you can write additional text above or below the image. The images can also be aligned to centre, left or right using the Visual Editor menu.

To delete an image from a page or post, select the image with your mouse and press delete. The image is retained within the Media Library for further use. An image can of course be completely deleted from within the Media library – may be needed when an image needs to be replaced.

#.2 What is a featured image?

There is a box in bottom right corner of the Dashboard of each page and post that allows a Featured Image to be set. Click on the link to either REMOVE or ADD a featured image … follow the instructions.

Depending on the theme, the Featured Image is used for specific purposes. With this theme, the featured image is used on the BLOG page to grab your attention and get you to click on the title to read more. The featured image is not displayed as such on this page.

 What is a featured image

Plugin Special Mention – Lightbox Plus Colourbox

This is a cool plugin that allows images when clicked to pop up in larger display. Information such as the Image title is also displayed.

#3. How to add a slideshow of images to a page or post

I have downloaded several Slideshow plugins and currently have two active on this site – MetaSlider and Smart Slider 3 – both of which are free to use.

Add Slider WP using Smart Slider 3 or Meta Slider

When the plugin is activated a new Item will be added to your Dashboard Menu – Meta Slider and Sliders for the two I use. You can now create as many ‘slideshows’ as you require and insert into post or page using the button which inserts the required ShortCode.

The functionality and options are superb – for instance each instance can link to a page on your website. New slides can be added to each slideshow which will automatically update the page. Slideshows can also be added via widgets to the Sidebar and Footer areas.

#.4 How to add a gallery of images to a page or post?

Recent versions of WordPress have hugely enhanced the ‘Gallery feature’ within the Media Library. A gallery of images can now be put onto any page. In summary, one follows the instructions for adding an Image and select several images to form a gallery. Several galleries of images can be put on one page – you may want to group images by month or event. I have two galleries of photos on my Gallery page. When you click on an image from a gallery of photos, arrows appear allowing you to scroll back and forth between the images in that specific gallery of photos – this functionality is facilitated by the aforementioned Lightbox and Colourbox plugin.

In these instructions, I will outline what settings to pick to create such a gallery.

a. ADD MEDIA (you are already in the Page or Post where Gallery of photos is to be displayed – it can be called Gallery or some other name).

b. UPLOAD Files if required.


Create WP Gallery

d. Select CREATE A NEW GALLERY (blue button in image above) to reveal another screen where you can configure the layout of the gallery. For the lightbox functionality to work, please select ‘Media File’ option within LINK TO dropdown menu. You can also set number of columns to be displayed.

e. Select the IMAGES that you want to include in the Gallery. The number of images selected in tracked at bottom of pop up (see black arrow in image above). If you hold shift key you can select all images within a range simultaneously. The order of the images can be arranged by drag and drop.

Create WP Gallery settings

e. Select INSERT GALLERY (blue button).

How the gallery displays somewhat depends on the Theme that you have selected. To be honest the gallaries in My Gallery do not look fantastic at first view but with Lightbox functionality they do the job fine. In my case, I found that selecting images of similar size makes the gallery look better as presented on the page (might be something to do with how Thumbnails are configured in my Theme so must check that out if I get time).

So here is the finished result with six images (apologies but somewhat difficult to distinguish them but just click on one):

Finally, if you make a mistake such as forget to include an image in the Gallery or want to add one later on, unfortunately you will have to delete the gallery and start again but that won’t delay you too long. To delete the gallery from the page (images are retained in Library), I clicked on the TEXT tab within the visual editor and find the html that refers to the Gallery and delete from there. I then return to the VISUAL tab and continue working.

As always I hope you found this blogpost of use. Comments welcome.


donncha (@donnchadhh)