How To Add Images And Other Media To A Page or Post

Adding Images and Other Media Adding images and other media files such as videos, documents or PDFs is extremely easy within Hubbli. All your images and files are stored in the Media Library. 

Once they’re uploaded into the Media Library, it’s a very simple matter to insert them into your Page or Post content. In the case of files such as Word Documents or PDFs, if necessary, it’s a simple process to create links to those files so that people can then download them. 

Inserting an Image 

Using the Hubbli media manager, it’s extremely simple to insert, align and link your individual images and image galleries. 

To insert an image into your Page/Post, 

Click the ' Add Media' button and then simply drag your image(s) from wherever they are on your computer, into the browser window. Your file(s) will be automatically uploaded. 

Alternatively, click the Select Files button and then select the file(s) that you’d like to upload, using the dialog window that is displayed. It’s also possible to simply drag your image straight into the Visual Editor, rather than clicking the Add Media button.

No matter whether you’ve clicked the Add Media button or simply dragged and dropped your image into the Visual Editor, once your image is uploaded, your Media Library is displayed, which contains all your previously uploaded images. 

The image(s) that you’ve just uploaded will be automatically ‘selected’ for easy insertion into your Page or Post. 

Selected images are shown with a ‘tick’ icon in the top right corner of the image. 

After uploading your image(s), you can then select other previously uploaded images by holding down the Ctrl key (Cmd key on Macs) and just clicking on them. To deselect an image, click the ‘tick’ in the top right corner of the image. 

At the bottom of the window, you will see a count of the number of images currently selected. There are several options within this Insert Media window to help make it easier to add images to your Page or Post. By default, all previously uploaded images are shown, starting with the most recent uploads. If you’d like to narrow this list down, at the top of the window is a drop-down menu that allows you to filter your displayed images by All media items. 

The properties of the currently highlighted image (i.e. The image with the blue border) will be shown on the right-hand side of the Insert Media window. These properties include the filename, the date the file was uploaded and the image size. It’s at this point you can also change the image Title, Caption, Alt Text and Description for each image, as well as the Alignment, Link and the Size at which the image is inserted. 

  • Title – is displayed as a tooltip when the mouse cursor hovers over the image in the browser 
  • Caption – is displayed underneath the image as a short description. How this displays will be dependent on the Hubbli theme in use at the time. You can also include basic HTML in your captions 
  • Alt Text – is displayed when the browser can’t render the image. It’s also used by screen readers for visually impaired users so it’s important to fill out this field with a description of the image. To a small degree, it also plays a part in your website Search Engine Optimisation (SEO). Since search engines can’t ‘read’ images they rely on the Alt Text 
  • Description – is usually displayed on the attachment page for the media. However, this is entirely up to the theme that is currently in use

Select the image(s) that you’d like to insert into your Page or Post and then simply click the Insert into post button (or if you’re editing a Page, this button will say Insert into page). As mentioned earlier, you can also click the Edit Selection link at the bottom of the window if you’d like to change the order the images are inserted.

Edit or Delete an Image 

There are various options available for adjusting the layout of inserted images. 

After clicking on an image that has already been inserted into your Page or Post, a small toolbar will appear over the image. 

By selecting one of the alignment buttons, you can change the alignment of the inserted image. 

Clicking the Edit icon allows you to edit the image properties. 

Clicking the delete icon will delete the image from your content. It will only remove the image from your Page or Post, it will not delete the image from your Media Library. 

When you click on an image in your Page or Post, as well as the alignment, edit and delete icons mentioned above, the image also displays ‘resizing handles.' These are the small squares you see around the edge of the image. 

To resize your image, simply click and drag one of the corners resize handles. As with any image editing software, though, if you try to enlarge a small image, it will tend to get quite pixelated. It’s always best to insert a large image and then resize down.

Related Articles