2017-07-10 22:28:39 +01:00
<!DOCTYPE html>
< html class = "no-js" lang = "en-GB" >
< head >
< title > Create a Flickr Photo Gallery Using Feeds, CCK and Views | Oliver Davies< / title >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2017-07-12 07:22:51 +01:00
< meta property = "og:url" content = "https://www.oliverdavies.uk/blog/2010/06/28/create-flickr-photo-gallery-using-feeds-cck-and-views" >
2017-07-10 22:28:39 +01:00
< meta property = "og:title" content = "Create a Flickr Photo Gallery Using Feeds, CCK and Views" / >
2017-07-12 07:22:51 +01:00
< meta property = "og:image" content = "https://www.oliverdavies.uk/assets/images/me-precedent.jpg" / >
2017-07-10 22:28:39 +01:00
< meta property = "og:image:height" content = "327" / >
< meta property = "og:image:type" content = "image/jpg" >
< meta property = "og:image:width" content = "327" / >
2017-07-12 07:22:51 +01:00
< link rel = "stylesheet" href = "https://www.oliverdavies.uk/assets/css/main.css" >
< link rel = "stylesheet" href = "https://www.oliverdavies.uk/assets/css/blog-post.css" >
2017-07-10 22:28:39 +01:00
< link rel = "apple-touch-icon" href = "/assets/images/me-precedent.jpg?s=57" sizes = "57x57" >
< link rel = "apple-touch-icon" href = "/assets/images/me-precedent.jpg?s=114" sizes = "114x114" >
< link rel = "apple-touch-icon" href = "/assets/images/me-precedent.jpg?s=72" sizes = "72x72" >
< link rel = "apple-touch-icon" href = "/assets/images/me-precedent.jpg?s=144" sizes = "144x144" >
< link rel = "apple-touch-icon" href = "/assets/images/me-precedent.jpg?s=60" sizes = "60x60" >
< link rel = "apple-touch-icon" href = "/assets/images/me-precedent.jpg?s=120" sizes = "120x120" >
< link rel = "apple-touch-icon" href = "/assets/images/me-precedent.jpg?s=76" sizes = "76x76" >
< link rel = "apple-touch-icon" href = "/assets/images/me-precedent.jpg?s=152" sizes = "152x152" >
< link rel = "icon" href = "/assets/images/me-precedent.jpg?s=160" sizes = "160x160" >
< link rel = "icon" href = "/assets/images/me-precedent.jpg?s=96" sizes = "96x96" >
< link rel = "icon" href = "/assets/images/me-precedent.jpg?s=32" sizes = "32x32" >
< link rel = "icon" href = "/assets/images/me-precedent.jpg?s=16" sizes = "16x16" >
< / head >
< body class = "" >
< nav class = "navbar navbar-inverse navbar-fixed-top" >
< div class = "container" >
< div class = "navbar-header" >
< button type = "button" class = "navbar-toggle collapsed" data-toggle = "collapse" data-target = "#navbar" aria-expanded = "false" aria-controls = "navbar" >
< span class = "sr-only" > Toggle navigation< / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< / button >
2017-07-12 07:22:51 +01:00
< a class = "navbar-brand" href = "https://www.oliverdavies.uk/" > Oliver Davies< / a >
2017-07-10 22:28:39 +01:00
< / div >
< div id = "navbar" class = "collapse navbar-collapse" role = "navigation" >
< ul class = "nav navbar-nav" >
< li class = "" >
< a href = "/" > About< / a >
< / li >
< li class = "" >
< a href = "/experience" > Experience< / a >
< / li >
< li class = "" >
< a href = "/testimonials" > Testimonials< / a >
< / li >
< li class = "" >
< a href = "/talks" > Talks< / a >
< / li >
< li class = "active" >
< a href = "/blog" > Blog< / a >
< / li >
< li class = "" >
< a href = "/contact" > Contact< / a >
< / li >
< / ul >
< / div > < / div >
< / nav >
< div class = "container" >
< div class = "row" >
< main class = "col-md-9" >
< h1 > Create a Flickr Photo Gallery Using Feeds, CCK and Views< / h1 >
2017-07-11 18:57:51 +01:00
< p class = "posted text-light" > 28th June 2010< / p >
2017-07-10 22:28:39 +01:00
< p > In this tutorial, I'll show you how to create a photo gallery which uses photos imported from < a href = "http://www.flickr.com" > Flickr< / a > .< / p >
< p > The modules that I'll use to create the Gallery are:< / p >
< ul >
< li > < a href = "http://drupal.org/project/cck" > CCK< / a > < / li >
< li > < a href = "http://drupal.org/project/feeds" > Feeds< / a > < / li >
< li > < a href = "http://drupal.org/project/feeds_imagegrabber" > Feeds Image Grabber< / a > < / li >
< li > < a href = "http://drupal.org/project/filefield" > FileField< / a > < / li >
< li > < a href = "http://drupal.org/project/imageapi" > ImageAPI< / a > < / li >
< li > < a href = "http://drupal.org/project/imagecache" > ImageCache< / a > < / li >
< li > < a href = "http://drupal.org/project/imagefield" > ImageField< / a > < / li >
< li > < a href = "http://drupal.org/project/views" > Views< / a > < / li >
< / ul >
< p > The first thing that I did was to create a content type to store my imported images. I named it 'Photo', removed the Body field, and added an Image field.< / p >
< p > Next, I installed and configured the Feeds and Image Grabber module. I used an overridden default Feed to import my photos from Flickr using the following settings:< / p >
< ul >
< li > < strong > Basic settings:< / strong > I changed the Refresh time to 15 minutes.< / li >
< li > < strong > Processor settings:< / strong > I changed the content type to 'Photo', and the author's name from 'anonymous'.< / li >
< li > < strong > Processor mapping:< / strong > I added a new mapping from 'Item URL (link)' to 'Photo (FIG)'. The Photo FIG target is added by the Image Grabber module.< / li >
< / ul >
< p > Next, I needed to create the actual Feed, which I did by clicking 'Import' within the Navigation menu, and clicking 'Feed'. I gave it a title, entered the URL to my RSS feed from Flickr, and enabled the Image Grabber for this feed.< / p >
< p > Once the Feed is created, the latest 20 images from the RSS feed are imported and 20 new Photos nodes are created. In the example below, the image with the 'Photo' label is the Image field mapped by the Image Grabber module. It is this image that I'll be displaying within my Gallery.< / p >
< p > With the new Photo nodes created, I then created the View to display them.< / p >
< p > The View selects the image within the Photo content type, and displays in it a grid using an ImageCache preset. The View is limited to 20 nodes per page, and uses a full pager if this is exceeded. The nodes are sorted by the descending post date, and filtered by whether or not they are published, and only to include Photo nodes.< / p >
< p > As an additional effect, I also included the 'Feeds Item - Item Link' field, which is basically the original link from the RSS feed. By checking the box the exclude the item from the display, it is not shown, but makes the link available to be used elsewhere. By checking the box 'Re-write the output for this field' on the 'Content: Photo' field, I was able to add the replacement token (in this case, [url]) as the path for a link around each image. This meant that when someone clicked a thumbnail of a photo, they were directed to the Flickr website instead of the node within my Drupal site.< / p >
< p class = "tags" >
Tags:
2017-07-12 07:22:51 +01:00
< a href = "https://www.oliverdavies.uk/blog/tags/drupal-planet" > drupal-planet< / a > , < a href = "https://www.oliverdavies.uk/blog/tags/drupal-6" > drupal-6< / a > , < a href = "https://www.oliverdavies.uk/blog/tags/photo-gallery" > photo-gallery< / a > , < a href = "https://www.oliverdavies.uk/blog/tags/views" > views< / a > , < a href = "https://www.oliverdavies.uk/blog/tags/cck" > cck< / a > , < a href = "https://www.oliverdavies.uk/blog/tags/imagecache" > imagecache< / a > , < a href = "https://www.oliverdavies.uk/blog/tags/feeds" > feeds< / a > , < a href = "https://www.oliverdavies.uk/blog/tags/filefield" > filefield< / a > , < a href = "https://www.oliverdavies.uk/blog/tags/flickr" > flickr< / a > , < a href = "https://www.oliverdavies.uk/blog/tags/imagefield" > imagefield< / a > < / p >
2017-07-10 22:28:39 +01:00
< div class = "post-pager is-flex" >
< div class = "is-half" >
< a href = "/blog/2010/06/25/10-useful-drupal-6-modules" >
« 10 Useful Drupal 6 Modules
< / a >
< / div >
< div class = "is-half text-right" >
< a href = "/blog/2010/07/01/change-content-type-multiple-nodes-using-sql" >
Change the Content Type of Multiple Nodes Using SQL »
< / a >
< / div >
< / div >
< div class = "about-author" >
< h2 > About the Author< / h2 >
2017-07-12 07:24:51 +01:00
< img src = "//www.oliverdavies.uk/assets/images/me-precedent.jpg" alt = "Picture of Oliver" class = "img-circle" >
2017-07-10 22:28:39 +01:00
< p > Oliver Davies is a Web Developer, System Administrator and Drupal specialist based in the UK. He is a Senior Developer at < a href = "https://microserve.io" > Microserve< / a > and also provides freelance consultancy services for Drupal websites, PHP applications and Linux servers.< / p >
< / div >
< / main >
< div class = "col-md-3" >
< div class = "panel badges text-center" >
< a class = "badge--da-member" href = "https://assoc.drupal.org/membership" title = "I’ >
< img
2017-07-12 07:24:51 +01:00
src="//www.oliverdavies.uk/assets/images/da-individual-member.png"
2017-07-10 22:28:39 +01:00
alt="Drupal Association Individual Member"
width="152"
>
< / a >
< a href = "http://drupalcores.com/#opdavies" >
< img
alt="I built Drupal 8 with hand holding a wrench on blue background"
2017-07-12 07:24:51 +01:00
src="//www.oliverdavies.uk/assets/images/drupal-8.jpg"
2017-07-10 22:28:39 +01:00
/>
< / a >
< img
2017-07-12 07:24:51 +01:00
src="//www.oliverdavies.uk/assets/images/badges/acquia-certified-developer-drupal-8.png"
2017-07-10 22:28:39 +01:00
alt="Acquia Certified Developer - Drupal 8 Exam Badge"
height="147" width="147"
/>
< a href = "http://conference.phpnw.org.uk/phpnw17" >
2017-07-12 07:24:51 +01:00
< img src = "//www.oliverdavies.uk/assets/images/badges/phpnw17.png" alt = "" >
2017-07-10 22:28:39 +01:00
< / a >
< / div >
< div class = "availability panel panel-default" >
< div class = "panel-heading" > Availability< / div >
< div class = "panel-body" >
< p >
< i class = "fa fa-thumbs-o-up text-warning" > < / i >
Currently have limited part-time capacity
< / p >
< p >
< i class = "fa fa-thumbs-o-down text-danger" > < / i >
Currently no spare full-time capacity.
< / p >
< / div >
< / div >
< div class = "latest-posts panel panel-default" >
< div class = "latest-posts__heading panel-heading" > Latest blog posts< / div >
< ul class = "list-group" >
< li class = "post list-group-item" >
< span class = "post__title" >
< a href = "/blog/2017/06/09/introducing-the-drupal-meetups-twitterbot" >
Introducing the Drupal Meetups Twitterbot
< / a >
< / span > -
< span class = "post__date" > 9th June, 2017< / span >
< / li >
< li class = "post list-group-item" >
< span class = "post__title" >
< a href = "/blog/2017/05/20/turning-drupal-module-into-feature" >
Turning Your Custom Drupal Module into a Feature
< / a >
< / span > -
< span class = "post__date" > 20th May, 2017< / span >
< / li >
< li class = "post list-group-item" >
< span class = "post__title" >
< a href = "/blog/2017/05/15/drupalcamp-bristol-early-bird-tickets-sessions-sponsors" >
DrupalCamp Bristol 2017 - Early Bird Tickets, Call for Sessions, Sponsors
< / a >
< / span > -
< span class = "post__date" > 15th May, 2017< / span >
< / li >
< / ul >
< / div >
< / div >
< / div > < / div >
< footer class = "container" >
< p class = "copyright" >
© 2010-2017 Oliver Davies. Built with < a href = "https://sculpin.io" > Sculpin< / a > .
< / p >
< div class = "meetups" >
< h2 > Things that I organise< / h2 >
< ul >
< li class = "meetups--drupal-bristol" >
< a href = "http://www.drupalbristol.org.uk" title = "Drupal Bristol" >
2017-07-11 07:34:02 +01:00
< img
2017-07-12 07:24:51 +01:00
src="//www.oliverdavies.uk/assets/images/meetups/drupal-bristol.jpeg"
2017-07-11 07:34:02 +01:00
alt="Drupal Bristol logo"
>
2017-07-10 22:28:39 +01:00
< / a >
< / li >
< li class = "meetups--drupalcamp-bristol" >
< a href = "http://www.drupalcampbristol.co.uk" title = "DrupalCamp Bristol" >
2017-07-11 07:34:02 +01:00
< img
2017-07-12 07:24:51 +01:00
src="//www.oliverdavies.uk/assets/images/meetups/drupalcamp-bristol.png"
2017-07-11 07:34:02 +01:00
alt="DrupalCamp Bristol logo"
>
2017-07-10 22:28:39 +01:00
< / a >
< / li >
< li class = "meetups--phpsw" >
< a href = "http://phpsw.uk" title = "PHPSW" >
2017-07-11 07:34:02 +01:00
< img
2017-07-12 07:24:51 +01:00
src="//www.oliverdavies.uk/assets/images/meetups/phpsw.jpeg"
2017-07-11 07:34:02 +01:00
alt="PHPSW logo"
>
2017-07-10 22:28:39 +01:00
< / a >
< / li >
< / ul >
< / div >
< / footer >
2017-07-12 07:22:51 +01:00
< script src = "https://www.oliverdavies.uk/assets/js/site.js" > < / script >
2017-07-10 22:28:39 +01:00
< script > ( function ( i , s , o , g , r , a , m ) { i [ 'GoogleAnalyticsObject' ] = r ; i [ r ] = i [ r ] || function ( ) { ( i [ r ] . q = i [ r ] . q || [ ] ) . push ( arguments ) } , i [ r ] . l = 1 * new Date ( ) ; a = s . createElement ( o ) , m = s . getElementsByTagName ( o ) [ 0 ] ; a . async = 1 ; a . src = g ; m . parentNode . insertBefore ( a , m ) } ) ( window , document , 'script' , '//www.google-analytics.com/analytics.js' , 'ga' ) ; ga ( 'create' , 'UA-11967257-1' , 'auto' ) ; ga ( 'send' , 'pageview' ) ; < / script >
< / body >
< / html >
