Home

Lullabot

Lullabot Ideas

We know stuff. We empower you to know stuff too.

On Site Drupal Training

We'll come to you! Graduate from your own on-site courses and become Drupalistas!

How to build Flickr in Drupal

Article by Angie ByronAugust 16, 2006 - 7:36pm

Using the delightful combination of Image and Image Exact Sizes modules, two parts Views, and a dash of theming magic, you too can have your very own Flickr clone... in Drupal! This recipe will show you how!

Appetizer: Initial Setup

Modules

(Note: If you don't already have it (for shame!), download the newest spanky copy of Drupal 4.7.)

First, install and enable the modules below at administer >> modules:

  • Image
  • Image Exact Sizes (this module isn't strictly necessary, but it makes all the previews uniform which looks a bit nicer)
  • Views (remember to enable both "views" and "views_ui" modules)

Also make sure the core taxonomy and comment modules are enabled.

Next, configure access permissions under administer >> access control so that authenticated users have the ability to create and edit their own images, and both anonymous and authenticated users can view original images.

Tagging

Next, we need to use Drupal's spiffy taxonomy system to create a "free tagging" vocabulary for images.

  1. Head to administer >> categories and click add vocabulary.
  2. Enter a Vocabulary name of something really original like, Tags.
  3. Under Types, check off image.
  4. Check the Free tagging checkbox.
  5. Submit the vocabluary.

User pictures

The last thing we'll do settings-wise is enable user "avatars" that get displayed on peoples' posts and comments, for that "oh-so-community site" feel. ;)

Go to administer >> settings >> user and set Picture support to Enabled.

Then, under administer >> themes >> configure, check off the User pictures in posts and User pictures in comments.

To add an avatar to your user, click my account, then edit, then Upload a picture. This avatar will then be displayed next to all of your posts and comments.

Main Course: Fun with Views

Now, for the "main course," Views. We'll need two Views: one to give us a list of images by term, so we can replicate this view: http://www.flickr.com/photos/tags/tag/ and one to give us a list of images by user, so we can replicate this view: http://www.flickr.com/photos/nickname/.

Head to administer >> views and click add to get started.

  1. For a Name, enter something like photos_tags.
  2. Give Access to both anonymous and authenticated users.
  3. Give it a good Description, like Bring up a list of photos by tag.
  4. Expand the Page fieldset.
  5. Check Provide page view.
  6. Give it a URL of photos/tags. This is the URL we'll enter to bring up this view. (Note: No forward or trailing slash!)
  7. Under View Type, select Teaser List. This will show the "preview" size images.
  8. Enter a Title of Photos tagged with %1. %1?! What the..?! Just hang in there, we'll get to that in a minute. ;)
  9. Expand the Arguments fieldset.
  10. Under Add Arugment, select Taxonomy: Term Name and click Add Argument. What does this do? It allows us to specify which stuff we want in the URL. So photos/tags/superman will bring up a list of all the images that were tagged "superman." And remember that %1 in the title? That gets replaced with "superman" too, so it becomes "Photos tagged with superman."
  11. Expand the Filters fieldset.
  12. From the Add Flter drop-down, select Node: Type and click Add Filter.
  13. Select Is One Of and Image. This will ensure that only image nodes and not other kinds are displayed in the listing.
  14. Expand the Sort Criteria fieldset.
  15. Under Add criteria, choose Node: Created Time and Add Criteria.
  16. Then, select Descending Order, so the newest images are shown first.
  17. Finally, click Save to save your View.

The "photos by user" View is basically exactly the same, so we can simply clone it. Change the following:

  1. Name: photos_user
  2. Description: Bring up a list of photos by user.
  3. URL: photos/user
  4. Title: %1's photos
  5. Arguments: Click the trash can next to Taxonoy: Term Name and replace it with User: UID is Author.

To test, create a few sample images from create content >> image with various tags. Notice how typing in http://www.example.com/photos/tags/foo will bring you a list of photos tagged as 'foo' and http://www.example.com/photos/users/1 will bring up a list of all photos created by the first user.

Dessert: Theming-o-rama!

One nice feature that Flickr has is it allows you to click a person's nickname to be taken to a listing of all their photos, and click a tag name to be taken to a listing of all photos by that tag. However, by default Drupal links the author name to their user profile, and taxonomy terms to a listing of all content with that term, which may or may not be images. How can we deal with this?

The answer is, with a sprinkle of custom theming.

The file driving the default display of all nodes (linking taxonomy terms to taxonomy/term/# and linking the author name to their user profile) is node.tpl.php in your theme directory. And this works just fine for "normal" nodes like stories and pages. But we want to do something a little different for images.

First, copy your theme's node.tpl.php file to a file called node-image.tpl.php. Here's the one from Bluemarine:

  <div class="node<?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>">
    <?php if ($picture) {
      print
$picture;
    }
?>

    <?php if ($page == 0) { ?><h2 class="title"><a href="<?php print $node_url?>"><?php print $title?></a></h2><?php }; ?>
    <span class="submitted"><?php print $submitted?></span>
    <span class="taxonomy"><?php print $terms?></span>
    <div class="content"><?php print $content?></div>
    <?php if ($links) { ?><div class="links">&raquo; <?php print $links?></div><?php }; ?>
  </div>

There are two things we want to change here:

  1. $submitted
  2. , which displays the "Submitted by [username] at [datetime]" on each node.

  3. $terms
  4. , which is a list of terms linking back to taxonomy/term/[term-id].

So, let's replace the two lines that contain $submitted and $terms with:

    <?php
     
// Load author details
     
$author = user_load(array('uid' => $node->uid));
   
?>

    <span class="submitted">From
    <?php
     
// We override the default user link here, because we want the link
      // to point to the user's gallery, rather than their account page.
     
print l($author->name, "photo/user/$node->uid");
   
?>

    on
    <?php
     
// Let's format a nice date without the time (Aug 16, 2006)
     
print format_date($node->created, 'custom', 'M d, Y');
   
?>

    </span>
    <span class="taxonomy">Tags:
    <?php
     
// Rather than simply print $terms, we want to control where
      // the taxonomy links lead; therefore, we'll compile the list
      // manually.
     
$term_links = array();
      foreach (
$node->taxonomy as $term) {
       
$term_links[] = l($term->name, "photo/tags/$term->name");
      }
     
// "implode" makes the terms comma-separated
     
print implode(', ', $term_links);
    
?>
</span>

Now, on each image node, the author name will link back to photos/user/[uid], and the term names will each link back to /photos/tags/[tag_name].

In case you'd like to try this out on your own site, attached is a .zip file containing three files:

  • photos_tags.view.txt: An export of the photos_tags view. Import it from administer >> views >> import.
  • photos_user.view.txt: An export of the photos_user view. Ditto.
  • node-image.tpl.php: The node-image.tpl.php file, which needs to go in your theme directory (ex: themes/bluemarine).

Download flickr.zip

AttachmentSize
flickr.zip2.49 KB

Comments

bohemicus (not verified) on August 16, 2006 - 8:47pm

Great but...

This is a great way to emulate Flickr on the surface and a really great theming tutorial (from which I'm planning to learn). But it slightly obscures the fact that on the back end image management in Drupal is slightly less than ideal. No way to upload multiple images and edit them and their descriptions and as far as I was able to determine no easy way to store images by user in folders on the server without a bit of hacking. I'm sure the image module will eventually improve but right now it has serious limitations.

nuoc hoa (not verified) on October 13, 2009 - 3:00am

thanks

thank you for your information

shaman (not verified) on November 15, 2009 - 9:06am

lol after 3 years image

lol after 3 years image module haven't improved a bit :D

Anonymous (not verified) on August 16, 2006 - 8:55pm

Link on Digg :)

Link on Digg :) http://digg.com/programming/How_to_build_Flickr_in_Drupal

Gordon Heydon (not verified) on August 16, 2006 - 9:19pm

Views Integration into the Image Module

Hi,

Just to push my borrow, I have created Views integration into the Image module see. http://drupal.org/node/67265 so that you can add an image to the theme.

This works great in 4.7, but is broken in CVS, http://drupal.org/node/78399 (and breaks a lot of other modules) because the l() doesn't allow html in the title field.

Amnon Levav (not verified) on November 20, 2006 - 6:10pm

Gordon's patch is already integrated

Gordon's patch is now already integrated into the standard drupal 4.7.0 views module. Just add a view of a table type, select the image fields, and you will have a much nicer display (e.g. http://drupal.org/files/issues/snapper1156138568692.png).

Rpg (not verified) on November 16, 2007 - 2:42am

Exactly

Yeah that pretty much solves the problem with the patch included in the standard drupal. The new display is pretty nice. I like to see all the improvements we get, some people are doing a very good job.

bcswebstudio (not verified) on December 8, 2006 - 3:10pm

l() allows html in the link

l() allows html in the link text field (is that what you're calling title?) with one of its optional params:

l("<h3>I'm HTML</h3>", "node/1",array("target"=>"_blank"),null,null,null, true);

The last parameter is a boolean value "Is it HTML?".

tayknight (not verified) on August 16, 2006 - 10:00pm

previous / next images like flickr

Check out my blog post at http://willwyatt.com/node/1568 to see how I enabled previous and next photos like flickr does. You can see a preview at http://willwyatt.com/node/1282 in the block called 'Image Gallery Browser'.

Zack (not verified) on August 20, 2006 - 2:37pm

Nice!

Excellent tutorial Angie.

....But you know you could have done this a whole ton easier by using Drupus, 'the Flickr of Drupals'. http://drup.us

Anonymous (not verified) on October 9, 2006 - 7:47am

“Drupus”? This *is* a

"Drupus"?

This *is* a joke, right?

effebi (not verified) on August 25, 2006 - 4:48am

pathauto module

You have to add this document the Pathauto module ;)

Qatar (not verified) on August 27, 2006 - 8:46am

Attachment?

Erm....am I crazy or is there no zip file attached to this node?

effebi (not verified) on September 2, 2006 - 6:16pm

Copy & Paste

just follow this howto and export views conf

John (not verified) on September 3, 2006 - 7:41am

Hmmm. It all looks straightforward but...

I haven't got it working...

4.7 etc all good but the alterations to node-image.tpl don't appear to make any difference as far as I can see and also and perhaps most importantly the views changes described don't produce urls as stated above. I installed pathauto just in case but it is just the same. In addition, there are no attachments to this post as mentioned.

Anyway, I'd love to get this working as it sounds great so if anyone can assist I'd be grateful. Thanks.

rob (not verified) on September 3, 2006 - 10:09am

Attached ZIP?

I'm still unsure howto download the mentioned ZIP file? Does anyone have the files/ZIP?

thanks

rob

September 4, 2006 - 12:38am Angie Byron

Sorry, folks!

I could swear that .zip file was there when I first posted the article. Not sure how that managed to get eaten, but anyway... it's back now. :)

alf (not verified) on September 11, 2006 - 8:14am

one extra view

This worked really well, thanks. I found it useful to have one extra view at 'photos' that would display all images, without any filters.

jango (not verified) on September 13, 2006 - 6:05am

Hello, It’s a grat job,

Hello,

It's a grat job, thanks a lot.

But mine does not seem like an exact Flickr clone. The users just upload images with tags, but how can they create galleries with thier images?

I also want to ask if it is possible to list images, 5 in a row. It currently shows 1 image per row. (I'm sorry if it is a silly question, i'm not well experienced.

Thanks a lot

patchak (not verified) on October 15, 2006 - 6:22pm

I have the same problem, my

I have the same problem, my pictures come out on only one columns, and they even come out with the title and everything...

How can we theme the views so that only the pics and the username are displayed like in a normal photo gallery??

Thanks

My Jewish Clipart (not verified) on November 20, 2006 - 6:37pm

Re: Multiple images in a row

Yes, I've created multiple images in a row using the grid view exported by Drupal's 'Views Bonus Pack' (http://drupal.org/project/views_bonus).

Here is an example: http://myjewishclipart.com/clipart/user/giti - it looks ver

Gianfilippo Ceraselli (not verified) on December 30, 2006 - 10:56am

List and Table types require at least one field.

I've switched from TEASER LIST to BONUS: GRID VIEW on PAGE FIELD but I got this error alert:
List and Table types require at least one field.

What does it mean, did I make something wrong?
Thank you for your patience.

Andy Rush (not verified) on September 19, 2006 - 4:01pm

RSS feeds for users and tags

How can I get RSS feeds for a given user or a given tag after getting all this working (which I did ;-) ) ?

Andy Rush (not verified) on September 20, 2006 - 7:11am

RSS feeds for users and tags redux

OK I got the RSS feeds working for users and tags (answer is here: http://drupal.org/node/83597), but you have to change the access control for content to be accessible for anonymous users, which is OK I guess. My question now is how can you set this up to have some photos "public" and have some private like the "friends and/or family" designation in Flickr?

Anonymous (not verified) on October 3, 2006 - 4:13pm

combining both views?

This works great - thanks for the clear instructions!

I'm trying to do a more complex version, displaying all images with a certain tag AND a term from another taxonomy, but in adding that second taxonomy, all images are being filtered out (even ones with the tag and the taxonomy both selected).

Any ideas on how to do this?

alexcg (not verified) on October 3, 2006 - 11:10pm

Users view not working...

Hmmm...the tags view works fine here, but the user view just brings up a title of: 's photos

Tried following the tutorial above and downloading the file and importing it, but same result every time (at least for photos/user/admin)

Amnon Levav (not verified) on October 25, 2006 - 9:42am

How to build YouTube clone in Drupal?

Building a YouTube clone in Drupal a good subject for one of your next articles...

Amnonm Levav (not verified) on November 20, 2006 - 12:47pm

YouTube site recipe

Here is a starter for a 'YouTube'-style site implemented in Drupal: http://www.tunaspecial.com/?p=162

They did integration with Amazon s3 to store videos remotely.

Amitai (not verified) on October 25, 2006 - 2:32pm

Category module

Hi,
Great post! One question:
* I'm not a programmer, so can someone tell me what 'node-image.tpl.php' should look like if I'm using the 'Category' module?

Jim from Austin (not verified) on October 27, 2006 - 12:46pm

Wildcard in Breadcrumbs

Excellent Tutorial - Thanks!

When I click on a term to view all images tagegd with that term my breadcrumbs read:

Home >> Photos Tagged with %1

Beneath the breadcrumbs the view title prints correctly (ie Photos tagged with red, blue, green). Do I need to define %1 somewhere else?

Anonymous (not verified) on December 29, 2007 - 10:03am

the same issue for breadcrumb

I'm doing an hard work to provide the community with a self publishing software for inkscape users both amatorial and professionals.
i took information from different tutorials, expecially "uprofile" tutorial, then i came into this and i solved the problem about title in the "user gallery" view.
But then i saw this problem with the breadcrumb, showing the %1 instead of replacing with the user id.
Did you solve this?
Thanks,
Da.

Amnon Levav (not verified) on November 13, 2006 - 2:29am

Drupal FotoNotes

Also take a look at the new drupal fotonotes module (http://drupal.org/project/imagenotes) , which enables open flickr-like photo-notes specification.

ahoeben (not verified) on November 13, 2006 - 3:22am

me.module

One of Flickr's little gems just came to Drupal:

http://flickr.com/photos/me
http://flickr.com/people/me
etc
These urls only work if you're logged in ofcourse, but they relay you to your 'own' pages without having to type your full account name.

In Drupal that's even more useful than in Flickr, because in Drupal you have to remember your (numeric) user id to get at the proper page. But now there's me.module!

http://drupal.org/project/me

My Jewish Clipart (not verified) on November 21, 2006 - 3:24am

Adding taxonomy term description to the first view

The photos/tags is largely helped by adding a taxonomy term description below the taxonomy term name.

To do it, open the 'header' section of the view, select PHP input format (make sure you are logged as admin or have sufficient permissions, otherwise this filter is disabled), and paste the following code:

<?php

$term_name
= arg(2);
$matching_terms = taxonomy_get_term_by_name ($term_name);
if (
count($matching_terms) > 0) {
  print
'<p>'. $matching_terms[0]->description . '</p>';
}
?>

Anonymous (not verified) on March 27, 2007 - 8:51pm

Applying this principle to achieve a view single thumb per user

Hmmm, this little code snippet looks the most promising yet.
What I want to do is have a gallery front page view which lists users and provides one sample image from each.
Would this be possible using a similar argument structure?
If so can you give me any help in coding it since I'm no coder.

Joey (not verified) on November 21, 2006 - 8:20pm

Page not Found

Hopefully someone can help me. I followed the steps of the tutorial. However I am having one problem. When I click on the tag instead of listing the photos I get Page not found. However when I am in the admin view it lists the pictures as it should.

Anonymous (not verified) on December 2, 2006 - 2:14pm

Taxonomy acces

Configure taxonomy access (or other access module) for authenticated user and your new vocab. Set all terms and new terms view rights to "allow".

patchak (not verified) on December 9, 2006 - 2:13pm

HI, I think there is a

HI,

I think there is a problem with this tutorial, because what it does is showing a list of picture teasers in one huge columns. At least with the theme I use (spread firefox).

Is it possible you jumped over a step, because you don,t seem to explain how to show teasers in a grid-like view??

I would really appreciate if you could clarify this part.

Thanks

zsoltee (not verified) on January 7, 2007 - 8:37pm

That interest me too! Please

That interest me too! Please explain, how to make a gallery view!

My Jewish Clipart (not verified) on December 27, 2006 - 8:04am

Navigation Scheme

Essentially, this article talks about replacing the standard taxonomy-based navigation with view-based one. This has the advantage of friendly URLs, but the disadvantage that any module based on taxonomy URLs needs to be customized in order to fit.

While using the view-based solution gives great URLs, and the display is much more customizable, it also means more customization work for replacing the taxonomy navigation.

Achieving good navigation is an ongoing work anyway - to achieve the next/prev links here, on the megillah story, I had to use the primary_term module, add freetagging support, and do some custom coding.

CherryRacer (not verified) on February 18, 2007 - 4:22pm

Drupal module compatibility 4.7 to 5.0

So there are tons of amazing tutorials here... Though I have just installed Drupal 5.0.... It freaking rocks!!!!!!! Though are all the modules developed for 4.7 obsolete now??? or can I use them just as I did b4???

Just learning...

-CherryRacer

ciro (not verified) on March 2, 2007 - 1:27am

problem event.module event

Hi, my name is Ciro, I am with difficulties in the module event to show the hours in the event with the calendar.

The image with the description of the error, be in attachment and me asks for you help to solve the problem.
the drupal version is 4.7.6

http://img483.imageshack.us/img483/2696/erroreventwt1.jpg

Thanks!

blairski (not verified) on March 17, 2007 - 6:06pm

Drupal 5

Does this solution work on Drupal 5? When I try and view the image s by user and tags (http://www.example.com/photos/users/1), I get "page not found"

shadowshifter (not verified) on March 31, 2007 - 9:53am

Works fine for me (using

Works fine for me (using Drupal 5.1), only problem I'm having is I can't work out how to make the images links (so there's jsut apokey little text link title under the image) and for some inane reason the nodes themselves are only showing preview sized instead of full sized images.

I'm sure it's just because I've done something remarkably stupid :)

edex (not verified) on April 22, 2007 - 3:47am

Drupal 5

i also get the same error using drupal 5.1
both url for user and tags doesn't work
http://www.example.com/photos/users/1
http://www.example.com/photo/tags/fire

any ideas?

Manish (not verified) on May 4, 2007 - 1:30am

Does not work in Drupal 5.1

I am using Drupal 5.1 with Acidfree module, image modules (image attach,image gallery,image import,imagecache), views modules, guestbook, buddylist and invite module.

I tried the above solution but it doesnt work.

During creating content (image) where do we need to put the tags. Is it in title or body ?

Photos (not verified) on May 15, 2007 - 7:32am

Tags

Well tags go in the body, recheck maybe you misspelled something. If this doesn't work make some screenshots.

themegarden.org (not verified) on May 17, 2007 - 3:39pm

Really nice how-to. It was

Really nice how-to.
It was posted a long time ago, but I have missed it somehow.

Thanks

Narconon (not verified) on May 30, 2007 - 9:17am

Neat trick! Thanks Angie,

Neat trick! Thanks Angie, and remember: don't do drugs, do Drupal!

My Jewish Clipart (not verified) on June 19, 2007 - 2:14am

Alternative approaches

According to lullabot podcast #38, It now seems a better practice to use Views + ImageFields + CCK, not image module. Here is a detailed guide: HOW TO: Create an image gallery using CCK and Views). The only benefit of the image module is that more modules are compatible with it (e.g. the watermark module, slideshow modules, flickr rippr module, etc...).

jayakrishnan (not verified) on July 11, 2007 - 4:48am

By tag works , but for some

By tag works , but for some reason by user name doesnt work, dunno why, says "Page not found"

Steve (not verified) on August 11, 2007 - 1:44am

$author not available

I've been working on creating a gallery as described in this post, and I've got it done except for one problem. In looking at the code that is supposed to go in node-image.tpl.php to create the link to the user's gallery, there is this line:

print l($author->name, "photo/user/$node->uid");

The problem is, $author doesn't seem to be available in node.tpl.php. If I try to print it, I get nothing. When I look at my source, I can see that everything is there for the link except the authors name. If I hard code a name in the l() function, I get the link. And, according to the "Pro Drupal Development" book, $author is not available in node.tpl.php. However, after looking at the contents of $node, I discovered that $node has a name property, so if I change the code to look like this:

print l($node->name, "photo/user/$node->uid");

it displays the link as it should.

Rainer (not verified) on August 11, 2007 - 7:27am

Have an update for Drupal 5.2

First of all, thanks for that great tutorial.
Do you have a new way to do that job with Drupal 5.2? Or even with the 6 Version? I am currently developing a site with 5.2 where I need "per user galleries" and would be thankful for any hint!

Steve (not verified) on August 11, 2007 - 2:57pm

Flickr with Drupal 5.2

I followed this setup using 5.2 with a few minor modifications. Based on some other posts I've seen on the Drupal site and an e-mail conversation with Matt Westgate, I used the following modules:

  • CCK
  • Imagefield
  • Imagecache
  • Thickbox
  • Views Bonus Pack
  • Custom Pagers

I used CCK to create an Image content type (this is where Imagefields comes in, because it is a CCK plugin to create an image field). I use Imagecache to create two sizes for display and thumbnail, and then choose the Thickbox display in the Image content types settings (Thickbox is really nice because you don't have to do anything to configure it, and it really looks good). The Views Bonus Pack gives you a grid view, and Customer Pagers allows you to have previous and next buttons on each image in the gallery (they are assigned to the view).

For more specifics, see this article: http://drupal.org/node/144725.

mohamed (not verified) on August 15, 2007 - 8:21am

but for some BUY SELL QATAR

Works fine for me (using Drupal 5.1), only problem I'm having is I can't work out how to make the images links (so there's jsut apokey little text link title under the image) and for some inane reason the nodes themselves are only showing preview sized instead of full sized images.

I'm sure it's just because I've done something remarkably stupid :)

Wonder95 (not verified) on August 17, 2007 - 8:00pm

Images and Links

If you do it with CCK and Imagefield with ImageCache (as I mentioned in my comment above), all you have to do is go into the view, and in the Imagefield field (whatever you named it; I named mine "photo") in the Fields section, there should be a value in the Options field to have it as a link. For instance, in ImageCache, I created two sizes: Thumbnail and Display. So in my Option field, I have the options of "Display as link" and "Thumbnail as link".

cyp25 (not verified) on September 25, 2007 - 10:00am

I'll give a try

Great tuto. Thanks a lot.

ench0 (not verified) on October 17, 2007 - 4:21pm

a few things missing from original tutorial

One more step is needed under Appetizer->Modules, namely "view uploaded files" should be selected for both authenticated and anonymous users. "view uploaded files" is in Administer->Access Control. And naturally that implies that the Upload module should be installed in Administer->Modules ...

Without the view uploaded files the users (anonymous and authenticated) can open the views but won't see any pictures.

The original tutorial was written for Drupal 4.7 so maybe that's why this was missing from it..? In any case it's a great tutorial, thanks Angie Byron, thanks Lullabot.
:)

sivasubramanian (not verified) on October 31, 2007 - 12:02pm

man i started cloning youtube..

hi angie,
nice post. Do you have any idea of cloning youtube website. Coz i started cloning just 2 days back. REleased first video tutorial too.

Anonymous (not verified) on December 29, 2007 - 10:09am

cool project

are you going through this?
this is a great idea i mean, i hate proprietary stuffs even when they are useful and loved by the users.
I will like to know something about your project if you're still working on that and maybe i can help you a little bit.
Let me know, the n we'll find the way to share knowledge, about us and about our project...
Da.

Anonymous (not verified) on January 14, 2008 - 10:19pm

code explanation

I followed your very clear instructions until I got to the replacement of the php code. I was able to copy the file in the theme to node-image.tpl.php but I got a bit confused on replacing the $submit and $terms line. Could you tell what what text color is the replacement text? All of it or just the red?

J

Anonymous (not verified) on January 22, 2008 - 4:05pm

J

Hi J,

your confusion is ok...I was a little confused myself.

Where it says: <span class="submitted"><?php print $submitted?></span> in the original code...replace just that with this whole thing:

<?php
     
// Load author details
     
$author = user_load(array('uid' => $node->uid));
   
?>

    <span class="submitted">From
    <?php
     
// We override the default user link here, because we want the link
      // to point to the user's gallery, rather than their account page.
     
print l($author->name, "photo/user/$node->uid");
   
?>

    on
    <?php
     
// Let's format a nice date without the time (Aug 16, 2006)
     
print format_date($node->created, 'custom', 'M d, Y');
   
?>

    </span>

and where originally it says:
<span class="taxonomy"><?php print $terms?></span>

replace that with this:

<span class="taxonomy">Tags:
    <?php
     
// Rather than simply print $terms, we want to control where
      // the taxonomy links lead; therefore, we'll compile the list
      // manually.
     
$term_links = array();
      foreach (
$node->taxonomy as $term) {
       
$term_links[] = l($term->name, "photo/tags/$term->name");
      }
     
// "implode" makes the terms comma-separated
     
print implode(', ', $term_links);
    
?>
</span>

I hope that makes it clearer

thomas (not verified) on January 22, 2008 - 4:11pm

Putting this in a panel

Hi there,

I was just wondering how it would be possible to put this view within a panel? I was wondering what would be needed to be able to make the panel appear with this view reacting to the tag term within it? I realise it's a bit of a specific ask...but displaying views within panels in this way would be a really useful tool.

thanks

thomas

aydin (not verified) on March 2, 2008 - 11:50am

view url's and node-image.tpl.php template links different

When creating view url's in step 6. we filled url fields photos/tags but in template links photo/tags. same as user links

this is reason for "page not found" errors

thanks for great article.

Thumbnails (not verified) on March 12, 2008 - 9:31pm

Any examples of implementation?

If you have implemented this (created a Flickr-like site in Drupal), especially in Drupal 5, could you place a link to your site, so that others could take a look at how it works?

Thanks,

Andrei

Anonymous (not verified) on April 18, 2008 - 9:45pm

Updated guide for Drupal 5 or 6 ?

Hi

Is there a updated guide of this, with additional functionalities?

Thanks

Matthew (not verified) on May 5, 2008 - 10:36am

'Page not found'

Hi there Angie,

Fantastic tutorial, very clear - even for a Luddite like me.

I've enabled clean URLs but still getting the 'Page not found' error.

I'm unclear about the reply from Aydin.

Matt

Matthew (not verified) on May 5, 2008 - 6:10pm

Found the page

Tried it again with your template file. It works like a charm.

:)

Anonymous (not verified) on May 18, 2008 - 3:53pm

trying to follow my first Drupal tutorial

This looks like a lovely tutorial, but I am already in trouble at step 1!

I have Drupal 6.2, not 4.7, and I suppose this is why, at my Administer >> modules page on my http://localhost/drupal/?q=admin/build/modules page I cannot find any of

Image
Image Exact Size
or
Views

in the list?

Apologies for my slowwittedness...

Mark G. [trying to upgrade self from html hand-coding... ]

Gavin Doolan (not verified) on June 5, 2008 - 8:06am

You need those modules...

That's because you need to install these modules separately from the Drupal core installation.

Go to Drupal.org and look for modules or try a website like www.drupalmodules.com

Those modules may or may not be ready for Drupal 6. So you might be better off starting with Drupal 5.7 as I am at the moment.

Good luck!

@Lullabots, it would be nice if you guys could update this great article to cover Drupal 5.x and 6.x. If there are or arn't any differences.

Anonymous (not verified) on June 18, 2008 - 5:34pm

Could not find Author in views->add->filters.....

Arguments: Click the trash can next to Taxonoy: Term Name and replace it with User: UID is Author.
There is not User:Author filter in Views..

press release distribution (not verified) on July 4, 2008 - 2:29am

image cck or image module

hi, we run a drupal based press release distribution site. we want to start a free image press release service. which way to go. should we follow this tutorial and install the image module or just use the image cck field. please advise

Adam Shore (not verified) on July 9, 2008 - 11:51am

Importing large quantities

I've taken this wonderful tutorial and implemented it as well as tuned it to my needs. I am wondering how I would go about importing large quantities of photos in to the site?
I would want to fill in the data and tags as I go along, too.
Thanks for any assistance.
- adam

Anonymous (not verified) on August 19, 2008 - 6:32pm

I tried to add this to my

I tried to add this to my petition site but step2 is giving me a hard time.

Barry Jenkins - Petition Inc. CEO

Andreas (not verified) on November 21, 2008 - 2:54pm

example for phptemplate

this is my example for a phptemplate:

<?php

if ($teaser) {
?>

<?php
//print l(image_display($node, IMAGE_THUMBNAIL), 'node/'. $node->nid, array(), NULL, NULL, TRUE, TRUE);
print l(image_display($node, IMAGE_PREVIEW), 'node/'. $node->nid, array(), NULL, NULL, TRUE, TRUE);
} else {
?>

<?php
$show_defined_vars
= TRUE;
$show_defined_vars = FALSE;

if (
$show_defined_vars) {
    print
'<pre>';
    print
htmlspecialchars(print_r(get_defined_vars(), TRUE), ENT_QUOTES);
    print
'</pre>';
}


//_show_all_node_variables($node);


if (arg(1) == 'term') {
   
$picotb_page = "term";
}

if (
arg(0) == 'photosuser') {
   
$picotb_page = "photosuser";
}
if (
$teaser) {
   
$picotb_page = "teaser";
}
?>

<?php

//echo "<p>nid: ".$node->nid."</p>";
//echo "<p>name: ".$node->name."</p>";
//echo "<p>name: ".$node->name."</p>";
print t("Uploaded on ");
// Let's format a nice date without the time (Aug 16, 2006)
print format_date($node->created, 'custom', 'M d, Y');
print
"<br>";
print
t("by ");
print
l($node->name, "user/$node->uid");
?>

<?php
//print '<div id="allsizes"><img alt=""http://www.dsm.com/le/static/common/images/icon_zoom_darkgray.gif"" src=""http://www.dsm.com/le/static/common/images/icon_zoom_darkgray.gif""></div>';
print '<br>';
//print '<a href="'.$base_url.'/files/'.$node->images['_original'].'">';


//print l(image_display($node, IMAGE_ORIGINAL), 'node/'. $node->nid, array(), NULL, NULL, TRUE, TRUE);
//print l(image_display($node, IMAGE_ORIGINAL), '/pix512/'.$node->images['_original'], array(), NULL, NULL, TRUE, TRUE);


print '<a href="/pix512/'.$node->images['_original'].'". target="_blank">';
print
image_display($node, IMAGE_ORIGINAL);
print
'</a>';


//print '<a href="/'.$node->images['_original'].'">';
//print $content;
//print '</a>';

//print '<div id="enlarge">[click image to enlarge]</div><br>';
//print $vote_up_down_widget;
?>

<?php
if ($page != 0 && $terms) { print custom_pager($node->nid); }
?>

-->

<?php
if (arg(0) == 'articles') {
 
// We're on a View that lives at /articles
 
print $node->tiny_image[0]['view'];
}
else {
  print
$node->medium_image[0]['view'];
}
print
$node->teaser;
?>

-->

<?php
print $submitted
?>

-->
<?php
print 'tags: '.$terms
?>

<?php
//   print $links;   
?>

<?php

if (arg(4) == 'DEBUG') {
// http://drupal.org/node/102145
 
print '<pre>';
 
print_r ($node);
  print
'</pre>';
  print
'<hr>';
  print
'<hr>';
}
?>

<?php

}
?>

<?php
if ($teaser) { //if node is being displayed as a teaser
//Anything here will show up when the teaser of the post is viewed in your taxonomies or front page
} elseif ($page) { //if node is being displayed as a full node
//Anything here will show up when viewing only your post
} else { //all other cases
//Anything here will show up when viewing your post at any other time
}
?>

Andreas (not verified) on November 21, 2008 - 2:55pm

example for phptemplate

this is my example for a phptemplate:

<?php

if ($teaser) {
?>

<?php
//print l(image_display($node, IMAGE_THUMBNAIL), 'node/'. $node->nid, array(), NULL, NULL, TRUE, TRUE);
print l(image_display($node, IMAGE_PREVIEW), 'node/'. $node->nid, array(), NULL, NULL, TRUE, TRUE);
} else {
?>

<?php
$show_defined_vars
= TRUE;
$show_defined_vars = FALSE;

if (
$show_defined_vars) {
    print
'<pre>';
    print
htmlspecialchars(print_r(get_defined_vars(), TRUE), ENT_QUOTES);
    print
'</pre>';
}


//_show_all_node_variables($node);


if (arg(1) == 'term') {
   
$picotb_page = "term";
}

if (
arg(0) == 'photosuser') {
   
$picotb_page = "photosuser";
}
if (
$teaser) {
   
$picotb_page = "teaser";
}
?>

<?php

//echo "<p>nid: ".$node->nid."</p>";
//echo "<p>name: ".$node->name."</p>";
//echo "<p>name: ".$node->name."</p>";
print t("Uploaded on ");
// Let's format a nice date without the time (Aug 16, 2006)
print format_date($node->created, 'custom', 'M d, Y');
print
"<br>";
print
t("by ");
print
l($node->name, "user/$node->uid");
?>

<?php
//print '<div id="allsizes"><img alt=""http://www.dsm.com/le/static/common/images/icon_zoom_darkgray.gif"" src=""http://www.dsm.com/le/static/common/images/icon_zoom_darkgray.gif""></div>';
print '<br>';
//print '<a href="'.$base_url.'/files/'.$node->images['_original'].'">';


//print l(image_display($node, IMAGE_ORIGINAL), 'node/'. $node->nid, array(), NULL, NULL, TRUE, TRUE);
//print l(image_display($node, IMAGE_ORIGINAL), '/pix512/'.$node->images['_original'], array(), NULL, NULL, TRUE, TRUE);


print '<a href="/pix512/'.$node->images['_original'].'". target="_blank">';
print
image_display($node, IMAGE_ORIGINAL);
print
'</a>';


//print '<a href="/'.$node->images['_original'].'">';
//print $content;
//print '</a>';

//print '<div id="enlarge">[click image to enlarge]</div><br>';
//print $vote_up_down_widget;
?>

<?php
if ($page != 0 && $terms) { print custom_pager($node->nid); }
?>

-->

<?php
if (arg(0) == 'articles') {
 
// We're on a View that lives at /articles
 
print $node->tiny_image[0]['view'];
}
else {
  print
$node->medium_image[0]['view'];
}
print
$node->teaser;
?>

-->

<?php
print $submitted
?>

-->
<?php
print 'tags: '.$terms
?>

<?php
//   print $links;   
?>

<?php

if (arg(4) == 'DEBUG') {
// http://drupal.org/node/102145
 
print '<pre>';
 
print_r ($node);
  print
'</pre>';
  print
'<hr>';
  print
'<hr>';
}
?>

<?php

}
?>

<?php
if ($teaser) { //if node is being displayed as a teaser
//Anything here will show up when the teaser of the post is viewed in your taxonomies or front page
} elseif ($page) { //if node is being displayed as a full node
//Anything here will show up when viewing only your post
} else { //all other cases
//Anything here will show up when viewing your post at any other time
}
?>

Timtim (not verified) on November 27, 2008 - 12:14am

I can't get the teaser

I can't get the teaser images to show up at all in the view for Views2 on Drupal 6.

??????? (not verified) on January 3, 2009 - 2:23am

I could swear that .zip file

I could swear that .zip file was there when I first posted the article. Not sure how that managed to get eaten, but anyway... it's back now. :)

bala (not verified) on January 29, 2009 - 11:47pm

Flickr in Drupal 6.x ?

Has anyone done improving this flickr module in Drupal 6.x ?

Will share my experiments with flickr, youtube and other social media modules - do send an email to info@topfeeds.in

walter (not verified) on September 28, 2009 - 8:12am

Are there a way to create an album where the picutres....

Are there a way to create an album where the images should not exceed 24 hours?

I wish make an album where I can read the exif data from te first and last image and check if the time is not more 24h ???????

How I can do it?

thanks

ngan hang (not verified) on October 25, 2009 - 9:16pm

ngan hang

thank you for sharing

topics (not verified) on October 28, 2009 - 8:16pm

I could swear that .zip file

I could swear that .zip file was there when I first posted the article. Not sure how that managed to get eaten, but anyway... it's back now. :

thong tin ngan hang (not verified) on October 28, 2009 - 8:17pm

I'm still unsure howto

I'm still unsure howto download the mentioned ZIP file? Does anyone have the files/ZIP?

thanks

About this 'bot

Angie Byron

Angela Byron is the Drupal 7 core maintainer, recipient of the Google-O'Reilly Open 2008 Source Award for Best Contributor, and an Open Source evangelist who lives and breathes Drupal. She got her start as a Google Summer of Code student in 2005 and since then...

more

Recent

Drupal Voices 160: Moshe Weitzman on Page Rendering in Drupal 7

Podcast 9.02.2010

Drupal Voices 159: John Albin Wilkins on Drupal 7 Theming

Podcast 9.01.2010

Drupal Voices 158: Emma Jane Hogbin on PHP for Designers

Podcast 8.31.2010

Command Line Basics: More Editing with Vi/Vim

Video 8.31.2010

Lullabot's Back to School Sale

Blog 8.30.2010

Popular

Drupal Voices 160: Moshe Weitzman on Page Rendering in Drupal 7

Podcast 9.02.2010

Drupal Voices 159: John Albin Wilkins on Drupal 7 Theming

Podcast 9.01.2010

Drupal Voices 158: Emma Jane Hogbin on PHP for Designers

Podcast 8.31.2010

Installing Memcached on RedHat or CentOS

Article 8.20.2009

Photo galleries with Views Attach

Article 6.01.2009
 
  • Home
  • Services
  • Events
  • Ideas
  • Store

Connect the Bots:

Twitter Facebook YouTube blip.tv All Posts Newsletter
  • Ideas
  • Blog
  • Podcasts
  • Videos
  • About
  • Contact
  • Jobs
  • Services
    • Training
  • Events
    • Training Workshops
    • Other Events
    • Conferences
    • Calendar
  • Products
    • Videos
    • Books
    • Swag
  • Ideas
    • Blog
    • Podcast
    • Videos
  • About
    • Philosophy
    • Team
    • Presskit
  • Contact
    • General
    • Work Inquiries
    • Mailing List