Core-Galerie - cssSlider aus Core-Galerie

[phyton2706]

Hallo zusammen,

ich möchte gerne einen cssSlider aus der Standard Galerie generieren. Hierzu benötige ich pro Bild ein Input-Feld mit einem "Zähler".

<ul class="slideList">
  <?php foreach ($this->body as $class=>$row): ?>
  <?php $i = 0; foreach ($row as $col): $i++; ?> <-- Hier soll gezählt werden
    <?php foreach ($row as $col): ?>
      <?php if ($col->addImage): ?>
        <li class="slide slide<? $i; ?> <?= $class ?> <?= $col->class ?>"> <-- Das Ergebnis soll hier eingefügt werden.
          <figure class="image_container"<?php if ($col->margin): ?> style="<?= $col->margin ?>"<?php endif; ?>>
            <?php if ($col->href): ?>
              <a href="<?= $col->href ?>"<?= $col->attributes ?> title="<?= $col->alt ?>"><?php $this->insert('picture_default', $col->picture); ?></a>
            <?php else: ?> 
             <?php $this->insert('picture_default', $col->picture); ?>
            <?php endif; ?>
            <?php if ($col->caption): ?>
              <figcaption class="caption"><?= $col->caption ?></figcaption>
            <?php endif; ?>
          </figure>
        </li>
      <?php endif; ?>
    <?php endforeach; ?>
  <?php endforeach; ?>
</ul>

Leider bekomme ich so immer einen Parse Error...

Ich benötige bitte mal einen Tipp, wie ich hier weiter kommen kann...

LG
Frank

[dazzle89]

Mir fällt nur auf, dass du bei der Ausgabe von $i am Anfang kein = Zeichen benutzt. Also nur <? statt <?=

[dazzle89]

Achja und außerdem werden deine PHP-Kommentare nicht richtig geschlossen (es sei denn du hast sie jetzt nur fürs Forum eingefügt)

[phyton2706]

Hallo dazzle89,

Das bei der Ausgabe ein "=" fehlt, ist mir auch schon aufgefallen, und wurde schon korrigiert.
Allerdings kommt der Fehler aber aus Zeile mit

<?php $i = 0; ...

Die Kommentare habe ich nur für das Forum eingefütgt...

[folkfreund]

Und hast du mehr "foreach" als "endforeach" in deinem Code.
Du musst außerdem nicht jede Zeile einzeln als PHP-Code definieren. Es könnte auch so gehen, falls du das übersichtlicher findest:

<?php 
echo '<ul class="slideList">';
foreach ($this->body as $class=>$row) {
  $i = 0;
  foreach ($row as $col) {
    $i++;
    foreach ($row as $col) {
      if ($col->addImage) {
        echo '<li class="slide slide'.$i.' '.$class.' '.$col->class.'"><figure class="image_container"';
          if ($col->margin) {
            echo 'style="'.$col->margin.'"';
          }
          echo '>';
          if ($col->href) {
            echo '<a href="'.$col->href.' '.$col->attributes.' title="'.$col->alt.'">';
            $this->insert('picture_default', $col->picture);
            echo '</a>';
          } else {
            $this->insert('picture_default', $col->picture);
          }
          if ($col->caption) {
            echo '<figcaption class="caption">'.$col->caption.'</figcaption>';
          }
        echo '</figure></li>';
      }
    }
  }
}
echo '</ul>';
?>

[phyton2706]

Hallo folkfreund,

das hat leider nicht geklappt... Ich bekomme immer eine 1 ausgegeben.

Ich poste mal meinen kompletten Code für mein Template:

