Sunday, September 20, 2015

Adding more images to the Nexus theme for Drupal

By default the Nexus theme only allows 3 images in the front page slider. For many of us this is not enough, so I outline the steps I took to add additional images by modifying some of the underlying code.

Add a new image

Once you've unpacked the theme, go to the /images folder and add your image and change the name to 'slide-image-4.jpg'

Modify  /templates/page.tpl.php

Edit the template found in /templates/page.tpl.php as follows and add the lines highlighted in red:


  <?php  
   $slide1_head = check_plain(theme_get_setting('slide1_head','nexus'));  $slide1_desc = check_markup(theme_get_setting('slide1_desc','nexus'), 'full_html'); $slide1_url = check_plain(theme_get_setting('slide1_url','nexus'));  
   $slide2_head = check_plain(theme_get_setting('slide2_head','nexus'));  $slide2_desc = check_markup(theme_get_setting('slide2_desc','nexus'), 'full_html'); $slide2_url = check_plain(theme_get_setting('slide2_url','nexus'));  
   $slide3_head = check_plain(theme_get_setting('slide3_head','nexus'));  $slide3_desc = check_markup(theme_get_setting('slide3_desc','nexus'), 'full_html'); $slide3_url = check_plain(theme_get_setting('slide3_url','nexus'));  
   $slide4_head = check_plain(theme_get_setting('slide4_head','nexus'));  $slide4_desc = check_markup(theme_get_setting('slide4_desc','nexus'), 'full_html'); $slide4_url = check_plain(theme_get_setting('slide4_url','nexus'));  
  ?>  
  <div id="slidebox" class="flexslider">  
   <ul class="slides">  
    <li>  
     <img src="<?php print base_path() . drupal_get_path('theme', 'nexus') . '/images/slide-image-1.jpg'; ?>"/>  
     <?php if($slide1_head || $slide1_desc) : ?>  
      <div class="flex-caption">  
       <h2><?php print $slide1_head; ?></h2><?php print $slide1_desc; ?>  
       <a class="frmore" href="<?php print url($slide1_url); ?>"> <?php print t('READ MORE'); ?> </a>  
      </div>  
     <?php endif; ?>  
    </li>  
    <li>  
     <img src="<?php print base_path() . drupal_get_path('theme', 'nexus') . '/images/slide-image-2.jpg'; ?>"/>  
     <?php if($slide2_head || $slide2_desc) : ?>  
      <div class="flex-caption">  
       <h2><?php print $slide2_head; ?></h2><?php print $slide2_desc; ?>  
       <a class="frmore" href="<?php print url($slide2_url); ?>"> <?php print t('READ MORE'); ?> </a>  
      </div>  
     <?php endif; ?>  
    </li>  
    <li>  
     <img src="<?php print base_path() . drupal_get_path('theme', 'nexus') . '/images/slide-image-3.jpg'; ?>"/>  
     <?php if($slide3_head || $slide3_desc) : ?>  
      <div class="flex-caption">  
       <h2><?php print $slide3_head; ?></h2><?php print $slide3_desc; ?>  
       <a class="frmore" href="<?php print url($slide3_url); ?>"> <?php print t('READ MORE'); ?> </a>  
      </div>  
     <?php endif; ?>  
    </li>  
    <li>  
     <img src="<?php print base_path() . drupal_get_path('theme', 'nexus') . '/images/slide-image-4.jpg'; ?>"/>  
     <?php if($slide4_head || $slide4_desc) : ?>  
      <div class="flex-caption">  
       <h2><?php print $slide4_head; ?></h2><?php print $slide4_desc; ?>  
       <a class="frmore" href="<?php print url($slide4_url); ?>"> <?php print t('READ MORE'); ?> </a>  
      </div>  
     <?php endif; ?>  
    </li>  

Modify theme-settings.php

To configure the title, description and URL of the image through the user interface, add the following lines of code to the file /theme-settings.php


  $form['nexus_settings']['slideshow']['slide4'] = array(  
   '#type' => 'fieldset',  
   '#title' => t('Slide 4'),  
   '#collapsible' => TRUE,  
   '#collapsed' => TRUE,  
  );  
  $form['nexus_settings']['slideshow']['slide4']['slide4_head'] = array(  
   '#type' => 'textfield',  
   '#title' => t('Slide Headline'),  
   '#default_value' => theme_get_setting('slide4_head','nexus'),  
  );  
  $form['nexus_settings']['slideshow']['slide4']['slide4_desc'] = array(  
   '#type' => 'textarea',  
   '#title' => t('Slide Description'),  
   '#default_value' => theme_get_setting('slide4_desc','nexus'),  
  );  
  $form['nexus_settings']['slideshow']['slide4']['slide4_url'] = array(  
   '#type' => 'textfield',  
   '#title' => t('Slide URL'),  
   '#default_value' => theme_get_setting('slide4_url','nexus'),  
  );  

Then you should see the following when configuring the 'appearance':


 References: https://www.drupal.org/node/1672396