Great aesthetics with the theme...and thanks for the contrib.

Sorry, this is probably obvious, but after reading the docos here: http://wiki.morethanthemes.com/index.php?title=Blue_Masters#Front_Page I still don't get the management concept for the front page images.

First, it seems as if my client will need to have ftp access and be confident in loading the images up in the theme directory instead of being able to use IMCE and loading images under the /files/.. directory.

But more critically, I can't see the technical conenction between each image and the referenced node. At the moment it looks like the subtitles (Building a beach" etc) are hardwired somewhere, and point to old style node addresses (?q=node/1)

So, two queries:

1. Is it possible to get some more documentation on how to configure the slideshow; and/or
2. Is it possible to comment the slideshow out and replace it with something like Views Slideshow?

Thanks in advance!

Comments

boabjohn’s picture

Hmmm...any ideas on these queries?

gtsopour’s picture

Assigned: Unassigned » gtsopour
gtsopour’s picture

Status: Active » Fixed

Detailed instructions for the BlueMasters version 7.1.1 , you can read here http://wiki.morethanthemes.com/index.php?title=Blue_Masters_7.x

The following code (IN VERSION BLUEMASTERS 7.1.1) corrected to clean urls in page--front.tpl.php is an example slideshow implementation. In any case it could be replaced with another slideshow implementation.

<div class="main_view">

<div class="window">
<div class="image_reel">
<a href="#"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/slide-image-3.jpg'; ?>"></a>
<a href="#"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/slide-image-2.jpg'; ?>"></a>
<a href="#"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/slide-image-1.jpg'; ?>"></a>
</div>
<div class="descriptions">
<div class="desc" style="display: none;">Our Portfolio</div>
<div class="desc" style="display: none;">Creation of Beaches</div>
<div class="desc" style="display: none;">About iPadMasters</div>
</div>
</div>

<div class="paging">
<a rel="1" href="#">1</a>
<a rel="2" href="#">2</a>
<a rel="3" href="#">3</a>
</div>

</div>

If someone just wants to add a new slideshow item, he can see the example bellow:

<div class="main_view">

<div class="window">
<div class="image_reel">
<a href="#"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/slide-image-3.jpg'; ?>"></a>
<a href="#"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/slide-image-2.jpg'; ?>"></a>
<a href="#"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/slide-image-1.jpg'; ?>"></a>
<a href="#"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/NEW-ITEM-IMAGE.jpg'; ?>"></a>
</div>
<div class="descriptions">
<div class="desc" style="display: none;">Our Portfolio</div>
<div class="desc" style="display: none;">Creation of Beaches</div>
<div class="desc" style="display: none;">About iPadMasters</div>
<div class="desc" style="display: none;">NEW-ITEM-DESCRIPTION</div>
</div>
</div>

<div class="paging">
<a rel="1" href="#">1</a>
<a rel="2" href="#">2</a>
<a rel="3" href="#">3</a>
<a rel="4" href="#">4</a>
</div>

</div>

Also, here is an example with definition of links

<div class="main_view">

<div class="window">
<div class="image_reel">
<a href="<?php print url('node/3'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/slide-image-3.jpg'; ?>"></a>
<a href="<?php print url('node/2'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/slide-image-2.jpg'; ?>"></a>
<a href="<?php print url('node/1'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/slide-image-1.jpg'; ?>"></a>
</div>
<div class="descriptions">
<div class="desc" style="display: none;">Our Portfolio</div>
<div class="desc" style="display: none;">Creation of Beaches</div>
<div class="desc" style="display: none;">About iPadMasters</div>
</div>
</div>

<div class="paging">
<a rel="1" href="#">1</a>
<a rel="2" href="#">2</a>
<a rel="3" href="#">3</a>
</div>

</div>

In any case and according to bug http://drupal.org/node/1098610 (IN VERSION BLUEMASTERS 7.1.1) you can delete all the example slideshow implementation and just place in banner region (banner region is already defined in bluemasters.info) the desired block (another custom block or an view slideshow block).