<div class="sliderWrapper">
    <div class="slider">
        <input type="radio" name="slider" class="control01" id="slide1" checked="checked">
        <?php foreach ($this->body as $class=>$row): ?>
       <?php $i = 1; foreach ($row as $col): $i++; ?>
         <input type="radio" name="slider" class="control01" id="slide<?= $i; ?>"> 
       <?php endforeach; ?>
        <?php foreach ($this->body as $class=>$row): ?>
        <?php $i = 1; foreach ($row as $col): $i++; ?>
       <input type="radio" name="slider" class="control02" id="slide<?= $i; ?>">
        <?php endforeach; ?>

        <ul class="slideList">
         <?php foreach ($this->body as $class=>$row): ?>
          <?php $i = 0; foreach ($row as $col): $i++; ?> 
            <?php foreach ($row as $col): ?>
              <?php if ($col->addImage): ?>
                <li class="slide slide<?= $i; ?> <?= $class ?> <?= $col->class ?>">
                  <figure class="image_container"<?php if ($col->margin): ?> style="<?= $col->margin ?>"<?php endif; ?>>
                    <?php if ($col->href): ?>
                      <a href="<?= $col->href ?>"<?= $col->attributes ?> title="<?= $col->alt ?>"><?php $this->insert('picture_default', $col->picture); ?></a>
                   <?php else: ?>
                      <?php $this->insert('picture_default', $col->picture); ?>
                    <?php endif; ?>
                    <?php if ($col->caption): ?>
                      <figcaption class="caption"><?= $col->caption ?></figcaption>
                    <?php endif; ?>
                  </figure>
                </li>
              <?php endif; ?>
            <?php endforeach; ?>
          <?php endforeach; ?>
        </ul>
 
       <ul class="slideControl slideControl01">
          <?php foreach ($this->body as $class=>$row): ?>
        <?php $i = 0; foreach ($row as $col): $i++; ?>
            <?php foreach ($row as $col): ?>
                <li><label for="slide<?= $i; ?>">Nummer <?= $i; ?></label></li>
           <?php endforeach; ?>
          <?php endforeach; ?>
        </ul>
        <ul class="slideControl slideControl02">
          <?php foreach ($this->body as $class=>$row): ?>
         <?php $i = 0; foreach ($row as $col): $i++; ?>
            <?php foreach ($row as $col): ?>
                <li><label for="slide1<?= $i; ?>">Nummer 1<?= $i; ?></label></li>
            <?php endforeach; ?>
          <?php endforeach; ?>
        </ul>
    </div>
</div>

[dazzle89]

EDIT:

Du hast 2 mal die gleiche Schleife

foreach ($row as $col)

ineinander.

Probier mal so etwas:

        <ul class="slideList">
         <?php foreach ($this->body as $class=>$row): ?>
          <?php $i = 1; ?> 
            <?php foreach ($row as $col): ?>
              <?php if ($col->addImage): ?>
                <li class="slide slide<?= $i; ?> <?= $class ?> <?= $col->class ?>">
                  <figure class="image_container"<?php if ($col->margin): ?> style="<?= $col->margin ?>"<?php endif; ?>>
                    <?php if ($col->href): ?>
                      <a href="<?= $col->href ?>"<?= $col->attributes ?> title="<?= $col->alt ?>"><?php $this->insert('picture_default', $col->picture); ?></a>
                   <?php else: ?>
                      <?php $this->insert('picture_default', $col->picture); ?>
                    <?php endif; ?>
                    <?php if ($col->caption): ?>
                      <figcaption class="caption"><?= $col->caption ?></figcaption>
                    <?php endif; ?>
                  </figure>
                </li>
              <?php endif; ?>
              <?php $i++; ?>
            <?php endforeach; ?>
          <?php endforeach; ?>
        </ul>

[phyton2706]

Auch hierbei bekomme ich nur eine 1 zurück geliefert...

[dazzle89]

Bei den input-Feldern hast du jeweils 2 mal eine foreach-Schleife, schließt sie aber nur mit einem endforeach. Das ist auf jeden Fall falsch.

Werden denn so viele input-Felder ausgegeben wie du möchtest oder nur eines?

[phyton2706]

Die Anzahl der Input-Felder passt.

Nur bei slide<?= $i; ?> steht immer slide1

[folkfreund]

Außerdem siehe hier: http://php.net/manual/en/control-str...ive-syntax.php

Deine Schreibweise

<?php $i = 1; foreach ($row as $col): $i++; ?>

