How to Make a Simple Hover Gallery

(with descriptions on shadow overlays)

JAMES SINKIEWICZ
JAMES@MYDRUPALJOURNEY.COM
DRUPAL ~ JSCSJSCS
How to Make a Simple Hover Gallery
(with descriptions on shadow overlays)

INSPIRED BY WHITEHOUSE.GOV

Special thanks for the training videos at:

Choose a Fixed Width Theme
 Install and Enable Modules

CCK ImageCache
• Content • ImageCache UI
• Node reference • ImageAPI
• Text • ImageAPI GD2
• Option widgets
Views
ImageField • Views UI

FileField Views_Slideshow
• Views_Slideshow: singleframe
NodeReference_URL
Create a Gallery Background Image

950 x 400 background image

Upload to your “sites/default/files” folder for later use in CSS

ImageCache – Header Gallery Image

add new preset:

"header-full-520x345“

add action:
Scale and Crop
• Width 520
• Height 345

add action:
Sharpen
• Use defaults
ImageCache – Header Gallery Image

add new preset:

"header-full-520x345“

add action:
Of course, you can skip
Scale and Crop
this step if you only • Width 520
upload gallery images • Height 345

that are 520x345 pixels

in sizeadd
.
action:
Sharpen
• Use defaults
 Create Content Type for Title Images

1. Name:
o "Header Title Images“
2. Type:
o "header_title_images“
3. Submission form settings:
o Body field label ~ remove
label (make blank)
4. Workflow settings:
o Uncheck “Promoted to front
page”
Create Content Type for Title Images

4. Add field for Title Image

o Label: Header Title Image
o Field name: field_header_title_image
o Type of data to store: file
o Form element: image
o Global settings: “Required” checked.
5. Adjust field order to taste
o Title, Header Title Image, etc.
Create Content Type for Title Images

5. Adjust field order to taste

o Title, Header Title Image, etc.
 Create Content Type for Gallery Images

1. Name:
o "Header Image“
2. Type:
o "header_images“
3. Submission form settings:
o Body field label ~ Optionally
change to “Description”
4. Workflow settings:
o Uncheck “Promoted to front
page”
 Create Content Type for Gallery Images

4. Add field for Header Image

o Label: Header Image
o Field name: field_header_image
o Type of data to store: file
o Form element: image
o Global settings: “Required” checked.
5. Add field for Node Reference to Title Image
o Label: Title Image
o Field name: field_title_image
o Type of data to store: Node reference
o Form element: Reference from URL
o Global settings: “Required” checked.
o Check: “Use fallback behavior when editing content”
o Content types that can be referenced: check:"Header Title Images"
6. Adjust field order to taste
o Title, Title Image, Header Image, etc.
 Create Content Type for Gallery Images

4. Add field for Header Image

o Label: Header Image If you skip this
o Field name: field_header_image
o Type of data to store: file
step, you won’t
o Form element: image be able to change
o Global settings: “Required” checked. this field when
5. Add field for Node Reference to Title Imageediting existing
o Label: Title Image nodes.
o Field name: field_title_image
o Type of data to store: Node reference
o Form element: Reference from URL
o Global settings: “Required” checked.
o Check: “Use fallback behavior when editing content”
o Content types that can be referenced: check:"Header Title Images"
6. Adjust field order to taste
o Title, Title Image, Header Image, etc.
Create Content Type for Gallery Images
Create Title Images

335 x 100 Title image

Create Content:
Header Title Images

Create separate nodes

for each Header Title
Image
Create Content:
Header Images

Create separate nodes

for each Header Image.

Be sure to select the Node Reference Dropdown

appropriate "Title
Image:" from the
dropdown selection list.

Be sure to include some

comments in the Body
field area to be shown
in the shadow overlay.
 Creating the Views Block

Let's look at what we want to show:

 a single large Gallery image (slideshow)

 the body text of the Header Image (overlayed)

 a single Title Image associated with the Header Image

 (9) thumbnails of the Header Images (3x3 matirx)

 all on a background image

 Create
Views
Block
At admin/build/views

Click “Add” tab

View name:
header_slideshow

View description:
Header Gallery Slideshow

View type:
node

Click “Next”
 Create
Views
Block

Add display of type

Block

(since we will be showing

the Gallery slideshow as
a block in the header
region of our theme)
 Create
Views
Block

Add Relationship for

Title Images.

- Content: Title Image

(field_title_image)
Node reference -
Appears in: Header
Images

- default settings are fine

 Create
Views
Block

We will be adding four

fields:
1. Content:
Header Image
(field_header_image)
2. Node:
Body
3. Content:
Header Title Image
(field_header_title_imag
e)
4. Node:
Teaser
 Create
Views
Block

Click + to Add Field

Content: Header Image

(field_header_image)~ File -
Appears in: Header Images

Check “Exclude from display”

Label: Check “None”

Format: header-full-520x345
image
 Create
Views
Block
Remember
Click + to Add Field this
setting!

Content: Header Image

