I want to add an image to a block located in the First Sidebar in Drupal 7. Does anyone know how to do this? Thank you.

  • Thank you for all your help. i appreciate your time. I will try the suggested solutions and keep you updated. :-) – fuu Jan 2 '12 at 17:52

11 Answers 11


This answer may seem needlessly complex to answer such a simple question, but that is because I have no interest in giving fishes away, I want to teach fishing.

Other answers suggest you embed the image directly in the block with an <img> tag. Personally I oppose that solution because it's "one-off" and prevents the rest of your site's functionality from interacting with the image, such as automatic rescaling of the image.

Two suggestions:

  1. Upload the image to a node, create a View that lists your image, and expose it as a block
  2. Use Panels to control the rendering of your page, and add the image, also from a node

While I strongly recommend using Panels, it's usually quite complicated to setup and understand for Drupal beginners so you may want to skip that.

|improve this answer|||||
  • Panels is also REAL overkill for something like this =\ – Chapabu Jan 2 '12 at 15:36
  • Yes, if that's all that you intend to do, I agree. But I would argue that you should nearly always use Panels for your site anyway, making it, in my view, not overkill. – Letharion Jan 2 '12 at 16:21
  • 1
    I think that's down to developer discretion though. I VERY rarely use panels (I think I've used it once in the last year). I find most things you can do with panels you can do differently and with a lighter footprint. – Chapabu Jan 2 '12 at 17:45
  • 2
    Yes, ofcourse it is :) However, I find that WSCCI lead Larry Garfields comments, for example the only available solution today is Panels speak for themselves. – Letharion Jan 2 '12 at 18:06

The text format used in the block will need to allow images. If you use Filtered HTML, you can add the <img> tag to the allowed tags, or you can use Full HTML (generally not recommended, use with caution!). If you have already uploaded the image via FTP, you can include it using something like <img src="/sites/default/files/image.jpg"/>.

If you want to be able to easily upload and insert images via the user interface, a good and often used combination is WYSIWYG API with the CKeditor library (ckeditor.com)and the Media module. If you use that, add the Media filter to your text format and configure its WYSIWYG profile to use CKeditor. You can then use a 'Media browser' button to upload and insert images (and other media) via the editor.

|improve this answer|||||

First question-What kind of block is it? If it is just a new block that you made from the "add a new block" link, then you could either use HTML code, or as WYSIWYG (What you see is what you get) editor to put one in there.

Second question - Do you have a WYSIWYG module installed?

A good one is CK editor located here

You will also need an upload tool to upload your images, A lot of people use IMCE, which is located here

If you decide to go with CK Editor, you will have to choose IMCE as your file upload tool

Also, once you have these modules installed, you will have to create an input format that will allow for the display of the images you posted, since the CK editor and the like essentially put raw html into your block

Check out this article here - http://drupal.org/documentation/modules/filter. It will give you the low down on input formats

This may seem like a daunting process for those beginning with Drupal, but once you get the hang of it, it will all make sense.

|improve this answer|||||

Just download ckeditor and install it to your drupal 7 then also install all the coresponding modules U will be able to put images even videos at any position in any block ckeditor. ckeditor might give u a problem showing u some errors bt dont worry just un install it ant reinstall it . i did use ckeditor_3.6.2-3_for_drupal_7 and worked for me.

|improve this answer|||||

Personally I have never been a fan of WYSIWYG editors, instead I prefer coding PHP straight in to the body. The Drupal puritans amongst you will no doubt be aghast at the use of PHP in a block but if its only accessible to the admin user then it really isn't a problem.

Whilst these are all valid answers and all work in their own particular use case, the simplest method merely involves having the image reside in your currently enabled themes directory and ensuring that the block content body field is enabled for PHP code.

$theme_name = 'name-of-enabled-theme';

/* optional parameters */
$alt_text = 'image-alt-text';
$image_width = '100';
$image_height = '200';
$image_class = 'the-class-name';
$image_id = 'the-id';

/* pass it all into theme_image() */
print theme('image', array(
                      'path' => drupal_get_path('theme', $theme_name) . '/path/to/image.jpg',
                      'alt' => $alt_text,
                      'width' => $image_width,
                      'height' => $image_height,
                      'attributes' => array(
                                        'class' => $image_class,
                                        'id' => $image_id

This will produce the HTML markup;

<img width="100" height="200" alt="image-alt-text" src="http://www.mydomain.com/sites/all/themes/mytheme/images/imagename.jpg" typeof="foaf:Image" id="the-id" class="the-class-name">

Most of the attributes/parameters really aren't needed as it does the same job when all you pass into the theme function is the theme name and the image path and name. If you are building out a responsive site then don't include the width and height attributes instead use the class name and set it to 100% in your CSS, that's assuming the image container element is also percentage based according to its container.

I have to admit though that the fact that the theme_image() function doesnt produce a self closing image element (<img />) has always troubled me :)

|improve this answer|||||
  • You were going to get an upvote for hating on WYSIWYG editors, but then you suggested putting PHP in the DB so you lost me. Now if you'd use hook_block_view... – Felix Eve Oct 23 '15 at 3:20

I think now in drupal 7 another good option would be using BEAN module ("Bean is an acronym that stands for Block Entities Aren't Nodes"). This module is not as simple as Imageblock but it extends blocks funtionality futher. You can create "content types" for nodes as "block entities". Not only for showing images, also multiple images, or any other field type avaible in drupal field system. I get to BEAN searching for an imageblock type module with an integration to the Media module. I will give a try in my current proyect.

The BEAN module also was covered here:

The last release was on 8-Aug-16 but Maintenance status is Seeking new maintainer and Development status is Maintenance fixes only.

|improve this answer|||||

I am using one really quick and easy solution on my Drupal 7.22 - Wysiwyg editor with TinyMCE 3.5.8 and i have also enabled the IMCE module and IMCE Wysiwyg bridge

You have open

Configuration -> Content Authoring -> Wysiwyg profiles -> Select Full HTML

or which one do you use?

In the setting you have to open Buttons and plugins, than almost on the bottom is IMCE, which add you icon for using its own upload manager.

Its usable everywhere on the site, where is Wysiwyg editor available.

|improve this answer|||||
  • 1
    Hello. How does this answer OP's question? – Mołot Aug 26 '13 at 9:31

Enter bean module.

What is Bean? Think of a Bean as a method to provide new types (compared to node this would be a content type) which then provides an add content interface to create as many blocks as you require. The bean content can then be placed around the site just like any other block.

Quick instructions:

  1. Enable bean and bean_admin_ui module.
  2. Create a bean type to host images.
  3. Add an image field. Configure the field to suit your needs.
  4. Create blocks of the new type.
|improve this answer|||||

Image Block module

Image block is a module where one can create a simple block that includes an image. The 6.x version of this module integrates with Imagecache and 7.x with the core Image module's Image Styles for dynamic image sizing and manipulation.

How to use:

  1. Enable Image block module.
  2. Navigate to admin/build/block.
  3. Click the "Add image block" link in the local tasks menu.
  4. Configure your image block, and save.
|improve this answer|||||

Image block is a module where one can create a simple block that includes an image. The 6.x version of this module integrates with Imagecache and 7.x with the core Image module's Image Styles for dynamic image sizing and manipulation.


|improve this answer|||||

There are many ways to add images in blocks. One way is:

  1. create content type and image fields
  2. Create view for this content type and add image field in view
  3. Asign a block for your view
  4. Add an image you want to display in the block.
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.