Images are often an essential part of good communication. they serve to illustrate, explain and decorate your content. As you might expect, there are a few ways that images can be placed on the page. This article will look at simple images placed one at a time. If you want to have a group of images on the page, they are best added as part of a gallery.
Image Blocks
It is probably easiest to think of images as another kind of block. There is, of course, a block type called image. When you add an image block, you will be asked where to get the image from. The three options are upload, select and from URL.
- Upload lets you add chose an image file on your computer and upload it to the media library on the server. Think carefully about what you select and how it will be used. Prepare your images ahead of time. Make sure they have explanatory names like
sensor-front-view-640x480.pngrather thandcm6719.jpg. Make the image no larger than its intended use requires. Unless you expect the user to download a detailed image or you need to use it as a wide background for a page, the size probably does not need to be more that 1000px across. - Select Image, on this site, will give you three places to get an image from The default option lets you go to the medial library on the computer and select one of the already uploaded images. While using the media library, it is also possible to upload images if you cannot find the one you want. You can also grab images from your Google Photos library or the free image library Pexels.
- Insert from URL allows you to paste in an image URL and have the image delivered from there. Note that the image will then not live on the site’s server. Unless you have explicit permission, it is wrong to link to other site’s images. Not only that, the image may change unexpectedly or be removed.
Single image with no wrap
To get an image centered on the page content with no text wrap around it, create a new image block in the appropriate place. Set the image and check that the mini toolbar for that image block shows the image to be align centre. Experiment with the other options but align centre is the one you want here. You can resize the image while it is selected by dragging the blue handles.
The inspector to the right gives some other options. Note that ‘full size’ may surprise you if the image is small. Try to remember to add some alt text so that screen readers can make sense of the image. Also add a caption if that is appropriate.
Image wrapped left or right
Often it is useful to have an image with text flowing around it. The way this works may be slightly confusing at first but it makes more sense than in Microsoft Word where moving an image can change the tides in Australia.
When you mark an image with an align left or align right style, it means that the image will be aligned in the following block/paragraph. First place an image in a standard image block, then mark it as align left. then add the wrapping text in a block after the image. All the content after the image will wrap until t gets past the image then flow will return to normal. If you are a Word user, think of having an image with wrap set and its anchor at the beginning of the paragraph.
Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.
Overlapping blocks
Things can go wrong if you try to place wrapped images close together without enough text to fully wrap them. even blank paragraphs – which look OK in the editor – will not save you from that.
Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.
Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.
You can, however, try adding hard line breaks to the wrapping text to ensure that the image and text align correctly. Use shift+enter for a hard line break:
Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.
Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.
If this is something that you find you want to do a lot, there are special block to do the job. Look for the media & text block.
This is a media & text block
It makes this kind of content easier
Wide Images
When you place an image on a page, you will see a couple of other options for it in the mini toolbar. These are wide width and full width. Here is what happens when you use those settings. There is a little text above each to show the relationship between the image and the content boundaries. Notice that these two setting do not allow you to resize the image.
Wide Width
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.
Full Width
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.