Last updated June 16, 2012. Created on September 19, 2011.
Edited by Ayesh. Log in to edit this page.

Creating an image hosting site is much easier with Drupal.
You can include Twitter sign in, Twitter post, image slideshows and many of the functionality of a standard photo sharing site just by using Drupal core and some contributed modules.

This documents assumes you have a working Drupal 6 or 7 installation is ready and you have no other extra features/modules enabled. If you have done some work, try to avoid redoing things that are already done.

Getting started with the image content type

First, we need to create a new node type(aka content type) to be used as a photo upload.

Go to Administer > Content > Content Types and add a new content type.
(For Drupal 7, go to Administer > Structure > Content Types )

Enter "Image" as name, and "image" (lowercase) as machine name.
If you want to enable adding description to the images, change "Body" under submission form settings to description. Remove it to omit the field.

Make sure you have setup correct workflow settings. You can set defaults to not promote content to front page (this can be handy to get the "unlisted" functionality of other image hosting sites).
Also adjust comment settings.

Setup the content type's basic functionality

Now, we need to have a file upload field in this new node type.

Drupal 7 comes with this functionality built in. You will need to install ImageAPI, ImageCache, ImageField, CCK and FileField contributed modules manually for Drupal 6.

Then, we need to add a file upload field to the new image content type.
Go to the newly created content type, and then go to manage fields tab.

Add a new field with name Image and field_image as machine name.
Choose Image as the field type.

In the configuration, allow these file types to be uploaded.
jog jpeg png. If you PHP's GD kit can handle animated GIF files, and if you want to allow users to upload GIF files, enable this type as well.
If you want to enable users to upload multiple files, jump to this part of this doc.

Now you have setup the basic content type. Now, we need to adjust how uploaded images are handled.

Go to Administer > Site Building > ImageCache (For Drupal 7, Administer > Site Configuration > Media > Image Styles).

You can add a new preset image style for every image style you need.
For an example, you can have many image formats as you want by adding a new preset. In this tutorial, we need 3 presets.

  • Main image page's preset
  • Thumbnail small (to be used in per-user gallery and other pages)
  • A larger thumbnail (to be used in feeds, photo-of-the-day widgets or whatnot)

Create a new preset that scales the image (no cropping) to a width of 800 pixels (this is just for example). We will be using this preset as the main image on image pages.

Create 2 other presets with smaller sizes. You will need to use Scale and crop effect here as we may need to keep correct aligning in thumbnail grids or other pages.
Chuck Norris may add some rotate or whatever effects you need. Try to be unique.

Extra features for file upload field

You can try FileField Sources module to enable URL-upload feature.
At the moment of writing this, you will need to apply this patch to fix a bug in the module with multi-upload fields. (Drupal 7 only)

You can also try following modules to enable multi-upload functionality (using Flash multi-uploads).

Plupload that worth mentioning. But I'm not including it here because its functionality is different from other modules.

When your site become larger, it would be difficult to manage if all images were in a single folder. You can automatically manage folder structure by using File(Field) Paths module.
As you can't trust that users will always upload images with web-friendly file names, you can install Transliteration module to change bad file names.

(Author's note: I have developed a photo hosting site last year and it became extremely unmanageable after a few weeks. So it's strongly recommended to use this module before facing a big trouble ).

User management

Typically we need to make the user profiles easy to register and easy to reach. So we can enable Twitter and/or Facebook functionality.

Profiles

You can decide which fields you want to let users fill in. A personal home page link, Name, Birthday and country are some small suggestions to get started.
You can use core Profile module, for standard profile functionality. Don't worry about displaying the fields as we talk about it later.
Content Profile module can extend Drupal 6 profile features. For Drupal 7, you will need Profile 2 module.

Twitter integration

Twitter module is a nice addition to a photo sharing site that lets individual user to authenticate your twitter app with their twitter accounts and let users to tweet automatically when they upload the image.
Twitter module requires OAuth module(and it requires AutoLoad) so install both of these modules for your Drupal version.
Install these modules. That's already documented hereOpens in a new tab.

Facebook integration

Facebook integration is relatively difficult to the Twitter integration. You can get started with Drupal for Facebook module. You will need to create a Facebook application using Drupal's tools.
Once configured, you can use fb_stream module to post to the wall of the user.
Please refer this module's docs to setup facebook posting.

Permissions

Drupal 6: Administer > User > Permissions
Drupal7: Administer > People > Permissions

If you want to allow anonymous users to upload photos, you can change permission "create image content" to anonymous users. But this arises a sort of security issue that you have no control over automated bots. Once correctly configured Captcha module can prevent most of the automatic submissions.

Allow users to add twitter accounts and facebook accounts (if you have enabled them).

If you want to allow users to view each others' profiles, allow access user profiles to anonymous and authenticated users. (it's called View user profiles in Drupal 7).

This document also assumes you do not control per-field access permissions. If you do, make sure that users can access the image upload field.

Done!

Congratulations on finishing basics of your brand new image hosting site!
In the inside pages, we will be adding Views to user profiles to display most recent images from user, a page to display most recent images, and so on.
to do: add 2 child pages with,
1. Views setup.
2. Other optional features including Drippic, Views Slideshow and copy-embed-code functionality.

It took more than expected to write this part but the next pages won't take much time i promise.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

parijke’s picture

It has been a while since this announcement....

MalikRizwanAli’s picture

Hi,
I want to view a page with multiple choice of image styles or in a particular image style existed multiple effects.
I choose / select a picture and then select image style or its effect. In other words i view a picture in large resolution and in different resolution on same page.
Thanking in anticipation,
MALIK RIZWAN ALI
malikrizwanali34@yahoo.com

MALIK