World Map Album Part 2 - Configuring pop-up box

world map albm part 2 by kiwipion

Introduction

This tutorial is a follow-on from the world map tutorial where we ended up with a popup box displaying the node gallery title. Now that existing implementation was a little too bland for me and I have been causally looking around for a way not only to style the popup box but to configure the contents of the box. 

Recently I saw a post where you could now set the output of the popup box as a View Mode, bingo! On initial investigation I found out I had run out of View Modes and was reluctant to pinch any from the node gallery. ​Here's where entity view modes step in, they are an easy method of creating extra View Modes.

So the intention of the tutorial is to convert what we had completed in the end of the world map tutorial from this

to this

the major changes being about to replace the description field with the content' view mode and adding a style to replace the orange dots with a camera symbol.

Method

We are going to create a new view mode for the node gallery using the entity view modes,  then we will clone the node gallery view to set up a output of of up to four small sized thumbnails.

Module Skill Acquisition

• Openlayers
  • Styling
• Geofield
• Views
  • View Cloning
  • Views Relationships
• View Modes
• Image Styles

Prerequisite

Do the node gallery & world map tutorial part 1 first,

Install the entity view mode module.

​Steps

• Create a small thumbnail style, I'll be using the scale & crop effect so all the thumbnails are of the same dimensions.
• Add a new view mode in the node section via the entity view module. This can be found in the system section of the configuration page.
• Clone the node gallery view and in the Node Gallery Display (or whatever you called it.)
  • Edit the image field and
    • Change the formatter to image
    • The image style to the one we just created, in my case the world_map_thumbnail image style
    • link the image to nothing for we will rewrite the output to the Node Gallery itself instead of the Node Image later on in this tutorial.
  • Also nows a good time to remove the pager and just fix the number of items to be displayed, I'll keep my the same to four.
  • Add another display, which will be a "Entity content'
    • In the "ENTITY CONTENT SETTINGS'
      • Select the Entity type: to Content
      • Bundles: to Node Gallery
    • In the "Filter Criteria" change the content type to Node Gallery
    • The "Format" to grid, I'll keep the default columns to 4.
    • Also in "Format" change the fields to content and select the View Mode to the one we created from entity view modes, in my case the world map popup. 
• Go to the view that has openlayer configuration and go to the "OpenLayers Data Overlay details" display
• • Open up the format settings
    • Set the "description content" as <entire node>
    • And the "view mode" to the view mode we created from entity view mode in my case <world map popup>
    • We can also removed the title because it is already include with node's content type.
• Go to the Node Gallery's manage display settings
  • Enable the new view mode from the "Custom Display Settngs".
  • Ensure that the correct views fields are visible, note you should also check the Teaser & Full Content view modes in case the new views fields have been added to those.

Go to the worldmap and check the behavior of the popup box. Note that the thumbnail links have been disabled for their output would have gone to the image instead of the node gallery. We can redirect the link using the relationship  between the node gallery & node image that is provided via the node image's node refererence url. Examples of this technique are shown in the mutiple albums & node gallery pager tutorials.

• Go to the world map node gallery view, and select the node gallery display
  • Add a relationship by selecting the node reference url that belongs to the node image
  • Add a content:nid field
    • Select the relationship that was just created
    • Select exclude from display
  • Rearrange the fields so the content:nid is above the image field.
  • Go into the image field
    • Select "REWRITE RESULTS
      • Enable "Output this field as link
      • Get the Content:nid token value from "REPLACEMENT PATTERNS" and paste it into the link path as such

Now for a final bit of eye candy, let's change those yellow dots by adding a new openlayer style.

• Go to the openlayers styles list and click add. The remainder should be self explanatory. Note in the style properties I tend to use relative drupal paths and will be setting the size 25px by 25 px, 
• If everything has gone to plan your popup boxes should look something like this

Wrap-up

This now concludes this two part world album node gallery tutorial series. As well as gaining useful exposure to Openlayers and Geofield drupal modules, the viewer will have gained knowledge in views 3.0, views relationships, image styles, node references, cloning views, view modes to think of a few.

That's all for this one folks and remember don't forget to flush your cache.