Over
99994
downloads

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, two icons will appear over the image. Clicking the left icon (Edit image) allows you to edit the image properties. Clicking the right icon (Delete image) 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.

Edit an image

After clicking the Edit Image icon (Edit image) the following pop-up window will appear.

Edit an image

There are two tabs at the top of the pop-up window that contain the various image and link properties. The Edit Image tab allows you to change the following settings:

  • Size – The size ‘slider’ displayed next to the image allows you adjust the image size. Sizes range from 130% down to 60%. If you want the image to be displayed at the same size that you inserted, then set this slider to 100%
  • Alignment – Allows you to select how you would like the image aligned. They can be either Left, Centered or Right aligned. Setting alignment to None will remove the other alignment settings. How this affects your image within your content will depend on the current theme in use
  • Title – is displayed as a tooltip when the mouse cursor hovers over the image in the browser
  • Alternative 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
  • Caption – is displayed underneath the image as a short description. How this displays will be dependent on the WordPress theme in use at the time. You can also include basic HTML in your captions
  • Link URL – is the URL that the image links to. Leaving this field blank will mean the image will not have an HTML link assigned to it and will therefore do nothing if the image is clicked. Clicking the None button will remove any link currently set in this field. Clicking the Current Link button will set the Link URL to the default URL, if one is currently set for that image. The Link to Image button will use the URL of the actual image.

Once you have updated the image properties, click the Update button to save your changes. Alternatively, click Cancel to close the pop-up window without saving any changes.

Clicking on the Advanced Settings tab at the top of the above pop-up window allows extra image and link properties to be set. If you’re not familiar with HTML and CSS then it’s best to leave these settings alone.

Edit an image

The Advanced Settings tab allows you to change the following settings.

The Advanced Image Settings change the html tag for the actual image (i.e. the <img> tag):

  • Size – The size ‘slider’ displayed next to the image allows you adjust the image size. Sizes range from 130% down to 60%. If you want the image to be displayed at the same size that you uploaded, then set this slider to 100%
  • Source – is the actual source location of the image. This should not be changed! If you need to changed the image then it’s best to delete the current image from the post and then reinsert the correct image from the Media Library
  • Size Width/Height – These two input fields allow you specifically set the size to display your image. Care needs to taken when changing these values as it will distort your image if they aren’t changed proportionally. Clicking the Original Size button will return the width and height back to their original sizes
  • CSS Class – By default, WordPress will assign several CSS Classes to your image. If, for some reason, there’s other CSS Classes that you’d like to assign to your image then you can add them into this input field
  • Styles – is used to specify ad-hoc CSS styles for your image. These are applied as inline styles using the style attribute
  • Image properties – Border – is used to specify the border width (in px) to display around the image. After changing the value in this field the Styles input field will be updated with the appropriate CSS style
  • Image properties – Vertical space – is used to specify the margin (in px) above and below the image. After changing the value in this field the Styles input field will be updated with the appropriate CSS style
  • Image properties – Horizontal space – is used to specify the margin (in px) on the left and right of the image. After changing the value in this field the Styles input field will be updated with the appropriate CSS style

The Advanced Link Settings change the html link tag assigned to the image, if one is currently set (i.e. the <a> tag):

  • Title – is displayed as a tooltip when the mouse cursor hovers over the image in the browser
  • Link Rel – describes the relationship from the current document to the specified link. More information on the rel HTML attribute can be found on Wikipedia
  • CSS Class – If there is a specific CSS Class that needs to be set on the HTML link then you can add it into this input field
  • Styles – is used to specify ad-hoc CSS styles for your link. These are applied as inline styles using the style attribute
  • Target – Open link in a new window – When someone clicks the image link you can have it open in the same window (default setting) or, if this box is checked, have it open in a new browser window/tab

Once you have updated the image properties, Click the Update button to save your changes. Alternatively, click Cancel to close the pop-up window without saving any changes.