Adding Images

When you add an image to a paragraph of text, it may not look the way you want it to, like the logo in this paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacinia varius posuere. Aenean et rhoncus turpis, sed porttitor risus. Aliquam blandit dictum leo, vel ultricies purus sodales sed. Nullam feugiat justo congue ultrices accumsan. Aliquam accumsan vehicula enim, eu facilisis felis efficitur vitae. Etiam sed sapien non neque volutpat porta. Sed hendrerit nec ante sed sollicitudin. Morbi eu ipsum vel leo cursus tincidunt. Sed nisl tellus, condimentum sed aliquet commodo, viverra a mauris.

Class="Wrapleft" or Class="Wrapright"

By adding a class to the <img> tag, we can place the image to either the left or right of the text, and flow the text around the image. This paragraph uses the 'wrapleft' class, with the same logo image. Nunc pharetra aliquam felis vel lobortis. Nulla facilisi. Nam euismod leo eros, sed interdum dolor tempor eget. Cras convallis massa tortor, at bibendum lectus sollicitudin a. Nunc vestibulum hendrerit ante, vel euismod arcu malesuada ac. Integer a porta ipsum. Integer mattis elementum mauris. Aenean sed lacus ipsum. Nullam at libero facilisis, mollis mi quis, bibendum metus. Aliquam arcu risus, feugiat pellentesque pretium auctor, tristique ut ex. Vestibulum tempus arcu vulputate dui viverra pulvinar. Vivamus non tincidunt urna, id volutpat nulla. Phasellus turpis tellus, sagittis non tincidunt sit amet, pharetra nec est.Cras ut tellus massa. Pellentesque ac elit ex. Nam id magna elit. Pellentesque arcu eros, luctus sit amet dictum quis, ornare vel dui. Maecenas placerat libero diam, eu venenatis sem ornare sit amet. Nam orci neque, rutrum sed pretium a, feugiat eu mauris. Aliquam sed ultricies felis, eu aliquet felis.Integer a porta ipsum. Integer mattis elementum mauris. Aenean sed lacus ipsum. Nullam at libero facilisis, mollis mi quis, bibendum metus. Aliquam arcu risus, feugiat pellentesque pretium auctor, tristique ut ex. Vestibulum tempus arcu vulputate dui viverra pulvinar. Vivamus non tincidunt urna, id volutpat nulla. Phasellus turpis tellus, sagittis non tincidunt sit amet, pharetra nec est.Cras ut tellus massa. Pellentesque ac elit ex. Nam id magna elit. Pellentesque arcu eros, luctus sit amet dictum quis, ornare vel dui. Maecenas placerat libero diam, eu venenatis sem ornare sit amet. Nam orci neque, rutrum sed pretium a, feugiat eu mauris. Aliquam sed ultricies felis, eu aliquet felis.

Below is the code for each of the above logos. Note the addition of the class attribute.

<img src="https://cdn.givecloud.co/s/files/1/0000/1670/files/twr-canada-logo-medium-1-1.png" alt="" />
<img class="wrapleft" src="https://cdn.givecloud.co/s/files/1/0000/1670/files/twr-canada-logo-medium-1-1.png" alt="" />

This class will also add a 15px margin around the photo on both sides. You may need to adjust the dimensions of the photo slightly to fine-tune the appearance.

Sizing Images

After inserting an image, you can change how it displays by right-clicking on the image and changing options. For example, you can right-click an image, choose Image... and set the width to 100% (or some other percentage) and the height to auto for the image to display best on all screens.  The width is relative to the page layout and the container the image in. Avoiding specific pixel dimensions helps images display well on desktop and on mobile devices.