Node Gallery Style, Views & Theming

Contents:

• tpl.php files to customize pages.
• CSS to display gallery thumbnail page in a grid(2 examples).
• CSS to hide meta on gallery pages.
• Custom Breadcrumbs set up example.
• Views code to display gallery list page in table or grid format.
• Views code with random and latest image blocks.
• Views code for a block with gallery cover images that link to gallery.

tpl.php files to customize gallery pages

Files are located in node_gallery/theme

• gallery-cover-view.tpl.php
• gallery-images-list.tpl.php
• gallery-image-thumbnail.tpl.php
• gallery-teaser.tpl.php
• image-detail-view.tpl.php
• node-image-default.tpl.php

(this is valid for NG2 only, the code for NG3 can be found in the git sources)

Comment from issue queue:
If you want to change the image detail page.
Copy the file [node-image-default.tpl.php] to your [sites/all/themes] folder.
Rename it according to your gallery image node type.
With a standard installation it should be [node-node_gallery_image.tpl.php].
Then customize the file to produce your desired results.

Back to Top

CSS to display gallery thumbnail page in a grid (2 examples)

Note About CSS: (Cascading Style Sheet) Cascading means that the code cascades down the page. This also means that the code at the bottom over rides the code above it. To over ride existing code in the css file, place your code at the bottom.

Comment from issue queue:
Best practice is to place the css code in your theme css file at the bottom.
If you are using a core theme, copy the entire theme folder and place it inside the [sites/all/themes] folder.
Then add the to the css file at the bottom and save it.

Example 1, basic.

/*add on css to force grid view - can go in theme css*/

.gallery-images-list li {
  float: left;
  width: 24%;/* you can adjust this to your theme */
  min-height: 190px; /* if you use long titles which will be displayed under pictures some pictures may 'stuck' and not go to left, try lower value and you will see what I mean */
  background: none !important;
}
.gallery-images-list .image-thumbnail a {
  display: block;
  text-align: center;
}
.gallery-images-list .image-thumbnail img {
  margin: 5px;
}

Example 2, enhanced.

The CSS code given above for creating a thumbnail grid is very basic - it lines the images up in rows, but they still have bullets in front of them. The following will give you a more attractive grid, with the thumbnails presented in pale grey boxes.

Note that the pixel measurements in here are based on a 150px square thumbnail size. If you use a different size of thumbnails, adjust accordingly.

/*add on css to force grid view - can go in theme css*/

.gallery-images-list .item-list ul li {
  float: left;
  width: 162px;
  margin: 0 10px 10px 0;
  padding: 10px 5px 5px 5px;
  min-height: 210px; /* if you use long titles which will be displayed under pictures some pictures may 'stuck' and not go to left, try lower value and you will see what I mean */
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  list-style-type: none;
  text-align: center;
}

.gallery-images-list .item-list ul li .image-title {
  line-height: normal;
  margin: 0 auto;
  width: 150px;
}

.gallery-images-list .item-list ul li .image-thumbnail-view, .gallery-images-list .item-list ul li .image-thumbnail, .gallery-images-list .item-list ul li .image-thumbnail img {
  margin: 0 auto;
  width: 150px;
}

Back to Top

CSS to hide meta information and/or title on gallery pages

On the gallery list page it shows (title, image count, created date) and when you choose which gallery to view it shows the (title, image count, created date). This depends on how the cover and/or landing page are set, cover or thumbnails.
How the css works (cascading style sheet)
Basically choose the class selector .gallery-images-list or .gallery-cover-list and then add a class to target such as .image-title or .meta, then add the css directive such as {display: none;}. You can see the css class layout using the html tab in Firebug with Firefox.
The css classes for Gallery Thumbnail page using thumbnails(in order):
.gallery-images-list
.item-list
.first
.image-thumbnail-view
.image-thumbnail
.imagecache imagecache-node-gallery-thumbnail
.image-title
The css classes for Gallery List page using cover(in order):
.gallery-list
.gallery-cover-list
.first
.cover-image
.imagecache imagecache-node-gallery-cover
.title
.meta
.item-list
.first
.last
Examples to help get started:
In your themes CSS file add the css at the bottom, and clear the cache.

Hide just the image count(gallery list page):

.gallery-cover-list .meta .first{
  display: none;
}

Hide just the created at date(gallery list page):

.gallery-cover-list .meta .last{
  display: none;
}

Hide both image count and created at date(gallery list page):

.gallery-cover-list .meta{
  display: none;
}

Hide the gallery title(gallery list page):

.gallery-cover-list .title{
  display: none;
}

Hide the image title(gallery thumbnail page):

