Drupal Planet

How to Create an Image Gallery in Drupal 7

It's not difficult. It really isn't, but people struggle over it. Lots. Let's see how to make an image gallery in Drupal 7 (the same theory will hold for Drupal 6 and, I presume, Drupal 8).

This will create an "Image Gallery" content type, with images within each gallery re-orderable by 'drag and drop'. Here we go.

You will need:

Technique

  • First off, enable the modules listed above.
  • Then we need to create a content type. In this case, we'll call it "Image Gallery".
  • Next, we need to create an image field inside this content type.
    • Choose "Image" as the field type and "Multiupload" as the widget type
    • Set the number of allowed values for this field to "Unlimited".
  • Create some image presets, such as:
    • Gallery Thumbnail (150px x 150px) - used on the gallery page to list the images in that gallery.
    • Gallery Full Size (1000px wide) - used in an overlay when Gallery Thumbnail images are clicked on.
  • Go to your "Manage Display" page for this content type and for "Full Content" set the following displays for the image field
    • Label = Hidden
    • Image = Colorbox
      • On the colorbox settings, set "Content Image Style" as "Gallery Thumbnail" and "Colorbox Image Style" as the "Gallery Full Size"
      • There are some other options here as well. Feel free to experiment.
      • Click "Update".
    • Click "Save".

Now you are ready to create an image gallery. You may need some CSS to float the images left/right and set some margins/padding.

You can then use Views to list the galleries and link each item in the list to its corresponding gallery.

(Note: a version of this is available on Drupal.org.)

Join the "Something nice ..." newsletter

The full title is "Something nice, something quirky, something else".

I send an email once a week with something nice, something quirky, and something else that I think is interesting (all with a web development theme, of course).

How to create a Drupal Installation Profile the easy way

It's not rocket science, this building installation profiles/distributions with Drupal!

Creating your own Drupal installation profile is a great way to save time when building a new website if you have many features that you use again and again on projects, such as news content type, image galleries, rotating slider. It's a great way to store your configuration in code and build and rebuild your site while in development. It's also best practice if you want to share code and rebuilds between developers working on large projects.

So, how do ywou make an installation profile, the easy way? The easiest way to create an installation profile is to just copy one that comes with Drupal core and modify it. To do this;

  • Open up your profiles folder, find the folder called "standard" and copy it, then rename it to whatever you want. I call mine "adfl" as I do work as a freelancer under the name "A Design for Life".
  • Next, rename each file in your new folder from standard.profile to adfl.profile, standard.install to adfl.install, standard.info to adfl.info.
  • In the .info file, edit the description to something more meaningful for your installation profile.
  • Finally, open each file and replace the word "standard" in the code with the word "adfl".

You now have a working installation profile called adfl, but it does the exact same as the standard installation profile. Let's customise it.

In the .info file, you'll see a number of modules already installed, like so:

dependencies[] = block
dependencies[] = color
dependencies[] = comment
dependencies[] = contextual
dependencies[] = dashboard
dependencies[] = help
dependencies[] = image
dependencies[] = list
dependencies[] = menu
dependencies[] = number
dependencies[] = options
dependencies[] = path
dependencies[] = taxonomy
dependencies[] = dblog
dependencies[] = search
dependencies[] = shortcut
dependencies[] = toolbar
dependencies[] = overlay
dependencies[] = field_ui
dependencies[] = file
dependencies[] = rdf

We can turn these off by deleting some, like so (or simply placing a semi-colon before them to comment them out):

dependencies[] = block
dependencies[] = comment
dependencies[] = contextual
dependencies[] = image
dependencies[] = list
dependencies[] = menu
dependencies[] = number
dependencies[] = options
dependencies[] = path
dependencies[] = taxonomy
dependencies[] = dblog
dependencies[] = search
dependencies[] = field_ui
dependencies[] = file
; this is commented out dependencies[] = overlay
dependencies[] = rdf

Now, if you reinstall your website, you'll see that we only have the above modules installed. We can now add in some modules that we use on every website. Place these modules in profiles/adfl/modules/contrib. We add them like so:

dependencies[] = admin_menu dependencies[] = ctools dependencies[] = features dependencies[] = views

Keep adding whatever modules you need. Now, when you resinstall your site drush si adfl, you'll see these modules also installed. To add custom functionality, you create features, and then add those features to your install profile, like so:

dependencies[] = adfl_blog dependencies[] = adfl_views_blog dependencies[] = adfl_gallery dependencies[] = adfl_views_gallery

A new site install will have these features enabled as well. A site install gives some simple errors at the moment: since I don't have dashboard enabled, the blocks placed in the dashboard can't be placed. Opening the .install file, we can find where this is and delete it:

