How you get flowing text around an image

You can place pictures on your web in different ways: either by placing an image widget. or through inserting a picture in a text widget. We will be explaining how to do the latter. The difference between the two is that you can let a longer text flow freely in a picture that is added in a text widget. If you don’t need the appearance it is recommended that you instead drag an image widget to the page.

 

If you are unsure about the text widget itself, then you can check out our guide on ”how to work with text” first.

Guide

 

  1. Bring up the text editor. In this case we are going to place an image at the top right. To achieve this it is easiest to first place the cursor at the top and to the left of the text on the first row.
  2. Then click on the ”landscape”-icon to choose an image.
  3. The first choice is of course to choose an image from your current archive. Click on an image and it will be inserted immediately.
  4. As an alternative you can choose Link. The effect is the same: that the image is visible on your web. The premise is that you know the exact address (URL) of an image at a different address. It’s normally about an agreement that allows you to use the image in question; maybe a parent company or a providers logo. In our example we choose one of the images from the archive.
  5. We have now changed the text so that it belongs together with image. But with the image in the text it usually looks a bit wrong. That’s totally normal. What we need to do now is choose where the image is going to be in relation to the text. Click on the image and then the button in the middle of the image.
  6. A few options are shown.

 

Explanation:

 

 

  • Title. Used as a so called alt-tag, which is shown on the braille screen for the visually   impaired and when the visitor has chosen not to show images or if the image is not displayed for other reasons.
  • Link (URL). In order to make the image clickable and linked to the address you specify it here.
  • Open link in new tab. The link does not open in the same tab or window, but in a new tab or a new window (depending on your setting). 
  • Position. For the placement of the image in relation to the text.

 

 

In this case we place it to the right, to get the image at the top right. The precondition for it to become as we imagined is that the cursor was positioned correctly from the beginning (see paragraph 2)

 

6. Now we are done and the text will be beside the image, both to the left and right! As always, don't forget to save and then either preview or publish!

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk