In this tutorial, we have 3 goals:
1. Enable users to upload pictures and embed them into their story posts
2. Create a smaller thumbnail version of that picture that appears in the trimmed post on the front page.
3. Create a photo gallery that builds itself using the embedded images
Step 1: Download, Uncompress, and Upload Required Modules
Download the following modules from drupal.org, uncompress them, and upload the folders to the modules folder on your server
Content Construction Kit - this module allow you to add customized fields to your content types
Image Field - this module works with cck to provide an image upload field
Image Cache - this module allows you to crop, scale, and resize images to make thumbnails and other display images
Views - this module presents multiple nodes in one node and is useful in organizing information on the website
Views Bonus Pack - This is a handy collection of layouts to customize the views output
Step 2: Enable Clean_URLs
Before you can enable the modules, you need to ensure your website has been configured to use clean_URLs. Normally, drupal displays pages showing the query language (example.com/?q=page) but Clean_URLs allows it to display the name in a way that's much easier to remember (example.com/page). Clean_URLs will also help you website to be optimized for search engines, as Google will not index pages using query language. But most importantly for our immediate needs, the Image Cache module needs clean_URLs to be enabled in order to function.
You can enable Clean_URLs by browsing to administer --> site configuration --> Clean URLS. Before they can be enabled, you must run the clean url test. Click the test link. If you are presented with a page that allows you to enable the clean_urls, your server has passed the test - select the "Enabled" radio button and the "Save Configuration" buttom. You're good to go.
If, after running the test, you're presented with a "page not found" message or you're redirected to the home page, you'll need to do a little extra work. Consult the Clean_URLs handbook or inquire with your hosting provider (ask them if your server is enabled for a "mod_rewrite" and if you need an ".htaccess" file in your server - they'll understand). Likely, you'll have to copy and paste some code onto a text file, place it into the root of your server, and rename it rename it ".htaccess".
Step 3: Enable Modules
Browse to administer --> site building --> Modules and enable the modules you just uploaded.
Step 4: Configure Image_Cache
Image cache configuration can look intimidating, but it's really not that difficult. This module allows you to define preset actions that will manipulate the images you imbed into posts, so configuring it just requires setting those rules. Image cache can perform three basic actions:
Scale: Resize an image while maintaining the original aspect-ratio (only one value, width or height, is necessary).
Resize: Resize an image to an exact set of dimensions, ignoring aspect ratio (images may be stretched/squished)
Crop: Crop an image to the rectangle specified by the given offsets and dimensions.
Now, remember our 3 goals: One uploaded image will create a large embedded picture, a small thumbnail picture and a picture for the image gallery. To do this, we're going to create 3 presets - one for each of our goals.
Large Embedded Picture: We want to tell it to scale the picture so that regardless of how big the uploaded file is, all pictures will appear as the same width on in the post. To do this, we only need to scale it based on the width. Give it the name "Main" and select "Create New Preset"
Action #1
From the "add a new action" pulldown bar, select "Scale"
Width: 300
Height: (blank)
Scale: Outside Dimensions
Select: Update Preset
Small Thumbnail Picture: We want thumbnail picture to appear on the front page in the trimmed posts, but since it's going to be so small, we may want to zoom in on the picture a bit. This way, the thumbnail picture will be zoomed in but when users click on the story, they'll see the "main" display you programmed above. To achieve, we need to create 2 preset actions: Scale and Crop. Give it the name "Thumbnail" and select "Create New Preset"
Action #1
From the "add a new action" pulldown bar, select "Scale"
Width: 125
Height: (blank)
Scale: Outside Dimensions
Select: Update Preset
Action #2
From the "add a new action" pulldown bar, select "Crop"
Width: "75"
Height: "75"
X offset: "center"
Y offset: "center"
Weight: "3" (you only need to adjust the weight when creating 2 actions - this tells drupal to perform this action after the lesser weighted action)
Scale: Outside Dimensions
Gallery Display Picture: We also want this upload picture to be added to a gallery page that will build itself. Because pictures can be different sizes, we want to scale and crop these images to appear exactly the same so everything looks uniform. To achieve, we'll again need to create 2 preset actions: Scale and Crop. Give it the name "Display" and select "Create New Preset"
Action #1
From the "add a new action" pulldown bar, select "Scale"
Width: 175
Height: 175
Scale: Outside Dimensions
Select: Update Preset
Action #2
From the "add a new action" pulldown bar, select "Crop"
Width: "175"
Height: "175"
X offset: "center"
Y offset: "center"
Weight: "3"
Scale: Outside Dimensions
Step 4: Add fields to your content type
We now have to tell drupal to which types of post will users have the ability to attach images. Browse to Administer --> Content Management --> Content Types. Here, you can choose to add a new content type or modify an existing content type. For this tutorial, we'll modify the existing content type: Story.
By default, all drupal content types have 2 basic fields: the title field and the body field. We can use the CCK module to add our own customized fields, so we're going to add an image field to the content type, story. From the Content Types menu, select the "edit" link next to the description of "Story". Then, from the top menu of the edit page, select the "Add field" link. Here, you will be provided with a list of field-types you can add to this content.
Because you already uploaded and enabled the "imagefield" module, there should be an option at the bottom of the list for an "Image" field. Give your field a descriptive name, such as "Image", select the "Image" radio buttom, and click the "Create field" link. The next page will allow you to configure this field - you can put a maximum upload size for images and you can specify which folder on your server you want the images uploaded to. You can also add some help text that will appear when users are creating their content and you can specify if this field is required or not (if you want every post to have a picture, click required will ensure that users can't upload stories without pictures). Finally, save the field settings.
After saving, you will be taken to the "Manage Fields" section. Here you can change the weighting of the fields to indicate which will appear first when users are creating their content. By default, it has placed the image below the title and above the body, which I'm happy with, so no changes are necessary.
One last step, click the "Display Fields" link. This controls what information drupal will display. It also lets us tell drupal which Imagecache presets we want to use. We just want the thumbnail picture to appear to appear in the trimmed post, and we want it to be a link to the story. And we want the story to show the "Main" image we created, not as a link. So we want these settings:
Label: hidden (if inline or above is selected, the word "image" will appear next to the picture)
Teaser: thumbnail as link
Full: main
Select update and you're done. Now, if you browse to Create Content --> Story, you'll see an upload box has appeared below the title field.
Step 5: Manipulate the CSS
You're almost there. Now, you can create a story, upload an image, and it will be scaled for the post and cropped to a thumbnail for the front page. Unfortunately, it's not the prettiest looking thing you've ever seen. By default, drupal prints all of the fields as left-justified. If we want to imbed the pictures in the text, we'll have to do a little editing of the CSS.
Using your FTP client, browse to the folder, home/modules/system/ and open the file, defaults.css. In the source code, you should see something like this:
fieldset {
margin-bottom: 1em;
padding: .5em;
}
form {
margin: 0;
padding: 0;
}
hr {
height: 1px;
border: 1px solid gray;
}
img {
border: 0;
}
table {
border-collapse: collapse;}
you need to copy and paste the following text after "hr {}" and before "img {}":
.field-type-image img { float: left; margin: 10px 0 0 10px; }
...so that now it should look like this:
fieldset {
margin-bottom: 1em;
padding: .5em;
}
form {
margin: 0;
padding: 0;
}
hr {
height: 1px;
border: 1px solid gray;
}
.field-type-image img { float: left; margin: 10px 10px 0 0; }
img {
border: 0;
}
table {
border-collapse: collapse;}
Take note of how the code works - specifically the "field-type-image" part. If you add more fields in the future, you can do the same by mimicking this code and changing the field type name (ie, image 2). You could then add fields for more pictures and set them to be alternating between being justified left and right
Step 6: Create a View to display the Images in a Gallery
Okay, one last thing to do. You're almost there. Now we want to create a view that displays all of the pictures as a gallery. To do this, we need to create a view. Browse to Administer --> Site Building --> Views and select the "Add" link. Here's a sample configuration:
Basic Information:
Name: image_gallery
Access: (leave unchecked if you want everyone to see this)Page:
Provide Page View: (checked)
URL: "image_gallery"
View Type: select "Bonus: Grid View"
Use Pager: (checked)
Breadcrumb: (unchecked)
Nodes per Page: 16 (this will give you a 4 X 4 image grid)Block:
Provide Block: (unchecked - this section isn't necessary for our purposes)
Fields
Add Field: select "Image: image (field_image)"
after it appers...
Label: (blank)
Handler: "Group Multiple Values"
Option: "Grid as Link"Arguments
Nothing - this section is not necessary for our purposes.Filters
Add Filter: select "Node Type"
after it appears above...
Operator: "Is one of"
Value: select "story" (or whatever content type your created in step #4)Exposed Filters
Nothing - this section is not necessary for our purposes.Sort Criteria
Add Criteria: select "Random" or "Node Created Time" (depending on what you want)
after it appears above...
Order: If you select Random, this won't matter, Random is Random. If you select "Node: Created Time", set the order to "descending" to have a reverse chronological order (like a blog).
Now browse to http://yoursite.com/image_gallery and look at what you've created (of course, nothing will be there unless you've populated it with stories).
Good work.