Monitor Reply

Support

Fading full screen slideshow

Permalink Browser Info Environment October 10, 2014 at 8:06 AM

Hi Chris - we have a kitchen client who would like to show more than one image in the large Jumbotron area on the home page. I was hoping that there might be a way of putting a basic fading in/out slideshow like the default one in C5. Would this be possible do you think?

Type:	Discussion
Status:	In Progress

c5mix replied on Oct 16, 2014 at 6:52 pm Permalink Reply

Yeah, you should be able to put one there. You'll want a responsive slider though.

chassa2556 replied on Oct 17, 2014 at 5:53 am Permalink Reply

Hi Chris - where would you put this block in the coding - I need it to go full screen width?

c5mix replied on Oct 20, 2014 at 1:50 pm Permalink Reply

To the "Feature" area

chassa2556 replied on Nov 4, 2014 at 6:56 pm Permalink Reply

Sorry Chris is that right the feature area block isn't full width - it looks like it needs to go into the jumbotron. Is that right?

c5mix replied on Nov 4, 2014 at 7:59 pm Permalink Reply

Oh, yeah. You might need to modify the theme's feature.php file (theme_treviso/themes/treviso/elements/feature.php) to this:

<?php  defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
   <?php if ($c->getCollectionTypeHandle() == 'home') { ?>
    <div id="feature" class="jumbotron"<?php if ($c->getAttribute('header_image')) { ?> style="background-image:url(<?php echo $c->getAttribute('header_image')->getVersion()->getRelativePath();?>);"<?php } ?>>
       <div class="overlay"></div>
                    <?php 
               $a = new Area('Feature');
               $a->display($c);
               ?>
        <a href="javascript:void(0);" class="scrolldown"><span class="glyphicon glyphicon-chevron-down"></span></a>
    </div><!-- #feature ends -->
    <?php } else {?>
    <div id="feature" class="jumbotron"<?php if ($c->getAttribute('header_image')) { ?> style="background-image:url(<?php echo $c->getAttribute('header_image')->getVersion()->getRelativePath();?>);"<?php } ?>>
       <div class="overlay"></div>
       <div class="container">
            <div class="row">

Viewing 15 lines of 29 lines. View entire code block.

 
<?php  defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
 
   <?php if ($c->getCollectionTypeHandle() == 'home') { ?>
    <div id="feature" class="jumbotron"<?php if ($c->getAttribute('header_image')) { ?> style="background-image:url(<?php echo $c->getAttribute('header_image')->getVersion()->getRelativePath();?>);"<?php } ?>>
       <div class="overlay"></div>
                    <?php 
               $a = new Area('Feature');
               $a->display($c);
               ?>
        <a href="javascript:void(0);" class="scrolldown"><span class="glyphicon glyphicon-chevron-down"></span></a>
    </div><!-- #feature ends -->
    <?php } else {?>
    <div id="feature" class="jumbotron"<?php if ($c->getAttribute('header_image')) { ?> style="background-image:url(<?php echo $c->getAttribute('header_image')->getVersion()->getRelativePath();?>);"<?php } ?>>
       <div class="overlay"></div>
       <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <?php if ($c->getCollectionTypeHandle() == 'blog_entry' || $c->getCollectionTypeHandle() == 'pb_post') { ?>
                        <h1><?php echo t('Blog');?></h1>
                    <?php } else {?>
                        <h1><?php echo $c->getCollectionName() ?></h1>
                        <?php if ($c->getCollectionDescription()) { ?>
                        <p class="lead"><?php echo $c->getCollectionDescription() ?></p>
                        <?php } ?>
                    <?php } ?>
                </div><!-- #feature .twelve.columns ends -->
            </div><!-- #feature .row ends -->
        </div><!-- #feature .container -->
    </div><!-- #feature ends -->
    <?php } ?>

chassa2556 replied on Nov 5, 2014 at 12:05 pm Permalink Reply

Perfect - thanks Chris that worked...

c5mix replied on Nov 5, 2014 at 6:49 pm Permalink Reply

Great! You're welcome!

darkmatter replied on Apr 15, 2015 at 5:07 am Permalink Reply

Hi Chris,

I want to implement this too but not having much luck. Could you please highlight in the above code, where the slider block code needs to go. I've been putting it here:

<?php    defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<------><?php   if ($c->getCollectionTypeHandle() == 'home') { ?>
    <div id="feature" class="jumbotron"<?php   if ($c->getAttribute('header_image')) { ?> style="background-image:url(<?php
    <--><div class="overlay"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <?php..
                        $bt_ns = BlockType::getByHandle('nivo_slider');
                        $bt_ns->controller->fsID = test; // ID of your fileset
                        $bt_ns->controller->effect = 'random'; // 
                        $bt_ns->controller->slices = 10;
                        $bt_ns->controller->animSpeed = 500;
                        $bt_ns->controller->pauseTime = 3000;
                        $bt_ns->controller->startSlide = 0;.

Viewing 15 lines of 18 lines. View entire code block.

 <?php    defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
 
<------><?php   if ($c->getCollectionTypeHandle() == 'home') { ?>
    <div id="feature" class="jumbotron"<?php   if ($c->getAttribute('header_image')) { ?> style="background-image:url(<?php
    <--><div class="overlay"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <?php..
                        $bt_ns = BlockType::getByHandle('nivo_slider');
                        $bt_ns->controller->fsID = test; // ID of your fileset
                        $bt_ns->controller->effect = 'random'; // 
                        $bt_ns->controller->slices = 10;
                        $bt_ns->controller->animSpeed = 500;
                        $bt_ns->controller->pauseTime = 3000;
                        $bt_ns->controller->startSlide = 0;.
                        $bt_ns->controller->options('pauseOnHover','directionNav','directionNavHide','controlNav', 'controlNav
                        $bt_ns->render('view');
                       </div><!-- #feature .twelve.columns ends -->

Thanks

Nigel

c5mix replied on Apr 15, 2015 at 4:15 pm Permalink Reply

Just replace feature.php with the above code. Then just add your slider block to the Feature Area. No need to hardcode it.

darkmatter replied on Apr 16, 2015 at 10:28 am Permalink Reply

Thanks, I found my problem was that i have made a custom home.php but with a different name so the 'if' statement wasn't calling the Feature area.

Now that is working I have another glitch...clicking on the 'down chevron' glyph, the scrolling doesn't work. If I use dev tools I can see a js error " Uncaught TypeError: Cannot read property 'top' of null" any pointers to what might cause that?

Thanks Again

Nigel

darkmatter replied on Apr 17, 2015 at 4:29 am Permalink Reply

Ok..I solved it! I didn't have the 'Callout' area in my new home.php. Putting it in fixed the error.

c5mix replied on Apr 17, 2015 at 9:28 am Permalink Reply

Glad you got it sorted out.

web089 replied on Jun 25, 2015 at 5:28 am Permalink Reply

Hi Chris,
I want to use a slider (e.g. revolution slider) in the head area. How is this possible?
(unfortunately I`m not a developer).

G.

c5mix replied on Jul 7, 2015 at 12:02 pm Permalink Reply

The only way this is possible is with the above code/instructions.

Treviso

Support

Fading full screen slideshow

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post