Working with Images

Drupal offers several ways to build almost everything. Adding images to the website is no exception as there are multiple ways to go about it. Adding images to the Media Library allows you to insert images within a Beyond Basics (BB) block. You can also add images using the Image block. Alternatively, images can be added to improve the visual attractiveness of other more complex blocks, like the Card block, the Banner block or the Image with Description block. The question remains, under what circumstances would you want to use specific options, and why.

When to insert an image into a Beyond Basics Block, versus using an Image block

• If you plan on using an image more than once on a website, consider using the Beyond Basic (BB) block – that is, add the image to the Media Library, and place the image within a Beyond Basic block instead of using the image block. Why? That way you won’t have to re-upload the image the next time you want to use it within the website. You can select and insert the image repeatedly.
• Also, the alternative text you entered with the image follows the image when you add it via the media library. So, the next time you select and place that image from the Media Library, you don’t have to reenter the alt text.
• If you want to wrap text around an image, use the Beyond Basic Block.
• If you only plan to use an image once, or want to have it fill the entire space, consider using an image block. The image will fill the entire space (if the original image is as large, or larger than the space you want to display it in) as the image block controls the size of the image.

Tips on working with images and things to consider

• Size the image appropriately before uploading the image on the website. You cannot manually resize images within the text editor once they have been uploaded. A good rule of thumb is to reduce the image size to 800 x 600px - horizontally. (This also reduces the size of the image to > 1 MB). Optimizing images on your website is a best practice for several reasons, but page speed and improved user experience are the two most important ones.

• The image block is a great option if you are still working with the design of a page and need the ability to retain flexibility in your design. While you can still drag a BB block around the screen, it can be more cumbersome once you add text in addition to your image within the beyond basics block – if that is the intention.

• I recommend trying both methods until you find what works best consistently with your workflow, practices, and final use of images. When wrapping text around images, consider how many columns you are working with. When working with images, one or two columns have much more flexibility than working with a three-column design.