.gallery-images-list .image-title{
  display: none;
}

Having trouble? File a support request in the node_gallery issue queue, or post in the Drupal Post installation Forum.

Back to Top

Custom Breadcrumbs

Control Node Gallery breadcrumbs easily with the Custom Breadcrumbs module (and, recommended, Token module). A common reason to do this is because you do not want the gallery creator's username to display in the breadcrumb path. Here is an example; change the values to suit your needs.

1. Enable the Custom Breadcrumbs and Token modules.
2. Goto: Administer > Site building > Custom breadcrumbs (admin/build/custom_breadcrumbs)
3. Add a new custom breadcrumb (admin/build/custom_breadcrumbs/add)
4. Select Node type: Gallery
5. Leave Breadcrumb visibility blank.
6. Enter Titles:
   Galleries
7. Enter Paths:
   galleries
8. Submit.
9. Again Add a new custom breadcrumb (admin/build/custom_breadcrumbs/add)
10. Select Node type: Gallery Image
11. Enter Titles:
    Galleries
[parent-node-gallery-title-raw]
12. Enter Paths:
    galleries
[parent-node-gallery-path]
13. Submit.

Back to Top

Views code to display gallery list page in table or grid format

This code has the path as 'photo galleries'. You may need a different path and it can be changed after import. In the 'page view', subsection 'page settings' is Path: where you can change it.
This same view can be changed to unformatted or grid if preferred.
If using grid format, the description field can be removed for a better looking page.

Goto: Administer > Site building > Views > Import
Select this code, copy and paste it into Paste view code here: text box and click the "Import" button. The View name is already set in this code so that box can stay blank or give a new name if desired.

$view = new view;
$view->name = 'gallery_page';
$view->description = 'gallery_page';
$view->tag = 'gallery_page';
$view->view_php = '';
$view->base_table = 'node';
$view->is_cacheable = FALSE;
$view->api_version = 2;
$view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */
$handler = $view->new_display('default', 'Defaults', 'default');
$handler->override_option('fields', array(
  'gid_1' => array(
    'label' => '',
    'alter' => array(
      'alter_text' => 0,
      'text' => '',
      'make_link' => 0,
      'path' => '',
      'link_class' => '',
      'alt' => '',
      'prefix' => '',
      'suffix' => '',
      'help' => '',
      'trim' => 0,
      'max_length' => '',
      'word_boundary' => 1,
      'ellipsis' => 1,
      'strip_tags' => 0,
      'html' => 0,
    ),
    'link_to_node' => 1,
    'node_gallery_setting' => 'node_gallery_gallery',
    'exclude' => 0,
    'id' => 'gid_1',
    'table' => 'node_galleries_gallery',
    'field' => 'gid',
    'override' => array(
      'button' => 'Override',
    ),
    'relationship' => 'none',
  ),
  'title' => array(
    'label' => '',
    'alter' => array(
      'alter_text' => 0,
      'text' => '',
      'make_link' => 0,
      'path' => '',
      'link_class' => '',
      'alt' => '',
      'prefix' => '',
      'suffix' => '',
      'help' => '',
      'trim' => 0,
      'max_length' => '',
      'word_boundary' => 1,
      'ellipsis' => 1,
      'strip_tags' => 0,
      'html' => 0,
    ),
    'link_to_node' => 1,
    'exclude' => 0,
    'id' => 'title',
    'table' => 'node',
    'field' => 'title',
    'override' => array(
      'button' => 'Override',
    ),
    'relationship' => 'none',
  ),
  'image_count' => array(
    'label' => '',
    'alter' => array(
      'alter_text' => 0,
      'text' => '',
      'make_link' => 0,
      'path' => '',
      'link_class' => '',
      'alt' => '',
      'prefix' => '',
      'suffix' => '',
      'help' => '',
      'trim' => 0,
      'max_length' => '',
      'word_boundary' => 1,
      'ellipsis' => 1,
      'strip_tags' => 0,
      'html' => 0,
    ),
    'set_precision' => FALSE,
    'precision' => 0,
    'decimal' => '.',
    'separator' => ',',
    'prefix' => 'Total of ',
    'suffix' => ' Images',
    'exclude' => 0,
    'id' => 'image_count',
    'table' => 'node_galleries_gallery',
    'field' => 'image_count',
    'relationship' => 'none',
    'override' => array(
      'button' => 'Override',
    ),
  ),
  'body' => array(
    'label' => '',
    'alter' => array(
      'alter_text' => 0,
      'text' => '',
      'make_link' => 0,
      'path' => '',
      'link_class' => '',
      'alt' => '',
      'prefix' => '',
      'suffix' => '',
      'help' => '',
      'trim' => 0,
      'max_length' => '',
      'word_boundary' => 1,
      'ellipsis' => 1,
      'strip_tags' => 0,
      'html' => 0,
    ),
    'exclude' => 0,
    'id' => 'body',
    'table' => 'node_revisions',
    'field' => 'body',
    'override' => array(
      'button' => 'Override',
    ),
    'relationship' => 'none',
  ),
));
$handler->override_option('filters', array(
  'status' => array(
    'operator' => '=',
    'value' => '1',
    'group' => '0',
    'exposed' => FALSE,
    'expose' => array(
      'operator' => FALSE,
      'label' => '',
    ),
    'id' => 'status',
    'table' => 'node',
    'field' => 'status',
    'override' => array(
      'button' => 'Override',
    ),
    'relationship' => 'none',
  ),
  'type' => array(
    'operator' => 'in',
    'value' => array(
    'node_gallery_gallery' => 'node_gallery_gallery',
    ),
    'group' => '0',
    'exposed' => FALSE,
    'expose' => array(
      'operator' => FALSE,
      'label' => '',
    ),
    'id' => 'type',
    'table' => 'node',
    'field' => 'type',
    'override' => array(
      'button' => 'Override',
    ),
    'relationship' => 'none',
  ),
));
$handler->override_option('access', array(
  'type' => 'none',
));
$handler->override_option('cache', array(
  'type' => 'none',
));
$handler->override_option('title', 'Photo Galleries');
$handler->override_option('items_per_page', 0);
$handler->override_option('distinct', 1);
$handler->override_option('style_plugin', 'table');
$handler->override_option('style_options', array(
  'grouping' => '',
  'override' => 0,
  'sticky' => 0,
  'order' => 'asc',
  'columns' => array(
    'gid' => 'gid',
    'title' => 'title',
    'image_count' => 'image_count',
    'body' => 'body',
  ),
  'info' => array(
    'gid' => array(
      'separator' => '',
    ),
    'title' => array(
      'sortable' => 0,
      'separator' => '',
    ),
    'image_count' => array(
      'sortable' => 0,
      'separator' => '',
    ),
    'body' => array(
      'separator' => '',
    ),
  ),
  'default' => '-1',
));
$handler->override_option('row_options', array(
  'inline' => array(
    'gid' => 'gid',
    'title' => 'title',
    'image_count' => 'image_count',
    'body' => 'body',
  ),
  'separator' => '   ',
));
$handler = $view->new_display('page', 'Page', 'page_1');
$handler->override_option('path', 'photo_galleries');
$handler->override_option('menu', array(
  'type' => 'none',
  'title' => '',
  'description' => '',
  'weight' => 0,
  'name' => 'navigation',
));
$handler->override_option('tab_options', array(
  'type' => 'none',
  'title' => '',
  'description' => '',
  'weight' => 0,
));