ist vermutlich nicht valide, da hinter dem : das PHP-foreach beendet ist.

Note:
Mixing syntaxes in the same control block is not supported.

Korrekt erscheint mir daher

<?php $i = 1; foreach ($row as $col): ?>
<?php $i++; ?>

[Andreas]

Nein, das ist in Ordnung so. Der Doppelpunkt entspricht einfach einem "{".

Was da gemeint ist: Vermische nicht diese Schreibweisen mit dem ":" und dem "{".

Das mit dem Zähler in einer Zeile macht man bei der foreach(): Schreibweise sehr oft, weil es übersichtlich ist.

[phyton2706]

Auch damit bin ich nicht weiter gekommen... Jetzt wird mir für jedes li-Element "slide2" ausgegeben.
Mein aktueller Versuch sieht so aus:

<div class="sliderWrapper">
    <div class="slider">
        <?php foreach ($this->body as $class=>$row): ?>
        <input type="radio" name="slider" class="control01" id="<?= $class ?>" checked=" "> 
        <?php endforeach; ?>
        <?php foreach ($this->body as $class=>$row): ?>
        <input type="radio" name="slider" class="control02" id="<?= $class ?>"> 
        <?php endforeach; ?>
 
       <ul class="slideList">
        <?php foreach ($this->body as $class=>$row): ?>
           <?php foreach ($row as $col): ?>
            <?php if ($col->addImage): ?>
              <li class="slide <?= $class ?> <?= $col->class ?>">
                 <figure class="image_container"<?php if ($col->margin): ?> style="<?= $col->margin ?>"<?php endif; ?>>
                    <?php if ($col->href): ?>
                      <a href="<?= $col->href ?>"<?= $col->attributes ?> title="<?= $col->alt ?>"><?php $this->insert('picture_default', $col->picture); ?></a>
                  <?php else: ?>
                      <?php $this->insert('picture_default', $col->picture); ?>
                    <?php endif; ?>
                    <?php if ($col->caption): ?>
                      <figcaption class="caption"><?= $col->caption ?></figcaption>
                    <?php endif; ?>                  </figure>
                </li>
            <?php endif; ?>
            <?php endforeach; ?>
          <?php endforeach; ?>
        </ul>
 
        <ul class="slideControl slideControl01">
        <?php foreach ($this->body as $class=>$row): ?>
            <?php foreach ($row as $col): ?>
            <li><label for="<?= $class ?>"><?= $class ?></label></li>
            <?php endforeach; ?>
        <?php endforeach; ?>
        </ul>
        <ul class="slideControl slideControl02">
        <?php foreach ($this->body as $class=>$row): ?>
            <?php foreach ($row as $col): ?>
            <li><label for="1<?= $class ?>">1<?= $class ?></label></li>
            <?php endforeach; ?>
        <?php endforeach; ?>
        </ul>
    </div>
</div>

So habe ich zwar eindeutige Klassen, aber nicht so, wie ich es gerne hätte...

Vielleicht habe ich auch den komplett falschen Ansatz gewählt?

Ich versuche noch mal meine Intesion genauer zu beschreiben.:
Aus der Standard-Galerie soll eine CSS-Only-Slideshow werden.

Hierzu versuche ich gerade das Template um ein paar weitere CSS-Klassen zu erweitern.
Das li-Element und die noch benötigten Input-Felder, brauchen alle eine eindeutige ID (z.B. slide_0 - slide_26). -> Das versuche ich über die zusätzliche Schleife zu generieren.

Das ist doch soweit korrekt, oder gibt es einen einfacheren, schnelleren Weg?

[dazzle89]

Nun schreibst du deine inputs in die falsche Schleife...

Sie müssen in einer <?php foreach ($row as $col): ?> stehen. Also:

        <?php foreach ($row as $col): ?>
        <input type="radio" name="slider" class="control01" id="<?= $class ?>" checked=" "> 
        <?php endforeach; ?>
        <?php foreach ($row as $col): ?>
        <input type="radio" name="slider" class="control02" id="<?= $class ?>"> 
        <?php endforeach; ?>

