- Node management script
- Easy recipe for posting events with signups on your website
- Handling PDO:_construct error on XAMPP
- Merit badges and counselors for Boy Scout site
- Easy Recipe for a photo gallery with a slideshow block
- How much should a website cost?
- From "Brochureware" to "Communityware"
- rgrep
- Limiting number of characters allowed in a profile field
- Why build websites using Drupal?
Easy Recipe for a photo gallery with a slideshow block
Background
You have an active online community (your scout troop or church) where members are taking photos at events. You want to collect those photos into various photo albums and also make them available in a block on your other pages. Here's a quick step-by-step recipe.
- Download, install, enable the modules you'll need: CCK, Views, FileField, ImageField, ImageAPI, ImageCache, Views Slideshow
- Create a "photo" content type. Rename the title field "caption". Add a field called "photo".
- Create an imagecache preset that scales images to 195x159 (the same size as the standard calendar block, if you're displaying a calendar on your web page).
- Create a view called "slideshow". Set it to style "Slideshow".
- Here are my settings when you click the gear next to "Style: Slideshow".
- List type: Unordered list
- Slideshow mode: SingleFrame
- Set the SingleFrame options as you like them.
- I put a chunk of PHP code in the footer that prompts users in the role of "leader" to upload more pictures. Just click on the link next to "Footer" in "Basic settings", set your input type to "PHP Code" [you'll have to have allowed php code input earlier], and enter the following.
<?php
global $user;
if (in_array('leader',$user->roles)) {
print "Leader, got pix? Add 'em!";
}
?>
- Go to the block settings page (admin/build/block), and put the "slideshow: Block" block where you want it on the page, such as the left or right sidebar.
- Theming -- To make the image caption (title of the photo node) appear as an overlay along the bottom of the photos:
- Modify your theme's .info file to include custom.css. E.g.,
stylesheets[all][] = custom.css - Create custom.css in your theme folder. Put in the following:
.views_slideshow_singleframe_main .views-field-title .field-content
{
color:white;
display:block;
font-weight:bold;
margin-left: 4px;
margin-top: -26px;
}
.views-slideshow-controls-bottom
{
margin-top: 7px;
}
- Modify your theme's .info file to include custom.css. E.g.,
That's it. Like I said, simple. Let me know what you think!
