Download & Extend

Posted by Posted by gtsopour gtsopour on on May 21, 2013 at 1:10pm May 21, 2013 at 1:10pm
The existing Slideshow implementation inside The existing Slideshow implementation inside page--front.tpl.php page--front.tpl.php template should be converted template should be converted
to another simple and responsive Slideshow implementation. to another simple and responsive Slideshow implementation.
Comments
#1
Posted by Posted by gtsopour gtsopour on on May 22, 2013 at 5:39pm May 22, 2013 at 5:39pm
Inside the Inside the page--front.tpl.php page--front.tpl.php template, we made the following change regarding the Slideshow template, we made the following change regarding the Slideshow
implementation. In order to update your existing Slideshow to our latest Slideshow implementation implementation. In order to update your existing Slideshow to our latest Slideshow implementation
that comes with 7.x-2.x releases, just move your linked image and caption to a new slider-item that comes with 7.x-2.x releases, just move your linked image and caption to a new slider-item
object as you can see below. object as you can see below.
BlueMasters theme comes with a Slideshow implementation hard coded into the BlueMasters theme comes with a Slideshow implementation hard coded into the page-- page--
front.tpl.php front.tpl.php. This choice allows you to have a slideshow up and running just after the theme . This choice allows you to have a slideshow up and running just after the theme
installation. Then you could dig into the source code at installation. Then you could dig into the source code at page--front.tpl.php page--front.tpl.php template and modify template and modify
it according to your needs. it according to your needs.
BlueMasters gives the option to disable the build in hardcoded Slideshow implementation without BlueMasters gives the option to disable the build in hardcoded Slideshow implementation without
dealing with PHP at all. Simple go to BlueMasters theme settings and disable it. So, if you disable the dealing with PHP at all. Simple go to BlueMasters theme settings and disable it. So, if you disable the
Slideshow (without disabling the -include javascript- option), you can copy/paste the following new Slideshow (without disabling the -include javascript- option), you can copy/paste the following new
Slideshow code inside a Drupal System block. Finally, just place this new block to the Banner region Slideshow code inside a Drupal System block. Finally, just place this new block to the Banner region
and you will be able to configure this block through Drupal's User Interface. and you will be able to configure this block through Drupal's User Interface.
Changed from Changed from
<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;">About Bluemasters</div>
<div class="desc" style="display: none;">Our Portfolio</div>
<div class="desc" style="display: none;">Creation of Beaches</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>
To To
<!--#slideshow-->
<div id="slideshow">
<div class="flexslider">
<ul class="slides">
<!-- slider-item -->
<li class="slider-item">
<div class="slider-item-image">
<a href="<?php print url('node/3'); ?>"><img src="<?php print base_path() . drupal_get_path('theme',
'bluemasters') . '/images/slide-image-3.jpg'; ?>"></a>
</div>
<div class="slider-item-caption">About Bluemasters</div>
</li>
<!-- EOF: slider-item -->
<!-- slider-item -->
<li class="slider-item">
<div class="slider-item-image">
<a href="<?php print url('node/2'); ?>"><img src="<?php print base_path() . drupal_get_path('theme',
'bluemasters') . '/images/slide-image-2.jpg'; ?>"></a>
Project: Project: BlueMasters BlueMasters
Version: Version: 7.x-1.3 7.x-1.3
Component: Component: Code Code
Priority: Priority: Normal Normal
Category: Category: Feature request Feature request
Assigned: Assigned: gtsopour gtsopour
Active Active
Issue tags: Issue tags:
Bluemasters theme Bluemasters theme, , bluemasters bluemasters, ,
Responsive Bluemasters Responsive Bluemasters, , Bluemasters with Bluemasters with
responsive layout responsive layout
Log in Log in or or register register to update this issue to update this issue
Last updated on Last updated on May 23, 2013 at 12:19am May 23, 2013 at 12:19am
Jump to:
Most recent comment Most recent comment
BlueMasters BlueMasters Issues Issues
[7.x-2.0] Bluemasters responsive Slideshow implementation
[7.x-2.0] Bluemasters responsive Slideshow implementation [#1999844] | Drupal.org 4/4/2014
https://drupal.org/node/1999844 1 / 3
Log in Log in or or register register to post to post
comments comments
Log in Log in or or register register to post to post
comments comments
Log in Log in or or register register to post to post
comments comments
</div>
<div class="slider-item-caption">Our Portfolio</div>
</li>
<!-- EOF: slider-item -->
<!-- slider-item -->
<li class="slider-item">
<div class="slider-item-image">
<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="slider-item-caption">Creation of Beaches</div>
</li>
<!-- EOF: slider-item -->
</ul>
</div>
</div>
<!--EOF:#slideshow-->
#2
Posted by Posted by curious-trick curious-trick on on May 23, 2013 at 12:19am May 23, 2013 at 12:19am
Thanks for posting this. The block method doesn't work for me because Drupal (or maybe Thanks for posting this. The block method doesn't work for me because Drupal (or maybe
CKEditor?) automatically removes the class items from all the tags. So, when I put in CKEditor?) automatically removes the class items from all the tags. So, when I put in <div class="slider-
item-image">, it gets turned into , it gets turned into <div>, and I'm guessing that this is why the slideshow doesn't show , and I'm guessing that this is why the slideshow doesn't show
up on my page. I'm sure there's an answer somewhere in Drupal documentation about text filters up on my page. I'm sure there's an answer somewhere in Drupal documentation about text filters
and HTML profiles, but I don't know where to find it or how to fix this. Thanks. and HTML profiles, but I don't know where to find it or how to fix this. Thanks.
#2.0
Posted by Posted by curious-trick curious-trick on on May 23, 2013 at 12:19am May 23, 2013 at 12:19am
Issue summary: Issue summary: View changes View changes
Simple text Simple text
#3
Posted by Posted by scotself scotself on on February 7, 2014 at 9:16am February 7, 2014 at 9:16am
This can also be done fairly easily using a view and, in fact, if I can find time one day, I'd love to This can also be done fairly easily using a view and, in fact, if I can find time one day, I'd love to
contribute this back to the theme. contribute this back to the theme. But basically: But basically:
Simple Content Type: Slideshow Image Simple Content Type: Slideshow Image
Fields: Image (make image preset to whatever size, but i did mine to 930x320 like the default Fields: Image (make image preset to whatever size, but i did mine to 930x320 like the default
theme images), just the title and I used the link module to add a link but you could easily just theme images), just the title and I used the link module to add a link but you could easily just
use a text field use a text field
Create a couple pieces of content (or use Create a couple pieces of content (or use devel devel generate to speed things up!) generate to speed things up!)
Create a block view, set up as follows: Create a block view, set up as follows:
Include title (not linked), image (with right preset) and link (absolute URL is what I used) Include title (not linked), image (with right preset) and link (absolute URL is what I used)
HTML list style. HTML list style. IMPORTANT: set the HTML settings to have a Row Class of slider-item, IMPORTANT: set the HTML settings to have a Row Class of slider-item,
Wrapper Class = flexslider and List Class = slides Wrapper Class = flexslider and List Class = slides
Not sure if this is critical or not, but just to remove the cruft, anywhere I could remove Not sure if this is critical or not, but just to remove the cruft, anywhere I could remove
views row classes on each field and such, i did. views row classes on each field and such, i did.
I did mine with title and link excluded from view, on image field rewrite contents as such: I did mine with title and link excluded from view, on image field rewrite contents as such:
<div class="slider-item-image">
<a href="[field_slideshow_link]">
[field_slideshow_image]
</a>
</div>
<div class="slider-item-caption"><a href="[field_slideshow_link]">[title]</a></div>
Of course, this means you would need to remove the markup in page--front.tpl.php inside Of course, this means you would need to remove the markup in page--front.tpl.php inside
div#slideshow. div#slideshow. i then moved the banner region inside here like this, then assigned the block created i then moved the banner region inside here like this, then assigned the block created
by my view to the banner region. by my view to the banner region. You may also want to remove the You may also want to remove the
<?php if (theme_get_setting('slideshow_display','bluemasters')): ?>
at that point so it's not dependent on whether the "Show Slideshow" is configured in the theme or at that point so it's not dependent on whether the "Show Slideshow" is configured in the theme or
not. not. I also removed the #banner wrapper as it doesn't seem to do anything at this point. so i end up I also removed the #banner wrapper as it doesn't seem to do anything at this point. so i end up
with just this between the header and main content with just this between the header and main content
<div class="container_12">
[7.x-2.0] Bluemasters responsive Slideshow implementation [#1999844] | Drupal.org 4/4/2014
https://drupal.org/node/1999844 2 / 3
<div class="grid_12">
<div id="slideshow">
<?php print render($page['banner']); ?>
</div>
</div>
</div>
Hope that helps someone. Hope that helps someone. :) :) Nice theme. Nice theme. Thx. Thx.
[7.x-2.0] Bluemasters responsive Slideshow implementation [#1999844] | Drupal.org 4/4/2014
https://drupal.org/node/1999844 3 / 3