335 lines
16 KiB
HTML
335 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html class="no-js" lang="en-GB">
|
||
<head>
|
||
<title>Create a Better Photo Gallery in Drupal - Part 1 | 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">
|
||
|
||
|
||
<meta property="og:url" content="https://www.oliverdavies.uk/blog/2010/08/11/create-better-photo-gallery-drupal-part-1">
|
||
<meta property="og:title" content="Create a Better Photo Gallery in Drupal - Part 1"/>
|
||
|
||
|
||
|
||
<meta property="og:image" content="https://www.oliverdavies.uk/assets/images/me-precedent.jpg"/>
|
||
<meta property="og:image:height" content="327"/>
|
||
<meta property="og:image:type" content="image/jpg">
|
||
<meta property="og:image:width" content="327"/>
|
||
|
||
|
||
|
||
<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">
|
||
|
||
<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>
|
||
<a class="navbar-brand" href="https://www.oliverdavies.uk/">Oliver Davies</a>
|
||
</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 Better Photo Gallery in Drupal - Part 1</h1>
|
||
|
||
<p class="posted text-light">11th August 2010</p>
|
||
|
||
<p>Recently, I converted a client's static HTML website, along with their Coppermine Photo Gallery, into a Drupal-powered website.</p>
|
||
|
||
<p>Over the next few posts, I'll be replicating the process that I used during the conversion, and how I added some additional features to my Drupal gallery.</p>
|
||
|
||
<p>To begin with, I created my photo gallery as described by <a href="http://www.lullabot.com/about/team/jeff-eaton">Jeff Eaton</a> in <a href="http://www.lullabot.com/articles/photo-galleries-views-attach">this screencast</a>, downloaded all my client's previous photos via FTP, and quickly added them into the new gallery using the <a href="http://drupal.org/project/imagefield_import">Imagefield Import</a> module (which I mentioned <a href="/blog/quickly-import-multiples-images-using-imagefieldimport-module/">previously</a>).</p>
|
||
|
||
<p>When I compare this to the previous gallery, I can see several differences which I'd like to include. The first of which is the number of photos in each gallery, and the date that the most recent photo was added.</p>
|
||
|
||
<p>To do this, I'd need to query my website's database. To begin with, I wanted to have a list of all the galleries on my site which are published, and what they're unique node ID values are. To do this, I opened Sequel Pro and entered the following code:</p>
|
||
|
||
<pre><code class="language-sql">SELECT title
|
||
AS title, nid
|
||
AS gallery_idFROM node
|
||
WHERE type = 'gallery'
|
||
AND status = 1;
|
||
</code></pre>
|
||
|
||
<p>As the nid value of each gallery corresponds with the 'field_gallery_nid' field within the content_type_photo field, I can now query the database and retrieve information about each specific gallery.</p>
|
||
|
||
<p>For example, using <a href="http://www.w3schools.com/sql/sql_alias.asp">aliasing</a> within my SQL statement, I can retrieve a list of all the published photos within the 'British Squad 2008' gallery by using the following code:</p>
|
||
|
||
<pre><code class="language-sql">SELECT n.title, n.nid, p.field_gallery_nid
|
||
FROM node n, content_type_photo p
|
||
WHERE p.field_gallery_nid = 105
|
||
AND n.status = 1
|
||
AND n.nid = p.nid;
|
||
</code></pre>
|
||
|
||
<p>I can easily change this to count the number of published nodes by changing the first line of the query to read SELECT COUNT(*).</p>
|
||
|
||
<pre><code class="language-sql">SELECT COUNT(*)
|
||
FROM node n, content_type_photo p
|
||
WHERE p.field_gallery_nid = 105
|
||
AND n.status = 1
|
||
AND n.nid = p.nid;
|
||
</code></pre>
|
||
|
||
<p>As I've used the <a href="http://drupal.org/project/views_attach">Views Attach</a> module, and I'm embedding the photos directly into the Gallery nodes, I easily add this to each gallery by creating a custom node-gallery.tpl.php file within my theme. I can then use the following PHP code to retrieve the node ID for that specific gallery:</p>
|
||
|
||
<pre><code class="language-php"><?php
|
||
$selected_gallery = db_result(db_query("
|
||
SELECT nid
|
||
FROM {node}
|
||
WHERE type = 'gallery'
|
||
AND title = '$title'
|
||
"));
|
||
?>
|
||
</code></pre>
|
||
|
||
<p>I can then use this variable as part of my next query to count the number of photos within that gallery, similar to what I did earlier.</p>
|
||
|
||
<pre><code class="language-php"><?php
|
||
$gallery_total = db_result(db_query("
|
||
SELECT COUNT(*)
|
||
FROM {content_type_photo}
|
||
WHERE field_gallery_nid = $selected_gallery
|
||
"));
|
||
?>
|
||
</code></pre>
|
||
|
||
<p>Next, I wanted to display the date that the last photo was displayed within each album. This was done by using a similar query that also sorted the results in a descending order, and limited it to one result - effectively only returning the created date for the newest photo.</p>
|
||
|
||
<pre><code class="language-php"><?php
|
||
$latest_photo = db_result(db_query("
|
||
SELECT n.created
|
||
FROM {node} n, {content_type_photo} p
|
||
WHERE p.field_gallery_nid = $selected_gallery
|
||
AND n.nid = p.nid
|
||
ORDER BY n.created DESC LIMIT 1
|
||
"));
|
||
?>
|
||
</code></pre>
|
||
|
||
<p>This was all then added into a 'print' statement which displayed it into the page.</p>
|
||
|
||
<pre><code class="language-php"><?php
|
||
if ($selected_gallery_total != 0) {
|
||
$output = '<i>There are currently ' . $selected_gallery_total . ' photos in this gallery.';
|
||
$output .= 'Last one added on ' . $latest_photo . '</i>';
|
||
print $output;
|
||
}
|
||
?>
|
||
</code></pre>
|
||
|
||
<p>OK, so let's take a look at the Gallery so far:</p>
|
||
|
||
<p>You will notice that the returned date value for the latest photo added is displaying the UNIX timestamp instead of in a more readable format. This can be changed by altering the 'print' statement to include a PHP 'date' function:</p>
|
||
|
||
<pre><code class="language-php"><?php
|
||
if ($selected_gallery_total != 0) {
|
||
$output = '<i>There are currently ' . $selected_gallery_total . ' photos in this gallery.';
|
||
$output .= 'Last one added on ' . date("l, jS F, Y", $latest_photo) . '.</i>';
|
||
print $output;
|
||
}
|
||
?>
|
||
</code></pre>
|
||
|
||
<p>The values that I've entered are from <a href="http://php.net/manual/en/function.date.php">this page</a> on PHP.net, and can be changed according on how you want the date to be displayed.</p>
|
||
|
||
<p>As I've added all of these photos today, then the correct dates are being displayed. However, on the client's original website, the majority of these photos were pubished several months or years ago, and I'd like the new website to still reflect the original created dates. As opposed to modifying each individual photograph, I'll be doing this in bulk in my next post.</p>
|
||
|
||
<p class="tags">
|
||
Tags:
|
||
<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/sql">sql</a>, <a href="https://www.oliverdavies.uk/blog/tags/views">views</a>, <a href="https://www.oliverdavies.uk/blog/tags/sequel-pro">sequel-pro</a>, <a href="https://www.oliverdavies.uk/blog/tags/cck">cck</a>, <a href="https://www.oliverdavies.uk/blog/tags/views-attach">views-attach</a>, <a href="https://www.oliverdavies.uk/blog/tags/drupal">drupal</a> </p>
|
||
<div class="post-pager is-flex">
|
||
<div class="is-half">
|
||
<a href="/blog/2010/08/10/review-adminhover-module">
|
||
« Review of the Admin:hover Module
|
||
</a>
|
||
</div>
|
||
|
||
<div class="is-half text-right">
|
||
<a href="/blog/2010/08/17/create-better-photo-gallery-drupal-part-2">
|
||
Create a Better Photo Gallery in Drupal - Part 2 »
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="about-author">
|
||
<h2>About the Author</h2>
|
||
|
||
<img src="//www.oliverdavies.uk/assets/images/me-precedent.jpg" alt="Picture of Oliver" class="img-circle">
|
||
|
||
<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’m a Drupal Association member.">
|
||
<img
|
||
src="//www.oliverdavies.uk/assets/images/da-individual-member.png"
|
||
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"
|
||
src="//www.oliverdavies.uk/assets/images/drupal-8.jpg"
|
||
/>
|
||
</a>
|
||
|
||
<img
|
||
src="//www.oliverdavies.uk/assets/images/badges/acquia-certified-developer-drupal-8.png"
|
||
alt="Acquia Certified Developer - Drupal 8 Exam Badge"
|
||
height="147" width="147"
|
||
/>
|
||
|
||
<a href="http://conference.phpnw.org.uk/phpnw17">
|
||
<img src="//www.oliverdavies.uk/assets/images/badges/phpnw17.png" alt="">
|
||
</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/07/13/publishing-sculpin-sites-with-github-pages">
|
||
Publishing Sculpin Sites with GitHub Pages
|
||
</a>
|
||
</span> -
|
||
<span class="post__date">13th July, 2017</span>
|
||
</li>
|
||
<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>
|
||
</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">
|
||
<img
|
||
src="//www.oliverdavies.uk/assets/images/meetups/drupal-bristol.jpeg"
|
||
alt="Drupal Bristol logo"
|
||
>
|
||
</a>
|
||
</li>
|
||
<li class="meetups--drupalcamp-bristol">
|
||
<a href="http://www.drupalcampbristol.co.uk" title="DrupalCamp Bristol">
|
||
<img
|
||
src="//www.oliverdavies.uk/assets/images/meetups/drupalcamp-bristol.png"
|
||
alt="DrupalCamp Bristol logo"
|
||
>
|
||
</a>
|
||
</li>
|
||
<li class="meetups--phpsw">
|
||
<a href="http://phpsw.uk" title="PHPSW">
|
||
<img
|
||
src="//www.oliverdavies.uk/assets/images/meetups/phpsw.jpeg"
|
||
alt="PHPSW logo"
|
||
>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="https://www.oliverdavies.uk/assets/js/site.js"></script>
|
||
|
||
<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>
|