Issuu on Google+

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 Node reference Text Option widgets

• •

ImageCache UI ImageAPI ImageAPI GD2

Views ImageField

FileField

Views_Slideshow •

NodeReference_URL

Views UI

Views_Slideshow: singleframe


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: you can skip Scale and Crop

Of course, this step if you only • Width 520 • Height 345 upload gallery images that are 520x345 pixels action: in sizeadd . Sharpen

• Use defaults


Create Content Type for Title Images 1. Name: o

"Header Title Images“

2. Type: o

3.

Submission form settings: o

4.

"header_title_images“ Body field label ~ remove label (make blank)

Workflow settings: o

Uncheck “Promoted to front page”


Create Content Type for Title Images 4. Add field for Title Image o o o o o

Label: Header Title Image Field name: field_header_title_image Type of data to store: file Form element: image 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

3.

Submission form settings: o

4.

"header_images“ Body field label ~ Optionally change to “Description”

Workflow settings: o

Uncheck “Promoted to front page”


Create Content Type for Gallery Images 4.

Add field for Header Image o o o o o

5.

Add field for Node Reference to Title Image o

o o o o o o

6.

Label: Header Image Field name: field_header_image Type of data to store: file Form element: image Global settings: “Required” checked. Label: Title Image Field name: field_title_image Type of data to store: Node reference Form element: Reference from URL Global settings: “Required” checked. Check: “Use fallback behavior when editing content” Content types that can be referenced: check:"Header Title Images"

Adjust field order to taste o

Title, Title Image, Header Image, etc.


Create Content Type for Gallery Images 4.

5.

Add field for Header Image o

Label: Header Image Field name: field_header_image Type of data to store: file Form element: image Global settings: “Required” checked.

o

Field name: field_title_image Type of data to store: Node reference Form element: Reference from URL Global settings: “Required” checked. Check: “Use fallback behavior when editing content” Content types that can be referenced: check:"Header Title Images"

If you skip this o step, you won’t o be able to change o this field when o Add field for Node Reference to Title Imageediting existing nodes. o Label: Title Image o o o o o

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 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.

Node Reference Dropdown


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 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

Remember this setting!


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

Repeating: ImageCache preset not required if uploading 520x345 pixel gallery images. Leave Format set to “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

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

Again, Excluding from display!


Create Views Block Node: Teaser

Click + to Add Field

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

Add stylesheets declaration to theme “.info” file for “local.css” file

Modify theme “.info” file


Adding Style with CSS Remember this Rewrite? Note the class names.


Adding Style with CSS (local.css)

Add Background Image

“position:relative;” allows us to use “position:absolute;” on 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!


Gallery