Catalog Slider

[mike_mcfly]

Schleife um Array auszulesen

Die Abfrage des Arrays im Template:

<?php foreach ($this->entries as $entry): ?>
		<li><img src="<?php echo $entry['data']['bilder']['meta']['0']['src']; ?>"></li>
		<li><img src="<?php echo $entry['data']['bilder']['meta']['1']['src']; ?>"></li>
		<li><img src="<?php echo $entry['data']['bilder']['meta']['2']['src']; ?>"></li>
<?php endforeach; ?>

So klappt's natürlich, allerdings nicht dynamisch, da ich von Hand die drei Array reingeschrieben habe. Vermutlich bräuchte ich einen Schleifen-Zähler, der die Anzahl der Arrays in [meta] ermittelt, also 0-2, und diese dann in eine Variable schreibt. Diese Variable kann ich dann im Teplate einsetzen. Leider kenn ich die Syntax nicht aber noch warscheinlicher ist, dass ich mich damit völlig auf dem Holzweg befinde



So sieht das meta-Array aus:

[meta] => Array
                                (
                                    [0] => Array
                                        (
                                            [src] => system/images/Projektbild_01-9761ea69.jpg
                                            [alt] => Projektbild 01
                                            [lb] => lbcatalogreader0
                                            [w] => 900
                                            [h] => 300
                                            [wh] => width="900" height="300"
                                            [caption] => 
                                            [metafile] => 
                                        )

                                    [1] => Array
                                        (
                                            [src] => system/images/Projektbild_02-9befb23b.jpg
                                            [alt] => Projektbild 02
                                            [lb] => lbcatalogreader0
                                            [w] => 900
                                            [h] => 300
                                            [wh] => width="900" height="300"
                                            [caption] => 
                                            [metafile] => 
                                        )

                                    [2] => Array
                                        (
                                            [src] => system/images/Projektbild_03-15ce33d5.jpg
                                            [alt] => Projektbild 03
                                            [lb] => lbcatalogreader0
                                            [w] => 900
                                            [h] => 300
                                            [wh] => width="900" height="300"
                                            [caption] => 
                                            [metafile] => 
                                        )

[magicsepp]

...Anführungsstrichlein vergessen
so dann in etwa...

 <?php foreach ($this->entries['data']['bilder']['files']['meta'] ): ?>
$i = '0';
        <li><?php echo $this->entries['data']['bilder']['meta'][$i]['src']; ?>"></li>
$i++;
<?php endforeach; ?>

[mike_mcfly]

...Anführungsstrichlein vergessen
so dann in etwa...

 <?php foreach ($this->entries['data']['bilder']['files']['meta'] ): ?>
$i = '0';
        <li><?php echo $this->entries['data']['bilder']['meta'][$i]['src']; ?>"></li>
$i++;
<?php endforeach; ?>

Noch nicht ganz:
Parse error: syntax error, unexpected ')' in /Applications/MAMP/htdocs/fiDesign/templates/fi_templates/catalog_flexslider_fi.html5 on line 16

Zeile 16 ist:

<?php foreach ($this->entries['data']['bilder']['files']['meta'] ): ?>

Mit echo kann man scheinbar das mehrdimensionale Array ausgeben aber in einer foreach-Schleife kann das mit entries['data']['bilder']['files']['meta'] nicht übergeben werden, oder?

[magicsepp]

so ist das wenn man das aus dem Kopf macht $i... gehören natürlich auch noch ins php tag

 <?php foreach ($this->entries['data']['bilder']['files']['meta'] ): $i = '0'; ?>
        <li><?php echo $this->entries['data']['bilder']['meta'][$i]['src']; ?>"></li>
<?php $i++; endforeach; ?>

[mike_mcfly]

so ist das wenn man das aus dem Kopf macht $i... gehören natürlich auch noch ins php tag

 <?php foreach ($this->entries['data']['bilder']['files']['meta'] ): $i = '0'; ?>
        <li><?php echo $this->entries['data']['bilder']['meta'][$i]['src']; ?>"></li>
<?php $i++; endforeach; ?>

Ergebnis ist das selbe:
Parse error: syntax error, unexpected ')' in /Applications/MAMP/htdocs/fiDesign/templates/fi_templates/catalog_flexslider_fi.html5 on line 16


Der Fehler scheint in Zeile 16 zu liegen:

<?php foreach ($this->entries['data']['bilder']['files']['meta'] ): $i = '0'; ?>

[mike_mcfly]

PHP Array Syntax-Error

Mit echo kann man scheinbar das mehrdimensionale Array ausgeben aber in einer foreach-Schleife kann das mit entries['data']['bilder']['files']['meta'] nicht ausgelesen werden, oder?

Edit:
Hab' die Fehlermeldung falsch gelesen, das ist ein Syntax-Error


Ich verschiebe den Threat mal in einen anderen Foren-Bereich, da es ja hier eigentlich um einen Catalog-Slider geht. Wenn ich die Antwort für diese Array-Abfrage habe, poste ich die Lösung dann hier.

[magicsepp]

könnte sein das da doch daa "as $bilder" noch dazu muss... in theorie bin ich nicht wirklich gut....

[mike_mcfly]

Anleitung: Catalog-Slider

Ahoi zusammen,

ich hab' jetzt ganze zwei Tage damit zugebracht: ein Catalog-Slider mit jQuery (Flexslider) umzusetzen.

Hier meine Lösung dazu:

1) Template anlegen:
1a) am besten ein bestehendes Catalog-Leser-Template duplizieren und
1b) folgende Zeilen einfügen (@Flex: danke für Deine Hilfe mit der Syntax):