array( 'module' => 'search', 'delta' => 'form', 'theme' => $default_theme, 'status' => 1, 'weight' => -1, 'region' => 'sidebar_first', 'pages' => '', 'cache' => -1, ), array( 'module' => 'node', 'delta' => 'recent', 'theme' => $admin_theme, 'status' => 1, 'weight' => 10, 'region' => 'dashboard_main', 'pages' => '', 'cache' => -1, ), array( 'module' => 'user', 'delta' => 'login', 'theme' => $default_theme, 'status' => 1, 'weight' => 0, 'region' => 'sidebar_first', 'pages' => '', 'cache' => -1, ),

In the above case, we need to delete the array

array( 'module' => 'node', 'delta' => 'recent', 'theme' => $admin_theme, 'status' => 1, 'weight' => 10, 'region' => 'dashboard_main', 'pages' => '', 'cache' => -1, ),

Then, just keep building up your profile with features, theme, variable settings, etc. There you go, a custom installation profile, the easy way. (Might be better to start with minimal as your base, I'm only using standard for illustration.)

Join the "Something nice ..." newsletter

The full title is "Something nice, something quirky, something else".

I send an email once a week with something nice, something quirky, and something else that I think is interesting (all with a web development theme, of course).

Drupal Open Days Ireland 2014 Announced

Drupa Open Days 2014 - two days of discussions, workshops, presentations, Q&As, and socialising - all built around the theme of Drupal and what it can do for you - has just been announced.

Come to Drupal Open Days 2014, 16-17th May, to find out how you can use Drupal for your next website or online application. This free event has a variety of guided training, presentations and small group discussions. You’ll learn loads, get your questions answered and meet some friendly people too.

Drupal is an open source CMS (content management system) that allows an individual, a community of users, or an organization to easily publish, manage and organize a wide variety of content on a website or application. http://drupal.org/

Full details at: http://2014.drupal.ie

The event is at the the Guinness Enterprise Center. This event is free, however registration is required.

*Note: I am in charge of organising speakers. If you have a session/presention to you like to give or be in attendance for, just let me know.

Join the "Something nice ..." newsletter

The full title is "Something nice, something quirky, something else".

I send an email once a week with something nice, something quirky, and something else that I think is interesting (all with a web development theme, of course).

Tutorial: How to Install CKEditor with Drupal 7

Back in the good old days (circa 2008, Drupal 6.3) there was me. Me and my Drupal installations. And not much of a clue about anything. Then I thought, if only I had a WYSIWYG editor, my life would be complete. Then I tried to install one (TinyMCE specifically) and  lo!, my nightmares began in earnest.

These days, it's quite simple - in Who Wants to be a Millionaire terms ("it's only easy if you know the answer"). These days, I use CKEditor. Why? Well, it's going to be in core for Drupal 8, so I thought I might as well get used to it, but since making that decision a year ago, I find it a very pleasant editor to use. Then there was a damsel person in distress on Twitter wondering how to install it, so I thought "time to jump into character and save the poor soul".

@AgentCD are you sure? I've never paid for it. Can you send a link to it being premium. Perhaps I should write a blog post on installing it.

 

 

So, here goes.

  1. Download the CKEditor module for Drupal.
    1. This gives you a Drupal module to power the CKEditor WYSIWYG - it is NOT the editor itself, merely a bridge to it.
  2. Download CKEditor library from CKEditor.com.
    1. Extract the .zip folder you get from this.
    2. This is the editor itself. You need the Drupal module from 1 above to act as a bridge to this.
  3. Download the Libraries module for Drupal.
  4. In your sites/all/libraries module, drop in the CKEditor folder that you have downloaded from CKEditor.com, so you should have sites/all/libraries/ckeditor
  5. Enable the CKEditor and Libraries modules in your Drupal installation on your modules page.
  6. Take a bow. That should do it, now you can go to admin/config/content/ckeditor on your website and start playing with your sexy new WYSIWYG.

Join the "Something nice ..." newsletter

The full title is "Something nice, something quirky, something else".

I send an email once a week with something nice, something quirky, and something else that I think is interesting (all with a web development theme, of course).

Drupal Camp Cork 2013 - A Retrospective

Wow - what a weekend we had! All the great and good of the Irish Drupal community descended upon The People's Republic of Cork last weekend for Drupal Camp.

The camp started off with Gary Hammond (@manonmir) from iterate talking about adopting Drupal as a business, with some advice that started a great discussion about "defending Drupal" - the need to promote Drupal as a platform but also to defend the attacks that are levelled against it from proprietory vendors and others. Following this, Alan Burke (@alanjosephburke) from Annertech gave an overview of their work on the Oxfam Website, work which resulted in a large increase of site activity and also revenue for Oxfam. Lastly for this morning session, Daniel Alb (@danielalbro) from Monsoon Consulting extolled the benefits of Responsive Web Design (RWD) over unresponsive and/or mobile web design. This latter presentation gave me reason to demo a small animation I created using breakpoints. See here (on desktop, then resize the browser).

After coffee, we were treated to a talk on CoffeeScript by Mark Horgan. If I ever become a Javascript guru, I'll look into that a bit more - for this weekend, I was happy to learn as much as I did and get introduced to Grunt at the same time. Heather James (@learningdrupal) from Acquia took the podium to give us a preview blow us away with a preview of Drupal 8 - responsive images, configuration in code, in-place editing, and more, more, more. We needed lunch after that.

Mapping with Drupal - the topic I most wanted to hear about - was presented by Feargal O'Kane (@gul) from BT48. Best presentation of the weekend - Open Layers, changing map settings/layouts, layers - need I say more? Well, to host a complex mapping website, you might need the help of our next presenter - Jochen Lillich (@geewiz) from FreistilBox, who spoke about building high performance hosting stacks for Drupal. Jochen was followed by Peter Woalanin from Acquia with an in-depth look at the hook and plugin system for Drupal 8. Now, time for more coffee and sandwiches, and then on to ...

... Alan Burke to give an overview of configuration in code for Drupal 8, assisted by Conor Cahill (@conorc) from Fluid Edge who took the reins as a trusty sidekick. Suffice to say, everyone was impressed.

On Saturday we spent the morning engaged in round table discussions about various topics such as Twig, CSS animations, Grunt and Phing, and more, before moving on to our AGM in the afternoon. Ah, the AGM and our voting structures - le's just say, we all know a bit more about "single transferrable votes" now (and coin tossing!).

No need to mention the social aspects, the chats, the drinks, the food, the shuttleboard, the (nearly) dancing in a late bar, "jacketgate" in a hotel toilet, and - ultimately - the fun of yet another successful Drupal Camp. Thanks to Ruairi (@Snakedog_101) for organising.

Join the "Something nice ..." newsletter

The full title is "Something nice, something quirky, something else".

I send an email once a week with something nice, something quirky, and something else that I think is interesting (all with a web development theme, of course).

Drupal Camp Cork 2013 this weekend

That marvelous event of nature that only happens twice a year (no, it's not the solstice (or the equinox)) is upon us: Drupal Camp in Ireland. This time, we're off to the rebel county: Cork.

Although, the Dublin event usually has a larger turnout, we're expecting quite a good attendance in Cork this weekend, with about 50 registered so far on the official website and surely more to arrive on the day. Who's on the roll of honour? The biggest names in Drupal Ireland: Me (@markconroy), Stella (@snpower), Alan (@alanjosephburke), Gary (@manonmir), and of course the main organiser Ruairi (@Snakedog_101). So, basically, if you have a Drupal question or project that you'd like to discuss, one of us will surely be able to help you out - don't be shy.

And the topics (in order of what I am looking forward to:

You can read the full schedule here.

Did I also mention: LOTS OF BEER! - Looking forward to seeing y'all in Cork.

Join the "Something nice ..." newsletter

The full title is "Something nice, something quirky, something else".

I send an email once a week with something nice, something quirky, and something else that I think is interesting (all with a web development theme, of course).

Solution: Using AJAX with Drupal Views' Better Exposed Filters Module

You have a view listing nodes on your Drupal website and wish to use Better Exposed Filters as links that load in AJAX (perhaps inside a panel pane). Sounds simple? It should be. But ...

Click here for the but.

The problem is that AJAX doesn't work in panes when using the BEF module if the filters are exposed as links. There is a patch on its way to the main module, but in the mean time, I have solved this issue by doing the following:

1) Select Better Exposed Filters
2) Under BEF Settings, select checkboxes/radio buttons
3) Add some CSS to hide the radio button circles and style your filters

