opdavies/oliverdavies.uk
1
0
Fork 0
Code Issues 1 Pull requests Projects 1 Releases Packages Wiki Activity Actions

Build site

Browse source
This commit is contained in:
Oliver Davies 2017-07-10 22:28:39 +01:00
parent 6f8d067847
commit 0c7de8559a
743 changed files with 92961 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

259
docs/blog/2010/08/10/review-adminhover-module/index.html Normal file
View file

@ -0,0 +1,259 @@
<!DOCTYPE html>
<html class="no-js" lang="en-GB">
<head>
<title>Review of the Admin:hover Module | 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/10/review-adminhover-module">
<meta property="og:title" content="Review of the Admin:hover Module"/>
<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>Review of the Admin:hover Module</h1>
<p class="posted">10th August 2010</p>
<p>Sorry for the lack of Blog posts lately, but <a href="http://horseandcountry.tv">my new job</a> that I started a few weeks ago has certainly been keeping me busy! I've got a few more posts that I'm preparing content for, and I'll hopefully be back into my weekly-post routine before too long!</p>
<p>Today, I'd like to just give a quick overview of the <a href="http://drupal.org/project/admin_hover">Admin:hover</a> module. It basically adds an administrative menu that pops up when you hover over a node or block within your Drupal website - the kind of functionality that was present within previous versions of the <a href="http://drupal.org/project/admin">Admin module</a>. It also integrates well with the <a href="http://drupal.org/project/devel">Devel</a> and <a href="http://drupal.org/project/node_clone">Clone</a> modules.</p>
<p>I've found this to be extremely useful whilst working on photo galleries etc. where multiple nodes are displayed in a grid format and I quickly need to publish or unpublish something for testing purposes. No longer do I need to open each node, or go into the administration area to perform the required actions.</p>
<p>It is also possible to customise which links are available from within the adminstration area. The possible selections that I currently have on this site are as follows:</p>
<p><strong>Node links:</strong></p>
<ul>
<li>Edit</li>
<li>Publish</li>
<li>Unpublish</li>
<li>Promote</li>
<li>Unpromote</li>
<li>Make sticky</li>
<li>Make unsticky</li>
<li>Delete</li>
<li>Clone</li>
<li>Dev load</li>
<li>View author</li>
<li>Edit author</li>
<li>Add</li>
</ul>
<p><strong>Block links:</strong></p>
<ul>
<li>Configure block</li>
<li>Add block</li>
</ul>
<p>Although, as I have additional contributed modules installed, some of these may not neccassaily be available out of the box.</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/drupal-modules">drupal-modules</a>, <a href="https://www.oliverdavies.uk/blog/tags/admin%3Ahover">admin:hover</a>, <a href="https://www.oliverdavies.uk/blog/tags/administration">administration</a> </p>
<div class="post-pager is-flex">
<div class="is-half">
<a href="/blog/2010/07/12/review-teleport-module">
&laquo; Review of the Teleport Module
</a>
</div>
<div class="is-half text-right">
<a href="/blog/2010/08/11/create-better-photo-gallery-drupal-part-1">
Create a Better Photo Gallery in Drupal - Part 1 &raquo;
</a>
</div>
</div>
<div class="about-author">
<h2>About the Author</h2>
<img src="//images.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="//images.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="//images.oliverdavies.uk/assets/images/drupal-8.jpg"
/>
</a>
<img
src="//images.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="//images.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/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">
&copy; 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="//images.oliverdavies.uk/assets/images/meetups/drupal-bristol.jpeg" alt="Drupal Bristol">
</a>
</li>
<li class="meetups--drupalcamp-bristol">
<a href="http://www.drupalcampbristol.co.uk" title="DrupalCamp Bristol">
<img src="//images.oliverdavies.uk/assets/images/meetups/drupalcamp-bristol.png" alt="DrupalCamp Bristol">
</a>
</li>
<li class="meetups--phpsw">
<a href="http://phpsw.uk" title="PHPSW">
<img src="//images.oliverdavies.uk/assets/images/meetups/phpsw.jpeg" alt="PHPSW">
</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>

325
docs/blog/2010/08/11/create-better-photo-gallery-drupal-part-1/index.html Normal file
View file