<div id="banner">
<?php print render($page['banner']); ?>
</div><!--EOF:banner-->

Always be aware of the javascript file bluemaster.js added in template.php with the following code, only in system front-page.

/**
 * Add javascript files for front-page jquery slideshow.
 */
if (drupal_is_front_page()) {
drupal_add_js(drupal_get_path('theme', 'bluemasters') . '/js/bluemasters.js');
}
jsmith999’s picture

Anyone any good ideas for a good slideshow extention to be used in this block? Why would I be editting HTML to edit this content (pictures). The whole idea of a CMS going to waste. But then again I understand this is a 1:1 conversion from a PSD I believe.

gtsopour’s picture

This hardcoded slideshow in page--front.tpl.php is just an example. Soon, I intend to prepare a simple slideshow example based on jquery cycle plugin and will be very simple to extend and customize it.

jsmith999’s picture

Ah, that would be very nice. Thanks for the quick reply. :)

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

jboris’s picture

I m trying to change the pictures in the slide show and get them linked to the correct node. The second image in the slide show always shows the first two images. Here is what I have:

 <div class="image_reel">
                    <a href="<?php print url('node/3'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/pic1.jpg'; ?>"></a>
                    <a href="<?php print url('node/2'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/pic2.jpg'; ?>"></a>
                    <a href="<?php print url('node/1'); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'bluemasters') . '/images/pic3.jpg'; ?>"></a>
                </div>
                <div class="descriptions">
                    <div class="desc" style="display: none;">PIC1</div>
                    <div class="desc" style="display: none;">PIC2</div>
                    <div class="desc" style="display: none;">PIC3</div>
                </div>

When I bring up the page Pic1 and Pic 2 show as the first image next to each other. When it goes to the next slide it shows Pic2 again. When it goes to the third slide it shows nothing. The decriptions are correct.

I want the slide show to be pic1 then pic2 then pic3.

Any pointers? I am new to Style sheets and editing Themes.

kentjames1980’s picture

@jboris

Just a quick possible solution if its still an issue

Make sure the images are the right size for the window - i had one small and it showed part of the previous image on the second and again less of the third - could be the answer ?!?

fotonut’s picture

I am relatively new to Drupal but can a pause button be added to the slideshow or some kind of user clickable control be added to the slideshow? I like the concept but after a while the moving photos become a bit distracting. Also it would be really nice to provide an admin option to have the slideshow frame change only when the screen is refreshed.

Anyway, great theme!

paulmarc’s picture

Version: 7.x-1.x-dev » 7.x-1.2
Component: Documentation » Code
Assigned: gtsopour » Unassigned

@jboris

I solved a similar issue, and the error was in the div that comes after the images and description ones.
I had duplicated the following lines:

<div class = "paging">
  <a rel="1" href="#">1</a>
  <a rel="1" href="#">2</a>
  <a rel="1" href="#">3</a>
</div>

The anchor's "rel" attribute should be different for each slider item:

<a rel="1" href="#">1</a>
<a rel="2" href="#">2</a>
<a rel="3" href="#">3</a>

I hope this works for you.

sodafox’s picture

I just updated to BlueMasters ver. 7.x-1.2 and the slideshow seems to only work when I am not logged in as administrator. When I look in my reports and recent log reports I get messages saying "page not found - misc/jquery_cookie.js"

I see that the file is indeed there and I have changed the permissions to make sure that it can get the file. I don't know what I did.

diegoalejo15’s picture

Title: How to configure front page slideshow » How to extend pictures to fit the slideshow size?

I have some images that are smaller than the slideshow, can the slideshow resize them?
Thanks

Anusha Isaacraj’s picture

Please check the image size.
It should be 930 * 320.

Anusha Isaacraj’s picture

No... It won't.
You have to resize the image from your end ( 930 * 320).