10 years ago
12
Topic

Hi all,

hope i will be able to explain clearly what i want to do.

I have a custom content type (article based) with some images(article_gallery) and one checkbox(custom_featured). Now i would like to display a slideshow on home page with the first image of every article where custom_featured is checked.

I know the way to extract images from custom_featured articles, but i have no idea about how to display it (in a slideshow) on the home page... :(

Could u please help me?

Thanks in advance

X_Ch4n

Get a VIP membership
693 Posts
rpoy
10 years ago
4
Level 1

Hi X_CH4n,

You can create a SEBLOD list to retrieve the featured articles.  Then use a custom template which has the bootstrap carousel added.

Hope that helps,

Randy

10 years ago
3
Level 2

Hi Randy,

thank you. I'm not sure that i understood what you told me. 

Ok: i create a new list/search type, and i have to add custom_featured checkbox and gallery field to it, but what kind of display type have i to select? how can i display this list on the home page?

Could you explain me a little more?

Thanks a lot

X_Ch4n

10 years ago
2
Level 3

Hi,

i tried to create a new search list and a new module that display search list's items on home page (position-15). 

i wrote the mainbody.php template: 

<div>

<img src="/<?php echo $cck->get('galleria_cane')->value[0]->value; ?>" alt="<?php echo $cck->get('galleria_cane')->value[0]->image_alt; ?>" title="<?php echo $cck->get('galleria_cane')->value[0]->image_title; ?>" />

<div> <h4><?php echo $cck->get('art_title')->value; ?></h4>

</div>

</div>

Then i modified beez3 index.php:

<?php if($this->countModules('position-15')) : ?>

<script>

!function ($) {

$(function(){

// carousel demo

$('#myCarousel').carousel()

})

}(window.jQuery)

</script>

<div id="myCarousel" data-ride="carousel">

<div>

<jdoc:include type="modules" name="position-15" />

</div><!-- .carousel-inner -->

<!-- Controls -->

<a href="#myCarousel" role="button" data-slide="prev"> <span> < </span> </a>

<a href="#myCarousel" role="button" data-slide="next"> <span> > </span> </a>

</div><!-- #homepage-carousel -->

<?php endif; ?><div>

But i'm not able to start bootstrap carousel.

I can see that seblod add these lines to my index.php/mainbody.php code:

<div>
<div><!-- Begin: SEBLOD 3.x Document { www.seblod.com } --><div id="cck1r"><div><div><div><!-- Begin: SEBLOD 3.x Document { www.seblod.com } --><div id="cck14">
<div>
<div>
<div>

What am i wronging? How can i remove these lines?

Thanks in advance

X_Ch4n

572 Posts
_jrmo
10 years ago
1
Level 4

X_Ch4n,

You're almost there!

Firstly, I don't think you've copied the bootstrap code properly. I think you need to have:

<div id="myCarousel" data-ride="carousel">

<div class="carousel-inner">

Just double check.

Secondly in your list template that first <div> needs <div class="item"> and the FIRST "item" needs to also have the class "active".

Finally, in your list module, in the advanced settings there is a setting called "raw rendering" or "raw output" - make sure that is set to YES.

Do that and let me know how it goes. If you can provide a screen shot of how it's all rendering in your browser (with firebug or View > source) then that would be helpful.

_jrmo

10 years ago
0
Level 5

hi jrmo,

thanks for your answer.

i setted up "raw rendering" option to yes, but nothing is changed. 

This is the source code displayed by the browser:

<script>
!function ($) {
$(function(){
// carousel demo
$('#myCarousel').carousel()
}(window.jQuery)
</script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- <ol>
<li data-target="#myCarousel-example-generic" data-slide-to="0"></li>
<li data-target="#myCarousel-example-generic" data-slide-to="1"></li>
<li data-target="#myCarousel-example-generic" data-slide-to="2"></li>
</ol>
-->
<div class="carousel-inner">
<!-- Begin: SEBLOD 3.x Document { www.seblod.com } --><div id="cck1r" class="cck-f100 cck-pad-8"><div class="blog-top cck-w100 cck-fl cck-ptb"><div class="cck-plr"><div class="cck-odd"><!-- Begin: SEBLOD 3.x Document { www.seblod.com } --><div id="cck14" class="cck-f100 cck-pad-8">
<div>
<div class="cck-line-body">
<div class="cck-plr cck-ptb">
<div class="item active">
<img src="/images/dogDB/schedacane/10/amer4.jpg" alt="amer4" title="amer4" style="width:800px; " />
<div class="container">
<div class="carousel-caption">
<h2>America del Fiorsilva</h2>
</div>
</div>
</div> </div>
<div class="clr"></div>
</div>
</div>
</div>
<!-- End: SEBLOD 3.x (App Builder & CCK for Joomla!) { www.seblod.com } --></div></div></div><div class="cck-clear"></div><div class="cck-line-blog-middle1 cck-w100 cck-line"><div id="cck1r_middle1-1" class="cck-w50 cck-fl cck-ptb"><div class="cck-plr"><div class="cck-even cck-deepest-blog"><!-- Begin: SEBLOD 3.x Document { www.seblod.com } --><div id="cck11" class="cck-f100 cck-pad-8">
<div>
<div class="cck-line-body">
<div class="cck-plr cck-ptb">
<div class="item active">
<img src="/images/dogDB/schedacane/zordan4.jpg" alt="zordan4" title="zordan4" style="width:800px; " />
<div class="container">
<div class="carousel-caption">
<h2>Zordan Zewi del Citone</h2>
</div>
</div>
</div> </div>
<div class="clr"></div>
</div>
</div>
</div>
<!-- End: SEBLOD 3.x (App Builder & CCK for Joomla!) { www.seblod.com } --></div></div></div></div><div class="cck-clear"></div></div><!-- End: SEBLOD 3.x (App Builder & CCK for Joomla!) { www.seblod.com } -->
</div><!-- .carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="/#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left">Sinistra</span>sx
</a>
<a class="right carousel-control" href="/#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right">Destra</span>dx
</a>
</div><!-- #homepage-carousel -->

As u can see i have the first di #myCarousel and then .carousel-inner div. After that seblod insert some lines before <div class="item active">
Another thing iu can see is that every item div has active clas, this because active is placed into my mainbody.php 
Thanks a lot for your help
X_Ch4n
4229 Posts
Kadministrator
10 years ago
4
Level 1

You can use this product to create clean simple list for slideshow http://www.seblod.com/products/62

10 years ago
3
Level 2

Hi Klas,

Thank you for your suggest. I will try this plugin today and i'll let u know if this helps.

Thank u 

X_Ch4n

572 Posts
_jrmo
10 years ago
2
Level 3

Hi X_Ch4n,

NOTE: The below is for BOOTSTRAP 3 Carousel, not Bootstrap 2. It also assumes you have only an image upload field published in your List view.

Klas is right, you need to use a LIST template and not a BLOG template. Use the free list template that Klas suggested. Follow the installation instructions provided on the plugin page that he linked.

Once installed, you can replace all of the code in the index.php file with this:

<?php
/**
* @version             SEBLOD 3.x More
* @package            SEBLOD (App Builder & CCK) // SEBLOD nano (Form Builder)
* @url                http://www.seblod.com
* @editor            Octopoos - www.octopoos.com
* @copyright        Copyright (C) 2013 SEBLOD. All Rights Reserved.
* @license             GNU General Public License version 2 or later; see _LICENSE.php
**/

defined( '_JEXEC' ) or die;

// -- Initialize
require_once dirname(__FILE__).'/config.php';
$cck    =    CCK_Rendering::getInstance( $this->template );
if ( $cck->initialize() === false ) { return; }


// -- Prepare
$class        =    trim( $cck->getStyleParam( 'class', '' ) );
$class        =    $class ? ' class="'.$class.'"' : '';
$items        =    $cck->getItems();
$fieldnames    =    $cck->getFields( 'element', '', false );
$multiple    =    ( count( $fieldnames ) > 1 ) ? true : false;
$count        =    count( $items );
$auto_clean    =    ( $count == 1 ) ? $cck->getStyleParam( 'auto_clean', 0 ) : 0;
?>
<div data-ride="carousel" class="carousel slide" id="image-rotator">
    <div class="carousel-inner">
        <?php 
            if ( $count ) {
                $counter = 1;
                foreach ( $items as $i=>$item ) {
                    if ($item->getValue( $fieldnames[0] ) != null) {
                        if ($counter == 1)    {  
                            echo '<div class="item active">';
                        }
                        else {  
                            echo '<div class="item">';
                        }
                            $html    =  '<img class="img-responsive" src="'.$item->getValue( $fieldnames[0] ).'" />'; 
                            echo $html;
                            echo '</div>';
                    }
                $counter++;
                }
            }
        ?>
    </div>
      <a class="left carousel-control" href="#image-rotator" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#image-rotator" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
</div>

<?php
// -- Finalize
$cck->finalize();
?>
10 years ago
1
Level 4

Hi jrmo,

thank you. I exactly did what u wrote on your last post yesterday. I extracted the klas' list template, modified templatedetails.xml and index.php so i made a seb_carousel template. Now i have the right html code, but i'm still fighting with bootstrap carousel.

i will let you know when i'll solve with carousel.

Thank you so much for your help.

X_Ch4n

572 Posts
_jrmo
10 years ago
0
Level 5

Happy to help. Happy SEBLODing.

10 years ago
0
Level 1

ok, now it works. 

As my last post i created a new seb_carousel template. It works with joomla protostar template but doesn/t works with beez3 (i think beez3 doesn't use bootstrap framework).

I'm going to write a custom joomla template with bootstrap framework support.

Thank a lot to everyone for the precious help.

X_Ch4n

10 years ago
0
Level 1

Followed this tutorial and the slideshow works perefectly. However, I can't get the content linking to work correctly.

Here's my setup:
The slideshow is based on the list template, which has 2 fields: Article Title and Article Fulltext Image
Slideshow is displayed on home page in a list module.
The Slideshow pulls the art_fulltex_image for the image and the art_title for the article title.

I tried linking the Article Title using the link plugin under (#2) in the list view.

Instead of the expected URL, I get the following URL structure: LOCALHOST/ROOTURL/?view=article&id=16:beispielstrahler-2

I'm guessing I'm missing some configuration somewhere, but after having searched for a couple of hours, I'm hitting a brick wall here...

The site is currently sitting on my computer, using XAMPP, but if it helps, I can put it on a server for you guys to look at?

many thanks

Michael

Get a Book for SEBLOD