Now, it's not "links" but it functions the same.

Sample CSS:

.bef-select-as-radios .form-radio {
    display: none;
}

.bef-select-as-radios .form-item {
    display: inline-block;
    color: #ff0000;
    margin-right: 10px;
}

.bef-select-as-radios .form-item:hover, .bef-select-as-radios .form-item:focus {
    color: #ffff00;
    cursor: pointer;
}

Originally posted here.

Join the "Something nice ..." newsletter

The full title is "Something nice, something quirky, something else".

I send an email once a week with something nice, something quirky, and something else that I think is interesting (all with a web development theme, of course).

Drupal: How to Print a Pager for a View in a Block

Aaaarrgghh ... the Drupal mantra - "there's a module for that" - didn't hold true! There was no module. I had to come up with a solution; a solution to a problem that should have been simple (it was in the end).

I had a spec for a job to create image galleries of "our work", one node per image and 5 categories with about 20 samples in each category - so about 100 nodes. Each category was part of a dropdown menu (created using DHTML Menu module), whereby if you click on a category, it would show the first "sample work" image and a pager in the sidebar to scroll to the next item. Sounds simple? it did to me.

So, off I went looking for a "Drupal views pager in block module" using my favourite search engine! The closest I could find was the FreePager module - a great module - but it didn't suit my specific need, in that it could scroll through nodes, but I needed it to scroll through items in a view.

