How do I add an image to a block in Drupal 7?

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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.

<?php 
$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 :)

Answer 5

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:

• Overview of the Bean Module
• Creating Block Types with Bean

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

Answer 6

Just download CKEditor and install it to your Drupal 7 then also install all the corresponding modules. You will be able to put images even videos at any position in any block CKEditor.

CKEditor might give you a problem showing you some errors but don’t worry just un install it ant reinstall it. I used ckeditor_3.6.2-3_for_drupal_7 and worked for me.

Answer 7

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?

Edit
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.

Answer 8

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.

Answer 9

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.

Answer 10

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.

https://www.drupal.org/project/imageblock

Answer 11

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.