CCK Blocks – Put Drupal Fields into Blocks

ccblocksample

Drupal allows you to do lots of things, but taking a simple content field and putting it in a block can be complex. When would you need to do this? One common example is that you might want to display an image from a content type. There are various ways to do this, but CCK Block is perhaps the easiest.

Don’t be fooled by the use of the name “CCK”. This module works on both Drupal 6 and 7.

CCK Blocks lets you put an image or a text block from an article, page or any content type into any block position on your theme. You can even create special content types if you need them. The only restriction is that you can only put one field in each block. We’ll show you how it works, and you can use your creativity to apply it to your situation.

Step 1. Download, install, and enable the module

tutuploadsStep_1._Download__install__and_enable_the_module..png

Download the module from http://drupal.org/project/cck_blocks.

Go to Modules > Install new module > Browse and Click Install to upload the module you downloaded.

2. Enable CCK Blocks

tutuploads2..png

After it’s uploaded return to the Modules page and make sure the check box is clicked.

Scroll to the bottom of the page and be sure you save the changes.

That’s all there is to the installation. This simple step adds the ability for you to select a field in a content type and make it available for display in a block.

Step 3. Configure a field for display

tutuploadsStep_3._Configure_a_field_for_display.png

Go to Structure > Content types.

Fields are part of Content Types. So open up Content Types.

Step 4. Choose or create a type

tutuploadsStep_4._Choose_or_create_a_type.png

1. You can add a new content type
2. You can manage an existing content type. Click Manage Fields under Operations.

Let’s just take an existing content type and click on Manage Fields. We cover creating content types in our Drupal classes. If you’re a student at OSTraining, refer to the Drupal course.

Step 5. Modify the Image field

tutuploadsStep_5._Modify_the_Image_field-_click_edit..png

You have several fields you can work with or you can add a new one. It’s up to you. Let’s work with the existing Image field. Move to the right of the screen and click on edit to make changes to the image field.

This process would be the same whether you create a type or modify an existing one.

Step 6. Enable the block function

tutuploadsStep_6._Enable_the_block_function.png

At the very bottom of the page you can see the selection that was added by the CCK Blocks module. Choose Enabled and save the settings.

Step 7. Manage the display choices

tutuploadsStep_7._Manage_the_display_choices.png

Return to Structure > Content types and click on Manage Display

Step 8. Edit the image field

tutuploadsStep_8._Edit_the_image_field.png

When you get to the Manage Display tab, find the row with the Image field and click edit.

Step 9. Enable the custom display settings for the appropriate view modes

tutuploadsStep_9._Enable_the_custom_display_settings_for_the_approp.png

Make sure the format is correct and CCK Blocks is checked.

If you want the block to show up when the entire article is viewed, choose Full Content here. You can uncheck Teaser for this demo.

Save any changes.

Step 10. Add the block to the website

tutuploadsStep_10._Add_the_block_to_the_website.png

Go back to Structure and click on Blocks.

Step 11. Choose the region for the block to appear

tutuploadsStep_11._Choose_the_region_for_the_block_to_appear.png

Scroll down. and you will see a new block type created for the image field which you can place in any region you want. I chose Sidebar first.

After selecting a region, scroll down to the bottom of the page,

Click Save.

Step 12. Configure the block

tutuploadsStep_12._Configure_the_block.png

Find the block you added and under the region you added it to and click Configure.

Step 13. Set the visibility for your chosen pages

tutuploadsStep_13.__Set_the_visibility_for_your_chosen_pages.png

Configure the pages on which you want to use the block.

Step 14. Choose what Content types will be associated with the block

tutuploadsStep_14._Choose_what_Content_types_will_be_associated_wit.png

Choose the content types that will use the block. In this case only Articles will have the block. It won’t show if any other content type is visited by the user.

Save any changes!

Step 15. Here’s what an article looks like at this point. No block is showing

tutuploadsStep_15._Here_s_what_an_article_looks_like_at_this_point..png

The reason that no block is showing is that we have not yet uploaded the image to the article. Either create an article or go to an existing one, and upload an image for the image field.

Step 16. Choose the views that to display.

tutuploadsStep_16._Choose_the_views_that_to_display..png

Go to Structure > Content Type > Article and click the Manage Display tab.

You will see that you can manage the default view, the Full content view and the CCK Blocks view.

Step 17. Set the default display

tutuploadsStep_17._Set_the_default_display.png

Click and drag the Image field to the Hidden section on the Default view.

Step 18. Set the full content display

tutuploadsStep_18._Set_the_full_content_display.png

Click and drag the image field to the Hidden section.

Step 19. Manage the CCK view

tutuploadsStep_19._Manage_the_CCK_view.png

Click the CCK Blocks button and make sure the Image field is in the Field section – Above the hidden section.

Step 20. Upload a picture to an article

tutuploadsStep_20._Upload_a_picture_to_an_article..png

Choose an article and click Edit. Upload an image to go with that article.

Once it’s uploaded you need to configure what you see. Normally, without using CCK blocks, the image would display at the bottom of the article, or wherever your theme places the Image field.

You can control what views show the image field and the block.

Step 21. The home page will look like this

tutuploadsStep_21._The_home_page_will_look_like_this..png

Step 22. The Full content page will look like this

tutuploadsStep_22._The_Full_content_page_will_look_like_this.png

NOTE: There are a couple of things you might want to know …

When I did this I kept looking at the site, but didn’t see my changes. I had to keep clearing the Drupal cache. If you don’t get the result you expect, clear the cache (more than once if you have to.)

Known Issue – Requires a patch Read about it here: http://drupal.org/node/833730

From the Drupal forum: “I noticed today that the cck block display settings are overriding the basic display settings. For instance I have field_1, on the basic display settings I have it set to hidden so that it does not render in $content. But I have the display setting in the cck_blocks display settings as default. What I end up with is field_1 displaying in $content and in the cck block that I have added. I’ll see what I can dig up to help resolve this.”

Patch located here: cck_blocks_conten_view-833730-24.patch

At this writing the patch has not been committed to the module, but it has been tested and works.

Related modules For Interemediate to Advanced Users

If you want to have a field editable directly within a block, try editablefields.

Since version 6x-1.2 and 7x-1.0, block titles support tokens from the token module. Use this module, if you want to have a field as block, with another field value as the block title. As tokens are availibla in D7 core, you can use them without installing the token module. However, if you want to see, what tokens are available (many token names have changed), you need to install the token module, as it provides additional GUI support, including information about available tokens.

Author

0 0 votes
Article Rating
Subscribe
Notify of
guest

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
damien_vancouver
damien_vancouver
12 years ago

Great tutorial! I’ve taken over maintaining Drupal 7 cck_blocks and the 7.x-1.1 version contains the patch you mention under “Known Issue”. I also added a README.txt and linked to this excellent tutorial!

kiran
kiran
12 years ago

loved it!

lucid and clear!

Guest
Guest
11 years ago

how do i apply the patch.

i cant access the terminal of Linux because i hosted my website at godaddy and they dont provide me any such features.

please help me out.

3
0
Would love your thoughts, please comment.x
()
x