Skip to main content

Drupal 6.x - Upload an image in a page and display in a block.

These instructions will give you the ability to upload an image for each node and display it in a block. Works great to display a main image for each page that may need to be above the content and wider etc...

Note: If you want to upload images directly into a page or block content area, try the image picker module with the wysiwyg module...the insert module is also great for nodes but does not work in blocks.

First you will need the following modules:
CCK
Fielfield
Imagefield
Imagecache
Views

Once you have enabled all of the modules we will start with adding an image field to the desired content type (this could be page, blog entry, etc) For this example lets use page as our content type.
So go to Content Management - Content Types - Edit Page - Manage Fields
Create a new field in the new field area. example ( label: "Main Image" , Field Name: field_"main_image", Select a field type: "file" , Select a widget: "image" and SAVE. You can use the default settings and save again.

Next, go to the "display fields" tab and set your new image field to <hidden> for label, teaser and full node.

If you want to be able to upload potentialy larger images and have them automatically resized, then next we need to create an image cache preset for our main image.
Go to Site Building - Imagechache - Add new preset
Call it what you like, in this example "main_image" and add actions as needed. Typically you just need scale with the width set to your needs, but with imagechache effects module you can also add rounded corners reflections and more. Once you have the settings how you want just save the preset

Next you need to create a view with a block.
Go to Site Building - Views - Add
give your view a name like "main_image" leave view type as node and save.
Now in the left under Defaults select block in the drop down and click Add display
click the +  in the fields column and select content from the groups filter and then select your main_image field and continue. check Hide If Empty, Set Label to None and Select your imagechache preset under Format. Then Update.
Click the + in the Arguments column and select groups Node - then Node: NID and continue.
Now set action to take if argument is not present to: Provide default argument. and Default argument type to Node ID from URL, and click update. Then click save for the view.

Now we have a block created by a view that will show up in the blocks page.
Go to Site Building - Blocks
Find your block in the disabled section by the name you gave your view: Block and select the region you want to display it, and save your blocks.

Now just edit or create pages and upload a picture, and it will display in the block instead of in the page content. You can also adjust the position of the image upload in the edit node by moving the field in Content Management - Content Types - Edit Page - Manage fields and use the weight or drag and drop arrows to position as desired.

Hope this helps, and please leave any comments or suggestions below.

Comments

#1 Wondeful!

This helped out tremendously! Cheers!

#2 Just wanted to drop a thank

Just wanted to drop a thank you for this post!

#3 thank you ,it worked

thank you ,it worked

#4 Great for nodes - but how to add to views?

This works great for nodes. In fact I have the header images as a separate content type and use node reference in my page content type to link to the header image, so I can re-use the same images.

But when i display a View eg News teasers, the header image block is obviously empty.

I'm guessing that I could configure the header block view to 'display empty text' if the argument doesn't validate and then put php code in the empty text - but I'm floundering here. Image per content type maybe?

Any ideas?

#5 Right, for views I just use a

Right, for views I just use a separate block with an image in it. The main advantage of this setup is that the content manager can add or change pictures right from the node edit form, with a view there's nothing to edit except the individual nodes, so there is really no way of accomplishing this on a views page. There is another module http://drupal.org/project/area_banner that allows you to upload pictures based on the menu structure, and it works very well for this type of situation as well. Another idea is create a separate views block that just displays the image from your image node, then the image can still be edited by simply going to its url and edit the node. Hope this helps.

#6 another idea for views

instead of creating your view as a page make it a block and have it display below an empty page that only contains your title and hidden main image.