Back to Top

Views Code for Random and Latest Image Blocks

Thanks to mjohnq3 for the code.

Goto: Administer > Site building > Views > Import
Select this code, copy and paste it into Paste view code here: text box and click the "Import" button. The View name is already set in this code so that box can stay blank or give a new name if desired.

$view = new view;
$view->name = 'node_gallery_blocks';
$view->description = 'Blocks for Node Gallery';
$view->tag = '';
$view->view_php = '';
$view->base_table = 'node';
$view->is_cacheable = FALSE;
$view->api_version = 2;
$view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */
$handler = $view->new_display('default', 'Defaults', 'default');
$handler->override_option('relationships', array(
  'fid' => array(
    'label' => 'Node Gallery: File',
    'required' => 0,
    'id' => 'fid',
    'table' => 'node_galleries',
    'field' => 'fid',
    'relationship' => 'none',
  ),
));
$handler->override_option('fields', array(
  'fid' => array(
    'label' => 'Click to visit this gallery',
    'alter' => array(
      'alter_text' => 0,
      'text' => '',
      'make_link' => 0,
      'path' => '',
      'link_class' => '',
      'alt' => '',
      'prefix' => '',
      'suffix' => '',
      'help' => '',
      'trim' => 0,
      'max_length' => '',
      'word_boundary' => 1,
      'ellipsis' => 1,
      'strip_tags' => 0,
      'html' => 0,
    ),
    'node_gallery_setting' => 'node_gallery_gallery',
    'view_mode' => 'teaser',
    'exclude' => 0,
    'id' => 'fid',
    'table' => 'node_galleries',
    'field' => 'fid',
    'relationship' => 'none',
    'override' => array(
      'button' => 'Override',
    ),
  ),
));
$handler->override_option('sorts', array(
  'random' => array(
    'id' => 'random',
    'table' => 'views',
    'field' => 'random',
  ),
));
$handler->override_option('access', array(
  'type' => 'none',
));
$handler->override_option('cache', array(
  'type' => 'none',
));
$handler->override_option('style_plugin', 'grid');
$handler->override_option('style_options', array(
  'grouping' => '',
  'columns' => '4',
  'alignment' => 'horizontal',
));
$handler = $view->new_display('block', 'Block Rnd', 'block_1');
$handler->override_option('sorts', array(
  'random' => array(
    'order' => 'ASC',
    'id' => 'random',
    'table' => 'views',
    'field' => 'random',
    'override' => array(
      'button' => 'Use default',
    ),
    'relationship' => 'none',
  ),
));
$handler->override_option('title', 'Random Image');
$handler->override_option('items_per_page', 1);
$handler->override_option('block_description', 'Random image(nodeGallery)');
$handler->override_option('block_caching', -1);
$handler = $view->new_display('block', 'Block Lat', 'block_2');
$handler->override_option('sorts', array(
  'created' => array(
    'order' => 'DESC',
    'granularity' => 'second',
    'id' => 'created',
    'table' => 'node',
    'field' => 'created',
    'override' => array(
      'button' => 'Use default',
    ),
    'relationship' => 'none',
  ),
));
$handler->override_option('title', 'Latest Image');
$handler->override_option('items_per_page', 1);
$handler->override_option('block_description', 'Latest image(nodeGallery)');
$handler->override_option('block_caching', -1);

