When you add an image in to a TinyMCE field, you can make text flow around the image, rather than being above and below it.
To do this, select the image and navigate to Format > Formats > Alignment in the top navigation bar and select the alignment you require (left or right). This will make the text flow around the image on the opposite side you select. So, if you select align the image left, the text will flow around the right-hand side of the image.
One thing you will notice is that the text nudges up very close to the image. To add spacing, select the image again, right-click and choose "Insert/edit image" and go to the "Advanced" tab. Here you will see vertical and horizontal space. "Vertical space" will give you spacing on the top and bottom of the image, "Horizontal space" will give you spacing on the left and right of the image. This can give you undesired results such as the image being nudged in from the left or right edge so you can be more specific and set spacing per side. To do this you will need to enter the exact spacing for each side of the image in the order of top, left, bottom, right (i.e. clockwise from the top). The following examples are the most common:
- For a left aligned image, add spacing to the top, right and bottom by entering the following in the "Style" field:
- margin: 10px 10px 10px 0px;
- For a right aligned image, add spacing to the top, bottom and left by entering the following in the "Style" field
- margin: 10px 0px 10px 10px;
We've set the margins to 10px (pixels) in the above examples but for larger or small spacing, just increase or decrease the values of the margins.
Comments