Working with Images on a WordPress Page or Post

We know that on WordPress making images appear as you’d like can be difficult so in this help page we hope to make things easier to understand.

Inserting the image isn’t too difficult. You select the ‘Add Media’ button and then upload the desired file. Images that have been previously uploaded can be found under the ‘Media Library’ tab. However, once the image is inserted, it can be tricky to work with.

How to wrap text around an image

To be able to edit the image’s settings you need to go into the ‘Image Details’ menu.

  • First click on the image, then click on the pencil button.

Screen Shot 2015-01-14 at 13.38.38

  • This will open up the ‘Image Details’ menu, which looks like this:

Screen Shot 2015-01-14 at 13.54.36

 

  • Through this menu you can change the image’s alignment. The default ‘none’ alignment leads to the text appearing like this:

Screen Shot 2015-01-14 at 13.53.17

 

  • However, if you change it to left, the text will wrap around like this.

Screen Shot 2015-01-14 at 13.53.28

 

  • Similarly, aligning the image to the right will make the text wrap around like this:

Screen Shot 2015-01-14 at 13.53.38

 

If the align left and align right buttons don’t work correctly as described, it could mean that some code is missing from your website stylesheet. Get in touch and we can fix this for you.

Adding a Margin (advanced)

Adding a margin, or padding, to your image to prevent it from being squashed right next to the text can be complex.

The safest way to do this is by adding some code to the image.

  • Firstly you need to move from using the Visual Editor to using the Text Editor. To do this you need to click the button on the top right of the editor:

Text Editor image

  • Then you need to add some code to the image you want to change. The original text looks like this:

Original Code image

  • To add the margin you need to add this code:

Code image 1

The numbers represents the size of the padding in pixels. The order they appear in is top, right, bottom, left – clockwise from top. Another way to remember the order is by using the acronym TRouBLe. Keep adjusting the number until you’re happy with how it looks.

  • The final code should look like this:

Final code image

Alternatively, you can use a plugin to simplify this process. The plugin that we feel works best, at the time of writing, is Advanced Image Styles, which you can download here: https://wordpress.org/plugins/advanced-image-styles/

This plugin allows you to change margins in a much more user-friendly way.

However, plugins can be vulnerable to hacks so we recommend that, should you decide to use a plugins, you make sure you keep them up-to-date and always delete plugins that you do not use.

If you have any questions about plugins then get in contact with us.