john pfeiffer
  • Home
  • Categories
  • Tags
  • Archives

drupal 6 image gallery with views


INSTALL DRUPAL

setup your domain / subdomain use your SFTP to upload drual 6 (most recent was 6.16) into the appropriate folder (sub folder?)

Setup the MySQL user & database (write down the user & connection details) modify the settings.php file on the website

download, uncompress (izarc2go), and then upload into DRUPAL-ROOT/sites/all/modules the following modules: admin, captcha, cck, filefield, imagefield

goto yourwebsite.com/install.php

Enable all of the above modules

Create your home page and login page and update the Site Information default front page Modify your login block to appear only on the login page Run Cron and all other etc.


REQUIRED DRUPAL MODULES

cck, views, imagefield, imagecache (which requires imageapi)

http://drupal.org/project/modules (no surprise they're the most downloaded ones...)

also: filefield, token, pathauto

after downloading, extracting and uploading all of the above into

/DRUPAL-ROOT/sites/all/modules

Enable all of them: Administer -> Site Building -> Modules -> List (checkboxes)


CREATE THE THUMBNAIL PRESET

Administer -> Site Configuration -> By Module ... ImageCache UI -> click on ImageCache

Add a new preset: thumbnail -> Add Scale -> 160 x 160

SAVE (we resize the user's uploaded image to make it display properly in the gallery)

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.


CREATE AN IMAGE CONTENT TYPE

Administer -> Content Management -> Content Types (List) -> Add Content Type

Create a new content type called "image"

Image image Title Caption (instead of Body)

SAVE ...

Administer -> Content Management -> Content Types (List) -> "manage fields" -> New Field

Create a field of type "image" (this makes it an "imagefield")

image ... image ... type of data: FILE Form Element: IMAGE

maximum resolution = 640x480

"permitted upload file extensions: png gif jpg jpeg"

File Path: default uploaded image files will be found in files

Change to? Path Settings, File Path: [user-name]/image

File Size Restrictions: Maximum Upload 2M and Node Maximum 10M

Global settings: CHECK REQUIRED, number = 1

SAVE

Note you can rearrange the field order to something like that: Title, Photo, Caption, Menu Settings, etc.


CREATE A THUMBNAIL TEASER

In Content Type "image", Click on the tab "Display Fields"

Field Label Teaser Full node image Above thumbnail_image_linked_to_node Image

(NOTE: THIS is what we defined in the ImageCache module PRESETS)


CREATE A VIEW

Administer -> Site Building -> Views -> Add

Display = Block

In 3rd column locate the Fields options. Click the + icon to add fields. Node: Teaser (checkbox), then click the ADD button remove the label (TEASER)

CLICK SAVE

then click

Adding a block display for custom options

  1. In the dropdown on the left, ensure that Block is selected, and click Add Display.
  2. Under Block settings, click the None link next to the Admin setting. Change Block: Block admin description to 'Recent Stories'.

PROBLEM - TEASER thumbnail is not appearing as the Teaser?!?!?!


ADDING THE BLOCK TO A PAGE

Administer -> Site Building -> Blocks

You should see the Header / Left / Right / Footer sections and be able to drag and drop "recent_photos" block up to a region...


ADDING A PAGE

Try not to get confused once you save a Display = Page (versus the View "default")

Add the Field = Content: image (field_image) ... 
    Then you are given a new set of options: we don't want a label BUT
     Format = Image

Now you will begin to see images... Note that if you have 4 horizontal

-------------------------------------------------------------------------------------

file upload module makes things very easy too... using token module to ensure each user only sees their own directory

After you've created the Photo Content Type (with new field Photo) Don't forget to assign the "photo uploader" profile the create & modify own photo content

Then assign the photo-uploader role to each user? Administer -> User Management -> Roles create an image_uploader role

Administer -> User Management -> Permissions give that role permission for Node Module: Create Image, Edit own Image, etc.

Administer -> User Management -> Permissions

Checkboxes for create/edit/delete PHOTO CONTENT


You could make this gallery your home page... Administer -> Site Configuration -> Site Information (/admin/settings/site-information) (under default front page...)

Note that you might also want to enable the Taxonomy Module Administer -> Content Management -> Taxonomy

You can add Vocabularies: "Gallery" (which the site admin defines) and a second Taxonomy vocabulary called "Tags" which the users fill in...


feeling brave? modify the css in your theme

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; }

e.g. main Click on "Scale" and you can fill in the default 480 width x 640 height


  • « drupal 10 views module create a view block of recent stories
  • drupal imagecache thumbnail teaser not visible »

Published

May 14, 2010

Category

drupal

~780 words

Tags

  • 6 13
  • drupal 43
  • gallery 1
  • image 8
  • views 3
  • with 29