(field_header_image)~ File -
Appears in: Header Images

Check “Exclude from display”

Label: Check “None”

Format: header-full-520x345
image
 Create
Views
Block

Click + to Add Field

Repeating: ImageCache preset

not required if uploading
Content: Header Image 520x345 pixel gallery images.
(field_header_image)~ File - Leave Format set to “image”.
Appears in: Header Images

Check “Exclude from display”

Label: Check “None”

Format: header-full-520x345
image
 Create
Views
Block

Click + to Add Field

Node: Body

Label: Delete default

(blank)

Check “Exclude from

display”
 Create
Views
Block
Click + to Add Field
Again,
Excluding
from display!

Content: Header Title

Image
(field_header_title_image) ~
File - Appears in: Header Title
Images
Relationship: Title Image
Check “Exclude from display”
Label: Check “None”
Format: Image
 Create Views Block
Click + to Add Field Node: Teaser

Check “Rewrite the output of this field”

This is the
interesting
part!
 Create Views Block

A closer look at “Rewrite the output of this field”

 Create Views Block

A closer look at “Rewrite the output of this field”

A container
class to hold
everything.
 Create Views Block

A closer look at “Rewrite the output of this field”

A class for the
Gallery Image,
referenced with a
token.
 Create Views Block

A closer look at “Rewrite the output of this field”

A class for
the overlay
background.
 Create Views Block

A closer look at “Rewrite the output of this field”

A class for the

Title Image
referenced
with a token
 Create Views Block

A closer look at “Rewrite the output of this field”

A class for the body

(description) referenced
with a token.
 Create
Views
Block
Add Filters

Node: Published = Yes

Node: Type
Operator: Is One Of
Node type: Header Images
 Create Views Block

Style: Slideshow ~ Options

Change Style: from Unformatted

to Slideshow
 Create Views Block

Style: Slideshow ~ Options

Select Style Options cog wheel

 Create Views Block

Style: Slideshow ~ Options

 Create Views Block

Style: Slideshow ~ Options

Select “Bottom” for Pager

 Create Views Block

Style: Slideshow ~ Options

Select “Thumbnails” for

Pager Type
 Create Views Block

Style: Slideshow ~ Options

Select “Yes” for Activate

Slide and Pause on Pager
Hover
 Create Views Block

Style: Slideshow ~ Options

Review default settings for
remainder of slideshow style options

Select “fade” for Effect

 Create Views Block

Views Block
overview

Set “Items to
Display” to 9
 Create Views Block

Views Block
overview

Enter “Header
Slideshow Block”
to easily find this
Views Block on Block
settings page.
Add Views Header Slideshow
Block to Header Region

Find these settings at “admin/build/block”

Enjoy the View!
 CSS Setup

Create “local.css” file Modify theme “.info” file

 CSS Setup

Create “local.css” file Modify theme “.info” file

Create a blank text file

called “local.css” and
place in theme folder.
 CSS Setup

Create “local.css” file Modify theme “.info” file

Add stylesheets declaration

to theme “.info” file for
“local.css” file
Adding Style with CSS

Remember this Rewrite?

Note the class names.
 Adding Style with CSS (local.css)

Add
Background “position:relative;” allows us to
use “position:absolute;” on
Image other classes to exactly position
those elements within this
container.

.gallery-container{
position: relative;
width: 950px;
height: 400px;
background-image:url('/demo/sites/default/files/gallery-bkgd.png');
background-repeat:no-repeat;
}
 Adding Style with CSS (local.css)

Position
Gallery
Image

.gallery-header-image {
position: absolute;
right: 30px;
top: 27px;
}
 Adding Style with CSS (local.css)

Add Shadow Overlay Background

.shadow-block {
background-color: #000000;
height: 55px;
position: absolute;
right: 40px;
top: 310px;
width: 500px;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
 Adding Style with CSS (local.css)

Position
Body
(Description)
.gallery-desc {
color: #FFFFFF;
font-size: 1.5em;
position: absolute;
right: 40px;
top: 295px;
width: 490px;
}
#header .gallery-desc p {
line-height: 1.2em;
}
 Adding Style with CSS (local.css)

Position
Title
Image

.gallery-title-image {
left: 25px;
position: absolute;
top: 15px;
}
 Adding Style with CSS (local.css)

Position Thumbnails
#views_slideshow_singleframe_pager_header_slideshow-block_1 {
position: absolute;
top: 248px;
width: 390px;
z-index: 999;
}
Adding Style with CSS (local.css)

Views Slideshow sets Thumbnail size

We need to override this CSS

to resize the thumbnails to
better fit our design.
 Adding Style with CSS (local.css)

Style Thumbnails
#views_slideshow_singleframe_pager_header_slideshow-block_1 div a img {
height: 70px;
width: 115px;
margin-bottom: 7px;
outline: 3px solid #CCCCFF;
}

#views_slideshow_singleframe_pager_header_slideshow-block_1 .activeSlide a img{

outline: 3px solid #FFFFFF;
}
Enjoy the Gallery!