<div class="flexslider">
<ul class="slides">  
        <?php  
        foreach($this->entries as $entry) :    
            foreach($entry['data']['bilder']['meta'] as $picture) {  
                echo "<li><img src=\"{$picture['src']}\" width=\"900\" height=\"300\"/></li>\n";  
            }   
        endforeach; ?>      
</ul>
</div>

1c) das Feld ['bilder'] durch das Feld ersetzen, in dem man im Katalog die Bilder für den Slider hat. Die Werte zu width und height entsprechend euerer Bildmaße ändern.

2) Im Backend ein Modul Katalog-Leser anlegen und das in Schritt 1) erstellte Template auswählen. Nicht vergessen bei sichtbare Felder das Feld für das Feld in 1c) anzuklicken.

3) Das flexslider.js in den body eintragen. Kann man hier downloaden.

4) Jetzt noch das Modul in einen Artikel packen und fertig!

[florilein]

Tim G funktioniert das ganze auch mit mehrern Bildern? Ich hab das ganze nun in den catalog_reader gepakct funktioniert auch soweit nur leider mit nur einem Bild sobald ich mehrfachauswahl auswähle funktioniert es nicht mehr und meine Programmierkenntnisse sind sehr Bescheiden

[mike_mcfly]

Catalog Slider

Hi 11florilein,

ein Slider macht natürlich nur mit mehreren Bildern Sinn. Du musst schon etwas detaillierter beschreiben was für ein Fehler bei Dir kommt.

[florilein]

Hi Mc Fly.


ich habe das Script von TimG in das catalog_reader.tpl eingefügt. dies sieht nun so aus

 <?php if (count($this->entries)): ?>

<div class="layout_full">

<?php foreach ($this->entries as $entry): ?>
<div class="item<?php echo $entry['class'] ? ' '.$entry['class'] : ''; ?>">
<?php if($entry['linkEdit']): ?><?php echo $entry['linkEdit']; ?><?php endif; ?>
<?php foreach ($entry['data'] as $field=>$data): ?>
<?php if (strlen($data['raw']) && !in_array($field, array('catalog_name','parentJumpTo'))): ?>
<div class="field <?php echo $field; ?>">
    <div class="label"><?php echo $data['label']; ?></div>
    <div class="value"><?php echo $data['value']; ?></div>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>

<?php else: ?>
<p class="info">Invalid item reference for catalog.</p>
<?php endif; ?>
<?php
/**
 * Catalog : Cataloglist Template with Slideshow2 Support
 * @author: Tim Gatzky <info@tim-gatzky.de>
 */

?>

<?php if (count($this->entries)): ?>


