2.6. Using Images in LiteJazz Regions

Add Banner BlockDrupal provides a myriad of options for displaying images, and numerous modules provide some variation of this capability.

However, you can create a banner block like the one above with a standard Drupal installation by simply inserting HTML code into the block body. You can place images in any LiteJazz region. We'll use the Header region as an example, but the things covered here apply to all regions.

LiteJazz provides a Header region below the Site Title. It is visible on this page as the fabric image. If you want to duplicate the style of banner used on this page, you'll need to start with the image. We placed our image in the /files/images folder of our Drupal site. If you choose to place your images in a different folder, you will want to ensure that Drupal can access this folder and that the file is is readable by Drupal.

Next, point your browser to /yoursite/admin/build/block, click on the the Add Block tab and enter a block description (we called ours 'Banner Block'). For the block body, you'll want to enter the HTML code necessary to display the image. The block body for the banner image on this page looks like this:

<img src="/files/images/banner.jpg" />

Finally, and this is important, change the Input Format of your block to Full HTML. If you do not change the input format to Full HTML, Drupal will not display your image. Then click the Save Block button.

Now that you have a banner block, you can publish it to the banner region. Point your browser to /yoursite/admin/build/block, select the banner region from the drop-down list next to your new banner block, and click the Save Blocks button.