Add a Photo in Teaser and Body in Drupal 6

This tutorial will teach you how to add a photo in teaser and body of a post in drupal without any programming with the help of ImageCache and ImageField module.


Steps are simple:

Step 1: Upload these two modules in the drupal module directory:
a]. ImageCache and b]. ImageField

Step 2: Install the two new modules by going to Module page of the website.

Step 3: Configure the two modules: Go to administration by module, find ImageCache and setup Presets as follows:

[A]. ImageCache Presets:

[i]. Name space for main content: (This is the picture people will see in each node)

Present namespace: Type main and
click on Create Preset.

Choose Action: Scale it and
update Preset
Setting for Scale: Width – 300 px (This makes sure the picture is set for 300px in
landscape and portrait)

[ii]. Another namespace for teaser
Preset namespace: thumbnail
Action: Scale
Settings: Width – 100, Height – 100
Scale to fit: Outside dimensions
Another Action: Crop it
Seetings: Wdith: 100, Height: 100, Xoffset: Center, Yoffset: Center

Step 4: Now go to administration page of the website and choose Content Type and go to story and add some fields to story content type to add photo in teaser and content
A]. Create New Field: Image
Field Type: Image
And Click Create
Max Resolution for images: 800x600
ImagePath: image
Permitted uploaded extensions: JPG JPEG jpg jpeg

B]. Go to Display Field:
Label: Hidden
Teaser: thumbnail as link
Full: main
And then Submit

Add story and then it should be ok.

 
To make the look of the photo proper in teaser and full node, you can insert few CSS code in modules/system/default.css file. It should work for you but you can change it as per your need.

1. .field-type-image img{
float: right;
margin-left: 10px;
margin-right: 0px;
margin-top: 4px;
margin-bottom: 0px;
border: 0px solid red;
}

2. .field-field-image2 img{
float: left;
margin-left: 0px;
margin-right: 10px;
margin-top: 4px;
margin-bottom: 0px;
border: 0px solid blue;
}
3. .field-field-image3 img{
float: right;
margin-left: 10px;
margin-right: 0px;
margin-top: 4px;
margin-bottom: 0px;
border: 0px solid green;
}

No comments:

Post a Comment

Commonly Used Abbreviations Used Daily

Although, we tend to use short form of long words in daily life but there are many abbreviations which we don't remember. Below is the l...