<!-- include slideshow 2 scripts -->
<?php
$GLOBALS['TL_CSS'][] = 'plugins/slideshow2/css/slideshow.css';
$GLOBALS['TL_JAVASCRIPT'][] = 'plugins/slideshow2/js/slideshow.js';
$GLOBALS['TL_JAVASCRIPT'][] = 'plugins/slideshow2/js/slideshow.fold.js';
$GLOBALS['TL_JAVASCRIPT'][] = 'plugins/slideshow2/js/slideshow.kenburns.js';
$GLOBALS['TL_JAVASCRIPT'][] = 'plugins/slideshow2/js/slideshow.push.js';
$GLOBALS['TL_JAVASCRIPT'][] = 'plugins/slideshow2/js/slideshow.flash.js';
?>

<?php
/**
 * Catalog settings
 */
$Beschreibungsfeld = 'description'; // Das Feld in Deinem catalog, das fuer die ie Untertitel benutzt wird
$Namesfeld = 'name'; // Das Feld in Deinem catalog, das fuer den Name des Bildes und fŸr den Anchor title benutzt wird
$Bildfeld = 'image'; // Das Feld in Deinem catalog, aus dem die Bilder benutzt werden sollen
#$Galeriefeld = 'gallery'; // baue ich noch ein


/**
 * Slideshow settings
 */
$slideshowEffect = ''; // Slideshow Effekt z.B.: 'Fold', 'KenBurns', 'Push', 'Flash'
$thumbnailPadding = 10; // Padding der Vorschaubilder
$thumbnailSize = 80;
$image_linked_to = 'catalog'; // 'lightbox', 'catalog'
$duration = 3500; // Laenge der Einblendung
$delay = 1500; // Dauer des Effekts
$loop = 'true';
$random = 'false'; // Zufall
$captions = 'true'; // Untertitel
$controls = 'true'; // Slideshow-Steuerung anzeigen
$paused = 'false'; // pausiert, kein autoplay
$thumbnails = 'true'; // Vorschaubilder anzeigen


// -------------------------------------- do the work

// Gather images
$arrImages = array();
$arrUrl = array();
$arrSRC = array();
foreach ($this->entries as $entry)
{
    foreach ($entry['data'] as $field=>$data)
    {
        // work on image field. must be type 'file'
        if($data['type'] == 'file' && $field == $Bildfeld )
        { 
            // store image information
            $arrImages[] = array(
                'id' => $entry[id],
                'src' => $data['meta'][0]['src'],
                'thumbnail' => $data['meta'][0]['src'], // compressed image
                'raw' => $data['raw'],
                'size' => getimagesize($data['raw']), // can be outcommented for performance
                'width' => $data['meta'][0]['w'],
                'height' => $data['meta'][0]['h'],
                'wh' => $data['meta'][0]['wh'],
                'caption' => $entry['data'][$Beschreibungsfeld]['value'],
                'name' => $entry['data'][$Namesfeld]['value'],
                'url' => $entry['url'],
                'lightbox' => $data['meta'][0]['lb']
            );
            $arrUrl[] = $entry['url']; // store urls
            $arrSRC[] = $data['raw'];
        }
    }
}

// slideshow vars
$slideshowWidth = 0;
$slideshowHeight = 0;

// get slideshow size by dimensions of the field thumbnails settings
if($this->entries[0]['data'][$Bildfeld]['meta'][0])
{
    $slideshowWidth = $this->entries[0]['data'][$Bildfeld]['meta'][0]['w']; 
    $slideshowHeight = $this->entries[0]['data'][$Bildfeld]['meta'][0]['h'];
    $hasMeta = true;
}
// check if thumbnail override is set
else if($this->moduleTemplate->arrData['catalog_thumbnails_override'] && $this->entries[0]['data'][$Bildfeld]['meta'][0])
{
    $size = deserialize($this->moduleTemplate->arrData['catalog_imagemain_size']);
    $slideshowWidth = $size[0];
    $slideshowHeight = $size[1];
    // get slideshow size from image size
    if($size[2] == 'proportional')
    {
        $tmpImg = $this->entries[0]['data'][$Bildfeld]['raw'];
        $tmpImgSize = getImagesize($tmpImg);
        $prop = $tmpImgSize[0] / $tmpImgSize[1];
        if(!strlen($slideshowWidth))
            $slideshowWidth = $slideshowHeight * $prop;
        if(!strlen($slideshowHeight))
            $slideshowHeight = $slideshowWidth / $prop;
    }
    $hasMeta = true;
}
else
{
    // get slideshow size by image dimensions
    $tmpImg = $this->entries[0]['data'][$Bildfeld]['raw'];
    $tmpImgSize = getImagesize($tmpImg);
    $slideshowWidth = $tmpImgSize[0];
    $slideshowHeight = $tmpImgSize[1];
}



