Style, Views & Themeing

Contents:

  • tpl.php files to Customize Pages.
  • CSS to Display Gallery Thumbnail Page in a Grid(2 examples).
  • Custom Breadcrumbs set up example.
  • NEEDED...Views Code to Display Gallery Thumbnail Page for Import.
  • Views Code to Display Gallery List Page in Table Format for Import.
  • Views Code With Both Random and Latest Image Blocks for Import.

tpl.php files to Customize 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

Comment from issue que:
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 csacades 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 que:
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

Custom Breadcrumbs

This will control the breadcrumbs easily and installing Token will help.
This example was added because many people are not sure how to set up custom breadcrumbs. It's easy once you do it and see the result.
Install custom breadcrumbs and token. Enable the modules.
Goto: Administer > Site building > Custom breadcrumbs
----------------
Add a new breadcrumb for Node.

Node Type: Gallery

Titles:
Node Galleries

Paths:
node-gallery
----------------
Add a new breadcrumb for Node

Node Type: Gallery Image

Titles:
Node Galleries
[parent-node-gallery-title-raw]

Paths:
node-gallery
[parent-node-gallery-path]

 

Back to Top

Views Code for Import to Display Gallery Thumbnail Page

Maybe some one can provide this.

Back to Top

Views Code to Display Gallery List Page in Table Format

This code may have a different path and can be changed after import.
This same view can be changed to unformatted if preferred.

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 With Both Random and Latest Image Blocks for Import

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

»
Back to Top

 Back to Top