The project was to 'convert' a Flash-only site to Drupal (6), keeping the original design and most of the outward SWF animations. The goal was to add a content management system and to greatly improve SEO. The client is an event planner and most of the site is a photo gallery of events she's worked. I'm pleased to say that within a week her SEO goals were reached and she otherwise is delighted with the site.
The original site (archived): http://swf.stoneeventplanning.com
The reworked site using Drupal: http://stoneeventplanning.com
Most of the work was fairly straightforward: create a couple of content types and present them in a variety of Views. The challenging part (for me) was recreating the flash photo gallery - which provided a carousel-style menu of thumbnails of each 'event showcase', and then, once the user had clicked a thumbnail, a smooth presentation of each showcase with its own numbered menu.
I debated whether to create a module whereby all images in the gallery load at the same time but felt that even with aggressive caching the site would be too slow. Hence the goal was to first create the body of each gallery using a script that needed only the links to the images, rather than hide the images as many do; and second, to also create a block of thumbnails -- each leading to its own gallery -- in a jcaroursel-style menu. I therefore chose Trent Foley's jquery plugin Galleriffic as my main script for image presentation (since it does not hide the images not yet in view - and only needs a link to the image), and jcarousel for the menu. (Note: There is no module currently for Galleriffic.)
Important modules used:
- cck
- filefield
- imagefield
- imagefield_crop
- imagecache
- views
- views_slideshow
- nodequeue
Other scripts:
- jquery Galleriffic (http://www.twospy.com/galleriffic/)
Building the Gallery Content
To build the body of each gallery I created a cck content type called 'gallery' with a field for the photographer's name and then three distinct imagefield fields: One for an unlimited number of photos to appear in the gallery body; two: A field for the thumbnail to be used in the jcarousel menu; and three: If the client chose to do so, a single large image for another jcaroursel on the front page. Note: She prefered working with three separate fields rather than parsing a single image into different imagecache presets, but that could have done instead.
The first thing I did was set up the node-gallery.tpl.php file to play nicely with Galleriffic:
<?php
<div class="content">
<?php if ($node->field_gallery_photocredit[0]['value']) {?>
<p class="photocredit">Images courtesy of <?php print $node->field_gallery_photocredit[0]['value']?></p>
<?php }?>
<?php if ($node->field_showcase_image): ?>
<div id="thumbs-adv" class="navigation">
<h4>Images:</h4>
<ul class="thumbs noscript">
<?php
$i = 1;
foreach($node->field_gallery_image as $img) {
print '<li><a class="thumb" href="/' . $img['filepath'] . '" title="' . $i. '">'. $i .'</a></li>' . "\n";
$i++;
}
?>
</ul>
</div>
<!-- the following are needed in galleriffic-->
<div id="gallery-adv" class="gallerycontent">
<div id="controls-adv" class="controls"></div>
<div id="slideshow-adv" class="slideshow"></div>
</div>
<?php endif; ?>
</div>
?>Building the thumbnail menu
The above gallery.tpl.php code set up the Gallerific display. Now I needed a menu on the side with thumbnails for each gallery (in a jcaroursel), so I created a View - specifically a block which contained an html list of all galleries. I used fields instead of full node and only use the field of the thumbnail image, linked to the node. I called the View "gallery menu".
Using the Views theming system I created a file in the theme directory called 'views-view-list--gallery-menu.tpl.php' with the following code:
<?php
<?php $i=1;?>
<script type="text/javascript">
var container = $('#gallery_menu');
var startingPosition = $('li a',container).index($('.active',container));
jQuery(document).ready(function() {
jQuery('#gallery_menu').jcarousel({
auto: 0,
scroll: 4, //or however many thumbnails you want displayed at a time
vertical: true,
start: startingPosition,
wrap: 'last',
});
$("#gallery_menu a:not(.active)").fadeTo("fast", 0.6);
$("#gallery_menu a:not(.active)").hover(function(){
$(this).fadeTo("fast", 1.0);
},function(){
$(this).fadeTo("fast", 0.6);
});
});
</script>
<ul id="gallery_menu" class="jcarousel-skin-gallery" <?php //print $options['type']; ?>>
<?php foreach ($rows as $id => $row): ?>
<?php $i++; ?>
<li class="<?php print $i;?>"><?php print $row; ?></li>
<?php endforeach; ?>
</<?php print $options['type']; ?>>
?>Notes:
1. The var 'startingPosition' finds Drupal's 'active' class and then offsets the jcarousel to 'start' there.
2. The code towards the bottom of the script simply highlights the thumbnails with hover.
Primary menu effects
Finally, to imitate the Flash effect in the original site's primary menus I used:
<script type="text/javascript">
$(function() {
// Animate menu
$('.primary-links li a')
.css( {fontSize: "11px"})
.mouseover(function(){
$(this).stop().animate({fontSize:"14px"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({fontSize:"11px"}, {duration:1100, complete:function(){
$(this).css({fontSize:"11px"})
}})
})
// Set the scroll to anchor
anchor.init()
});
anchor = {
init : function() {
$("a.anchorLink").click(function () {
elementClick = $(this).attr("href")
destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, 1100 );
return false;
})
}
}
</script>Was a cool project. Within a week her Google indexing had jumped from six or seven pages deep to number one, and now she can add new content without waiting for the Flash guy to set it up for her.
Comments
_
Nicely done! I love the clean yet attractive appearance. And the galleries are great. Awesome job.
Who says drupal has to be ugly? lol
_
Don't be a Help Vampire - read and abide the forum guidelines.
If you find my assistance useful, please pay it forward to your fellow drupalers.
Awesome job! Looks like a fun
Awesome job! Looks like a fun project. I hadn't seen Galleriffic before, but now I'm inspired to use it (tied in either with CCK, as you did, or possibly with Views) for a portfolio on a current project. Do you think it'd even be possible to get Views to output to something that Galleriffic can work with?
One note: Maybe this is intended behavior, but the primary menu resize effect only works on the front page. Did you mean for it to work on other pages as well?
Nice job, you could probably
Nice job, you could probably help the SEO a little with some title meta and description meta tags.
Also there is a red x on the email link.
A GREAT Flash to drupal site
A GREAT Flash to drupal site conversion。 Almost the same as old flash site .
I have a question. How to make the sidebar thumbnail , on clicking it without a full page reload ?
Without a full page reload..
..You'd have a lot of images which would need to load at once (all the thumbnails, plus all the initial photos for each group). But probably with some aggressive caching this could be done well.
Maybe even should be done..
Nice site and great
Nice site and great explanation
ufoloji.net
I'd like to see this gallery
I'd like to see this gallery as a module, that would be really nice ;-)
http://shaman.us.to
Here's an in-development
Here's an in-development module to add Galleriffic as a style plugin in Views, which will get you pretty close: http://drupal.org/project/views_galleriffic