// Thumbnails
$thumbnailWidth = $thumbnailSize; //$arrImages[0]['width'];
$thumbnailHeight = $thumbnailSize; //$arrImages[0]['height'];
if($thumbnails)
{
    foreach($arrImages as $i => $image)
    {
        // create a new thumbnail
        // $width, $height, $mode=''
        $thumb = $this->getImage($image['raw'],$thumbnailSize,$thumbnailSize,'crop');
        $arrImages[$i]['thumbnail'] = $thumb;
    }
}


// build data/images string for the slideshow
foreach($arrImages as $image)
{
    $strOptions = ':{';

    if($captions)
    {    
        $strOptions .= 'caption:' . "'" . $image['caption'] . "'";
    }
    else
    {
        $strOptions .= 'caption:' . "'" . "'";
    }
    
    if($thumbnails)
        $strOptions .= ', thumbnail:' . "'"  . $image['thumbnail'] . "'"; 

    $strOptions .= '}'; // close options
    
    $strData .= "'" . $image['raw'] . "'";
    $strData .= $strOptions;
    $strData .= ','; // close string
}


?>





<?php $id = $this->moduleTemplate->arrData['id']; // set a unique id ?>
<div class="layout_full catalog_slideshow<?php echo $id; ?>">

<script type="text/javascript">        
//<![CDATA[
window.addEvent('domready', function(){

// Init the slideshow
var images_<?php echo $id; ?> = {<?php echo $strData; ?>};
var show_<?php echo $id; ?> =
<?php if(strlen($slideshowEffect)): ?>
new Slideshow.<?php echo $slideshowEffect; ?>('show<?php echo $id; ?>', images_<?php echo $id; ?>,
<?php else: ?>
new Slideshow('show<?php echo $id; ?>', images_<?php echo $id; ?>,
<?php endif; ?>
{ 
    width: <?php echo $slideshowWidth; ?>,
    height: <?php echo $slideshowHeight; ?>,
    delay: <?php echo $duration; ?>,
    duration: <?php echo $delay; ?>,
    transition: 'quad:in:out',
    thumbnails: <?php echo $thumbnails; ?>,
    captions: <?php echo $captions; ?>, 
    loop: <?php echo $loop; ?>,
    paused: <?php echo $paused; ?>,
    <?php if($image_linked_to == 'lightbox'): ?>
    linked: true,
    <?php endif; ?>
    random: <?php echo $random; ?>,
    fast: 1,
    controller: <?php echo $controls; ?>,
    hu: '',
    loader: {'animate': ['plugins/slideshow2/img/loader-#.png', 12]}
});

});
//]]>
</script>





<div id="show<?php echo $id; ?>" class="slideshow">
<div class="slideshow-images">

<!-- lightbox -->
<?php if ($image_linked_to == 'lightbox'): ?><a rel="lightbox" href="#" title="<?php echo $arrImages[0]['name']; ?>"><?php endif; ?>

<!-- link to catalog -->
<?php if($image_linked_to == 'catalog'): ?><a href="<?php echo $arrImages[0]['url']; ?>"  title="Katalogeintrag ansehen"><?php endif; ?>
<script type="text/javascript">
<!--//--><![CDATA[//><!-- 

// grab the current href string and use it to find the corresponding catalog entry
window.addEvent('domready', function() 
{
    var arrA = $$('#show<?php echo $id; ?> .slideshow-images a' );
    var strUrl = "<?php echo implode(',',$arrUrl); ?>";
    var arrUrl = strUrl.split(',');
    var strSRC = "<?php echo implode(',',$arrSRC); ?>"
    var arrSRC = strSRC.split(',');
    var arrTemp = new Array();
    arrUrl.each(function(elem, index)
    {
        arrTemp[index] = new Array(elem, arrSRC[index]);
    });

    // set a new href for the clicked image
    arrA.addEvents({
        'click' : function() 
        {
            var src = this.getElement('img').get('src');
            var newHref = '';
            arrTemp.each(function(elem, index)
            {
                if(elem[1] == src )
                {
                    newHref = elem[0];
                }
            });
            // set href
            this.set('href',newHref);
        }    
    });
});
//--><!]]>
</script>
    <img id="slide<?php echo $id; ?>-<?php echo $arrImages[0]['id']; ?>" src="<?php echo $arrImages[0]['src']; ?>" width="<?php echo $arrImages[0]['w']; ?>" height="<?php echo $arrImages[0]['h']; ?>" alt="<?php echo $arrImages[0]['name']; ?>" />
<?php if ($image_linked_to != ''): ?></a><?php endif; ?>
</div>
</div>


</div>

<!-- stylesheet -->
<style type="text/css">
#show<?php echo $id; ?> {
    width:<?php echo $slideshowWidth; ?>px;    
    height:<?php echo $slideshowHeight + $thumbnailHeight +  $thumbnailPadding; ?>px;
    <?php if($this->play_image): ?>background: transparent url(<?php echo $this->play_image; ?>) top center no-repeat;<?php endif; ?>
}
#show<?php echo $id; ?> .slideshow-images {
    width:<?php echo $slideshowWidth; ?>px;
    height:<?php echo $slideshowHeight; ?>px;
}