@ -0,0 +1,325 @@
<!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">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">&lt;?php
$selected_gallery = db_result(db_query("
SELECT nid
FROM {node}
WHERE type = 'gallery'
AND title = '$title'
"));
?&gt;
</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">&lt;?php
$gallery_total = db_result(db_query("
SELECT COUNT(*)
FROM {content_type_photo}
WHERE field_gallery_nid = $selected_gallery
"));
?&gt;
</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">&lt;?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
"));
?&gt;
</code></pre>
<p>This was all then added into a 'print' statement which displayed it into the page.</p>
<pre><code class="language-php">&lt;?php
if ($selected_gallery_total != 0) {
$output = '&lt;i&gt;There are currently ' . $selected_gallery_total . ' photos in this gallery.';
$output .= 'Last one added on ' . $latest_photo . '&lt;/i&gt;';
print $output;
}
?&gt;
</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">&lt;?php
if ($selected_gallery_total != 0) {
$output = '&lt;i&gt;There are currently ' . $selected_gallery_total . ' photos in this gallery.';
$output .= 'Last one added on ' . date("l, jS F, Y", $latest_photo) . '.&lt;/i&gt;';
print $output;
}
?&gt;
</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">
&laquo; 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 &raquo;
</a>
</div>
</div>
<div class="about-author">
<h2>About the Author</h2>
<img src="//images.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="//images.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="//images.oliverdavies.uk/assets/images/drupal-8.jpg"
/>
</a>
<img
src="//images.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="//images.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/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">
&copy; 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="//images.oliverdavies.uk/assets/images/meetups/drupal-bristol.jpeg" alt="Drupal Bristol">
</a>
</li>
<li class="meetups--drupalcamp-bristol">
<a href="http://www.drupalcampbristol.co.uk" title="DrupalCamp Bristol">
<img src="//images.oliverdavies.uk/assets/images/meetups/drupalcamp-bristol.png" alt="DrupalCamp Bristol">
</a>
</li>
<li class="meetups--phpsw">
<a href="http://phpsw.uk" title="PHPSW">
<img src="//images.oliverdavies.uk/assets/images/meetups/phpsw.jpeg" alt="PHPSW">
</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>

253
docs/blog/2010/08/17/create-better-photo-gallery-drupal-part-2/index.html Normal file
View file

@ -0,0 +1,253 @@
<!DOCTYPE html>
<html class="no-js" lang="en-GB">
<head>
<title>Create a Better Photo Gallery in Drupal - Part 2 | 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/17/create-better-photo-gallery-drupal-part-2">
<meta property="og:title" content="Create a Better Photo Gallery in Drupal - Part 2"/>
<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 2</h1>
<p class="posted">17th August 2010</p>
<p>At the end of my last post, I'd finished creating the first part of the new photo gallery, but I wanted to change the dates of the published photos to reflect the ones on the client's original website.</p>
<p>Firstly, I'll refer to the previous list of published galleries that I created before, and create something different that also displays the created and modified dates. Picking the node ID of the required gallery, I used the following SQL query to display a list of photos.</p>
<pre><code class="language-sql">SELECT n.title, n.nid, n.created, n.changed, p.field_gallery_nid
FROM node n, content_type_photo pWHERE n.type = 'photo'
AND p.field_gallery_nid = 103AND n.nid = p.nid
ORDER BY n.nid ASC;
</code></pre>
<p>When I look back at the old photo gallery, I can see that the previous 'last added' date was June 27, 2008. So, how do I update my new photos to reflect that date? Using <a href="http://www.onlineconversion.com/unix_time.htm">http://www.onlineconversion.com/unix_time.htm</a>, I can enter the required date in its readable format, and it will give me the equivilent UNIX timestamp. To keep things relatively simple, I'll set all photos within this gallery to the same time.</p>
<p>The result that I'm given is '1217149200'. I can now use an UPDATE statement within another SQL query to update the created and modified dates.</p>
<pre><code class="language-sql">UPDATE node
INNER JOIN content_type_photo
ON node.nid = content_type_photo.nid
SET
node.created = 1217149200,
node.changed = 1217149200
WHERE content_type_photo.field_gallery_nid = 103
</code></pre>
<p>Now when I query the database, both the created and modified databases have been updated, and when I return to the new photo gallery, the updated value is being displayed.</p>
<p>Once the changes have been applied, it's a case of repeating the above process for each of the required galleries.</p>
<p>In the next post, I'll explain how to add a count of published galleries and photos on the main photo gallery page, as well as how to install and configure the <a href="http://drupal.org/project/shadowbox">Shadowbox</a> module.</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/sequel-pro">sequel-pro</a> </p>
<div class="post-pager is-flex">
<div class="is-half">
<a href="/blog/2010/08/11/create-better-photo-gallery-drupal-part-1">
&laquo; Create a Better Photo Gallery in Drupal - Part 1
</a>
</div>
<div class="is-half text-right">
<a href="/blog/2010/08/20/review-image-caption-module">
Review of the Image Caption Module &raquo;
</a>
</div>
</div>
<div class="about-author">
<h2>About the Author</h2>
<img src="//images.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="//images.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="//images.oliverdavies.uk/assets/images/drupal-8.jpg"
/>
</a>
<img
src="//images.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="//images.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/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">
&copy; 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="//images.oliverdavies.uk/assets/images/meetups/drupal-bristol.jpeg" alt="Drupal Bristol">
</a>
</li>
<li class="meetups--drupalcamp-bristol">
<a href="http://www.drupalcampbristol.co.uk" title="DrupalCamp Bristol">
<img src="//images.oliverdavies.uk/assets/images/meetups/drupalcamp-bristol.png" alt="DrupalCamp Bristol">
</a>
</li>
<li class="meetups--phpsw">
<a href="http://phpsw.uk" title="PHPSW">
<img src="//images.oliverdavies.uk/assets/images/meetups/phpsw.jpeg" alt="PHPSW">
</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>

238
docs/blog/2010/08/20/review-image-caption-module/index.html Normal file
View file

@ -0,0 +1,238 @@
<!DOCTYPE html>
<html class="no-js" lang="en-GB">
<head>
<title>Review of the Image Caption Module | 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/20/review-image-caption-module">
<meta property="og:title" content="Review of the Image Caption Module"/>
<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>Review of the Image Caption Module</h1>
<p class="posted">20th August 2010</p>
<p>Up until as recent as last week, whenever I added an image into one of my Blog posts, I was manually adding the caption below each image and styling it accordingly. That was until I installed the <a href="http://drupal.org/project/image_caption">Image Caption</a> module.</p>
<p>The Image Caption module uses jQuery to dynamically add captions to images. Here is a walkthrough of the process that I followed to install and configure the module. As always, I used Drush to download and enable the module, then visited the Image Caption Settings page (admin/settings/image_caption). Here, I select which node types should be included in image captioning. In my case, I only wanted this to apply to Blog posts.</p>
<p>As I use the <a href="http://drupal.org/project/filefield">FileField</a>, <a href="http://drupal.org/project/imagefield">ImageField</a> and <a href="http://drupal.org/project/insert">Insert</a> modules to add images to my posts, as opposed to via a WYSIWYG editor, I'm able to add the CSS class of 'caption' to my images.</p>
<p>Now, all images inserted this way will have the CSS class of 'caption'.</p>
<p>As the Image Caption module uses the image's title tag to create the displayed caption, I enabled the custom title text for my Image field so that when I upload an image, I'm prompted to enter text for the caption.</p>
<p>This results in a span called <code>image-caption-container</code> around the inserted image, and a caption below it called <code>image-caption</code> containing the text.</p>
<p>All that's left is to style these classes within your CSS stylesheet.</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">drupal</a>, <a href="https://www.oliverdavies.uk/blog/tags/drupal-6">drupal-6</a>, <a href="https://www.oliverdavies.uk/blog/tags/imagefield">imagefield</a>, <a href="https://www.oliverdavies.uk/blog/tags/image-caption">image-caption</a> </p>
<div class="post-pager is-flex">
<div class="is-half">
<a href="/blog/2010/08/17/create-better-photo-gallery-drupal-part-2">
&laquo; Create a Better Photo Gallery in Drupal - Part 2
</a>
</div>
<div class="is-half text-right">
<a href="/blog/2010/09/26/south-wales-drupal-user-group">
The Inaugural Meetup for the South Wales Drupal User Group &raquo;
</a>
</div>
</div>
<div class="about-author">
<h2>About the Author</h2>
<img src="//images.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="//images.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="//images.oliverdavies.uk/assets/images/drupal-8.jpg"
/>
</a>
<img
src="//images.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="//images.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/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">
&copy; 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="//images.oliverdavies.uk/assets/images/meetups/drupal-bristol.jpeg" alt="Drupal Bristol">
</a>
</li>
<li class="meetups--drupalcamp-bristol">
<a href="http://www.drupalcampbristol.co.uk" title="DrupalCamp Bristol">
<img src="//images.oliverdavies.uk/assets/images/meetups/drupalcamp-bristol.png" alt="DrupalCamp Bristol">
</a>
</li>
<li class="meetups--phpsw">
<a href="http://phpsw.uk" title="PHPSW">
<img src="//images.oliverdavies.uk/assets/images/meetups/phpsw.jpeg" alt="PHPSW">
</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>