27 February 2017

Embed Images in HTML for Drupal Content

In this post I am going to discuss the basic snippets of HTML code that I use on a daily basis to insert interesting content into a Drupal based website. By default Drupal allows three levels of HTML in your blog posts, pages, and article updates. These levels of permission are "Plain Text" for zero allowed HTML tags, "Filtered HTML" that allows for limited tags and link creation, and "Full HTML" for using the full set of HTML tags. If you are not familiar with the specifics of Drupal please check out the official documentation by using this link for Drupal 7 and this link for Drupal 8.

Working with Images in HTML

Images are a basic part of most postings on the internet and this is one of the first things that I find clients want to work into their Drupal sites. Let's start dealing with images using a common request I've encountered, promo flyers for music websites. Many independent musicians use flyer sized images on Facebook and Twitter to promote shows and events. They naturally want these updates regularly updated on their websites via a short news update or shareable article. So how do you deal with embedding those in a piece of Drupal content?

Enter the HTML image tag.

<img src="/sites/default/files/image.jpg" alt="Image Description" width="100%">

There are three elements to the above tag. First, the 'src' attribute defines the relative path to the actual image file on the server. By default Drupal's path for public images resides at "/sites/default/files" relative to the root directory of your installation. If you are uploading new images to your site via FTP this should be your default target.

Next we have the "alt" tag. This presents your mouse over text that appears when hovering over the image. This text is also used in screen readers to describe the image to blind and sight disabled people. You don't need to include this in the bounds of your image tag but it is considered good practice to do so.

Finally we come to the "width" attribute. This can be expressed as a percentage of the available space on the page or as a hard coded number of pixels. I like using the percentage because of common issues with mobile adaptable pages. Imagine that you are coding an image for your website on a standard laptop screen. You have about 1000 or more pixels in available screen width. The article column displayed might be 550 pixels wide with the remaining space being used for extra padding near the edge of the screen and perhaps a sidebar for additional site features or ads. If you hard code a value of 450 pixels on the image it will appear to fit with plenty of extra room on the edges of the article's column width of 550 pixels.

The problem appears when switching to a mobile device. Many common Drupal themes are programmed to adapt to mobile screen widths. A screen for an iPhone 5 physically has a maximum of 640 x 1136 pixels. This is much smaller than a full sized laptop display. The website will recognize this and intelligently adapt by moving sidebars and scaling content widths. Now that 450 pixel image might be too large for the resized column and create a broken look by hanging off the smaller screen or displacing other content. By simply coding the width as a percentage instead the image will adapt to the content area's size no matter how it is being displayed.

Further Reading and Documentation

If you learned something useful from this tutorial I highly recommend checking out the official W3Schools HTML Documentation. From there you can learn more about HTML and read about the complete list of the img tag's attributes. You can even take tests, experiment with code, and get certified as an HTML developer from that site.

  • Jeremy Koepke

    Full LAMP stack development expertise combined with 10 years of Drupal experience. Languages include PHP, CSS, HTML, Java, and Visual Basic 2015.



This is for informational purposes.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.