Take the 2-minute tour ×
Drupal Answers is a question and answer site for Drupal developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
    
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
add comment

8 Answers

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.

share|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
    
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
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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 :)

share|improve this answer
add comment

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.

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

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.
share|improve this answer
add comment

https://drupal.org/project/imageblock

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:

Enable Image block module. Navigate to admin/build/block. Click the "Add image block" link in the local tasks menu. Configure your image block, and save.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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