Wobei ich nicht verstehe, wieso du hier 2 mal die gleiche Schleife benutzt. Du kannst doch einfache beide Inputs zusammen in EINER Schleife ausgeben?

Und ich denke, dass dein Vorgehen mit der Zählvariable der richtige Weg für sowas ist. Würde ich wohl auch so machen. Wobei ich nicht weiß, ob das Template für jeden Eintrag eine ID mitgibt. Wenn ja, könnte man natürlich die ID an die Klasse ranhängen, sofern das dann auch mit deinem CSS nachher klappt.

[Andreas]

Ich kenne [Galerie] nicht, aber in ner Core-Galerie würde das so gehen. Geändert sind nur die Zeilen mit HTML-Kommentar dahinter und der kleine PHP-Block.

...
  <?php $itemCount = 0; foreach ($this->body as $class=>$row): ?> <!-- geändert ($itemCount) -->
    <?php foreach ($row as $col): $itemCount++; ?> <!-- geändert ($itemCount) -->

    <?php
      $countString = 'img_'.$itemCount;
      $input = '<input id="'.$countString.'" type="radio" name="slide">';
      $col->class = $col->class.' '.$countString;
    ?>

      <?php if ($col->addImage): ?>
        <li class="<?= $class ?> <?= $col->class ?>">
          <?= $input ?> <!-- neu -->
...

Aber mich würde dieser CSS-Slider mal interessieren. Hast du mal einen Link auf diesen Slider.

[phyton2706]

Hallo Andreas,
sorry, aber ich bin heute nicht zum Testen bekommen...
Zuerst: Ich möchte dir Core-Galerie anpassen. Wenn nicht wieder etwas dazwischen kommt, teste ich morgen Mal deinen Absatz.
Den Link zu dem Slider reiche ich morgen nach.

Gesendet von meinem Nexus 5X mit Tapatalk

[Andreas]

Zuerst: Ich möchte dir Core-Galerie anpassen.

Ah, ok, hatte mich schon gewundert, was das für ne Erweiterung sein soll. Dann käme der Thread eigentlich nicht hier in dieses Sub-Forum. Mit den eckigen Klammern um den Erweiterungsnamen kennzeichnen wir immer, dass es sich um eine Erweiterung handelt, so wie hier: https://contao.org/de/erweiterungsli....80029.de.html. Das ist dann auch gleich der Ordnername der Erweiterung.

Mach am besten mal die eckigen Klammern im Titel weg, das kann sonst in die Irre führen.

Wenn ich das gewusst hätte, hätte ich schon eher mal nachgesehen. Ist ein normales Inhaltselement (CE).

[phyton2706]

Hallo Andreas,

ich habe den Titel angepasst.

Und hier, wie versprochen der Link zu dem cssSlider:

http://ebene11.com/slider-als-keyfra...-mit-css3.html

[Andreas]

Ah, ok. Dann kannst du aus meinem Beispiel die Inputs nicht benutzen, weil ich die ja jeweils zum Bild gepackt habe. Du brauchst noch die Anzahl der Bilder, um die Inputs und die ul.slideControl(s) mit ner while() oder for() Schleife zu erstellen. Die bekommst du so.

$total = count($this->multiSRC); 

Oder du kannst auch direkt über $this->multiSRC rödeln.

foreach($this->multiSRC as $key => $uuid)
{
  echo $key;
} 

Und dann musst du dass CSS dynamisch an die Anzahl der Bilder anpassen. Das musst du in dem Template machen und das CSS dann so in den HEAD bringen.

$GLOBALS['TL_HEAD'] = '
  <style>
    body {
      background-color: red;
    }
  </style>
'; 

Ganz ehrlich: Als Herausforderung witzig, aber wenn mich da einer fragen würde, ob ich was anpassen könnte, würde ich ablehnen. Die Logik und das was passiert ist durch Ansehen des Codes nicht oder nur sehr schwer zu enträtseln. Da würde ich lieber ne Slideshow mit JS selber programmieren.