<?php if($captions == true): ?>
/* Captions - Untertitel */
#show<?php echo $id; ?> .slideshow-captions {
    width:<?php echo $slideshowWidth; ?>px;
    bottom:<?php echo $thumbnailHeight + $thumbnailPadding; ?>px;
}
.slideshow-captions-visible {
    height:30px;
    opacity: .7;
}
<?php endif; ?>

<?php if($controls): ?>
/* Controls - Steuerung */
#show<?php echo $id; ?> .slideshow-controller {
    margin:-44px 0 0 -119px;
    top:50%;
}
<?php endif; ?>

<?php if($thumbnails): ?>
/* Thumbnails */
#show<?php echo $id; ?> .slideshow-thumbnails {
    height:<?php echo $thumbnailHeight + $thumbnailPadding; ?>px;
    width:<?php echo $slideshowWidth; ?>px;
    bottom:0;
    left:0;
    overflow:auto;
}
#show<?php echo $id; ?> .slideshow-thumbnails ul {
    height:<?php echo $thumbnailHeight; ?>px;
    width:<?php echo ( ($thumbnailWidth + $thumbnailPadding) * count($arrImages) ); ?>px;
}
/* Add a margin to the thumbnails */
#show<?php echo $id; ?> .slideshow-thumbnails li {
    margin:0;
}
#show<?php echo $id; ?> .slideshow-thumbnails a {
    float:left;
    opacity:.5;
    background-color: #FFF !important;
}
#show<?php echo $id; ?> .slideshow-thumbnails a:hover {
    background-color: #000 !important;
    opacity: 1;
}
#show<?php echo $id; ?> .slideshow-thumbnails a img {
    border:0;
}
<?php endif; ?>


</style>








<?php else: ?>

<?php if ($this->condition): ?>
<div class="condition"><?php echo $this->condition; ?></div>
<?php else: ?>
<p class="info">There are no entries matching your search.</p>
<?php endif; ?>

<?php endif; ?>

eingebaut auf der seite hier zu sehen http://www.hvmotor.es/inicio-reader/...20tes%201.html

funktioniert ja auch. Ich möchte aber nun mehrer Bilder auswählen die im Slider angezeigt werden. Stelle ich im Catalog auf Datei-Mehrfachauswahl und wähle dann z.b. Drei vier Bilder aus wird der Slider nicht mehr angezeigt. (einfach leere Seite).

[matuweb]

Benötigt das Template Ajax?

Ich habe es genau wie beschrieben eingefügt aber die Bilder werden ohne Funktion untereinander als Liste dargestellt.

Ich habe die Daten aus der jquery.flexslider.js vom Download in den Headbereich gesetzt oder auch einmal als eigender JavaScript Code in das Layout gesetzt..
Muss auch das CSS in Contao geladen werden?

Grüße
Matu