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.
- This will open up the ‘Image Details’ menu, which looks like this:
- Through this menu you can change the image’s alignment. The default ‘none’ alignment leads to the text appearing like this:
- However, if you change it to left, the text will wrap around like this.
- Similarly, aligning the image to the right will make the text wrap around like this:
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:
- Then you need to add some code to the image you want to change. The original text looks like this:
- To add the margin you need to add this code:
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:
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.