Back to Top

Views block with gallery cover images that link to gallery

Thanks to Rik for the code.

Goto: Administer > Site building > Views > Import
Select this code, copy and paste it into Paste view code here: text box and click the "Import" button. The View name is already set in this code so that box can stay blank or give a new name if desired.

$view = new view;
$view->name = 'galleries_block';
$view->description = 'A block with all gallery cover images';
$view->tag = '';
$view->view_php = '';
$view->base_table = 'node';
$view->is_cacheable = FALSE;
$view->api_version = 2;
$view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */
$handler = $view->new_display('default', 'Defaults', 'default');
$handler->override_option('fields', array(
  'title' => array(
    'label' => '',
    'alter' => array(
      'alter_text' => 1,
      'text' => '<strong>[title]</strong>',
      'make_link' => 0,
      'path' => '',
      'link_class' => '',
      'alt' => '',
      'prefix' => '',
      'suffix' => '',
      'target' => '',
      'help' => '',
      'trim' => 0,
      'max_length' => '',
      'word_boundary' => 1,
      'ellipsis' => 1,
      'strip_tags' => 0,
      'html' => 0,
    ),
    'empty' => '',
    'hide_empty' => 0,
    'empty_zero' => 0,
    'link_to_node' => 1,
    'exclude' => 0,
    'id' => 'title',
    'table' => 'node',
    'field' => 'title',
    'relationship' => 'none',
    'override' => array(
      'button' => 'Override',
    ),
  ),
  'gid' => array(
    'label' => '',
    'alter' => array(
      'alter_text' => 0,
      'text' => '',
      'make_link' => 0,
      'path' => '',
      'link_class' => '',
      'alt' => '',
      'prefix' => '',
      'suffix' => '',
      'target' => '',
      'help' => '',
      'trim' => 0,
      'max_length' => '',
      'word_boundary' => 1,
      'ellipsis' => 1,
      'strip_tags' => 0,
      'html' => 0,
    ),
    'empty' => '',
    'hide_empty' => 0,
    'empty_zero' => 0,
    'link_to_node' => 1,
    'node_gallery_setting' => 'node_gallery_gallery',
    'exclude' => 0,
    'id' => 'gid',
    'table' => 'node_galleries_gallery',
    'field' => 'gid',
    'relationship' => 'none',
    'override' => array(
      'button' => 'Overrite',
    ),
  ),
));
$handler->override_option('access', array(
  'type' => 'none',
));
$handler->override_option('cache', array(
  'type' => 'time',
  'results_lifespan' => '3600',
  'output_lifespan' => '3600',
));
$handler->override_option('items_per_page', 0);
$handler->override_option('distinct', 1);
$handler->override_option('style_options', array(
  'grouping' => '',
));
$handler->override_option('row_options', array(
  'inline' => array(),
  'separator' => '',
  'hide_empty' => 0,
));
$handler = $view->new_display('block', 'Block', 'block_1');
$handler->override_option('block_description', '');
$handler->override_option('block_caching', -1);

Back to Top