The solution? Here:

  1. Create the view with the five different categories.
  2. Add a "block" display to the view.
  3. Click on "Theme: Information" to see the list of possible views tpl files available for that block.
  4. Choose the most suitable one - in my case: views-view-work-gallery-block.tpl.php.
  5. Create a file called the above and paste in the given code.
  6. Remove the unneccessary code, in my case everything except the print pager section.
  7. Place this file in your theme directory.
  8. Place the block in your sidebar and hey, presto!

Join the "Something nice ..." newsletter

The full title is "Something nice, something quirky, something else".

I send an email once a week with something nice, something quirky, and something else that I think is interesting (all with a web development theme, of course).

Drush Sup - Upgrade Site from Drupal 6 to Drupal 7 to Drupal 8

You want to upgrade your website from Drupal 6 to Drupal 7. The easy way!

You want to upgrade your website from Drupal 6 to Drupal 7. The easy way! This means, you've heard about the great drush command drush sup which acts like Pedro - if you vote for it, all of your dreams will come true.

How do you use drush sup or drush site-upgrade? Simple, open terminal (or equivalent), navigate to your home folder (cd ~) and enter drush dl sup. Viola, you've downloaded the site upgrade extension for drush. What's next? The easy part - create a site alias for your new version as told in the readme.txt, something like:


 

$aliases['newsite'] = array(
'root' => '/srv/www/dump',
'uri' => 'mynewsite.com',
);

You need to call this file aliases.drushrc.php. You can place all of your site aliases in this file in future. And then run drush sup @newsite (or whatever the alias you called it was) - and ... then ... it doesn't work. Why not? Well, because you didn't put the code above inside php brackets, like this:

<?php
$aliases['newsite'] = array(
'root' => '/srv/www/dump',
'uri' => 'mynewsite.com',
);
?>

Now it works. Go run drush sup @newsite. Did it work? No? Really? Why not? Probably because you don't know where to put the file. Simple (when you know the answer) - put it in side your drush folder, perhaps at ~/Users/yourname/dev/drush/ (there's an examples folder in there as well with some nice examples).

Now, run drush sup @newsite and Yee Haw!

Join the "Something nice ..." newsletter

The full title is "Something nice, something quirky, something else".

I send an email once a week with something nice, something quirky, and something else that I think is interesting (all with a web development theme, of course).

How to Install Drush on H-Sphere enabled CentOS Server

Drush makes your Drupal life easy (well, easier).

Installing Drush is simple, for most people on most systems, but sometimes you get folks who like to have a control panel, such as H-Sphere. Nothing wrong with that, unless when you install Drush, you get the dreaded "can't find php" or similar message. What to do? Follow these steps after logging in to your server via ssh:

1 - Grad a copy of Drush and untar it in your shared folder

sudo wget --quiet -O - http://ftp.drupal.org/files/projects/drush-7.x-4.5.tar.gz | sudo tar -zxf - -C /usr/local/share

(Note, change the link above you the link to the latest version of drush on Drupal.org. You can do this by going to drupal.org/project/drush and on the download link, right-click and choose copy link location.)

2 - Create a symbolic link to where Drush can be found on your server

sudo ln -s /usr/local/share/drush/drush /usr/local/bin/drush

3 - Get Drush to auto download the required "stuff"

sudo drush

Drush won't work yet as it won't know where to find php, so

4 - Open your bash_profile file and edit the PATH line from something like this:

bash_profile: PATH=/hsphere/shared/bin:/hsphere/shared/sbin:/hsphere/local/var/vpopmail/bin:/usr/local/bin:/usr/local/sbin:$PATH:$HOME/bin

to something like this (note the php path in this version):

PATH=/hsphere/shared/bin:/hsphere/shared/sbin:/hsphere/local/var/vpopmail/bin:/usr/local/bin:/usr/local/sbin:/hsphere/shared/php53/bin:$PATH:$HOME/bin

5 - Reboot your server and YEE HAW!

Join the "Something nice ..." newsletter

The full title is "Something nice, something quirky, something else".

I send an email once a week with something nice, something quirky, and something else that I think is interesting (all with a web development theme, of course).