Bildergalerie mit Rocksolid Custom Elements
Was muss ich an meinem Code ändern um eine Bildergalerie auszugeben.
Momentan hab ich ein Foto (das sich in der Lightbox öffnet) mit einem Text darunter.
Ich möchte aber einen ganzen Ordner auswählen können - und das nur 1 Thumbnail angezeigt wird und auf Klick in der Lightbox alle Fotos vom Ordner ausgegeben werden.
Mein momentaner code:
rsce_galerie.html5:
PHP-Code:
<?php foreach ($this->members as $member): ?>
<div class="col-xl-3 col-lg-6 col-md-6">
<?php if ($image = $this->arrData['getImageObject']($member->image)): ?>
<a data-lightbox="<?php echo $this->id ?>" href="<?php echo $image->singleSRC ?>">
<img src="<?php echo $image->src ?>" alt="<?php echo $image->alt ?: $member->name ?>"<?php echo $image->imgSize ?>>
</a>
<?php endif ?>
<p style="font-weight:bold;"><?php echo $member->text ?></p>
</div>
<?php endforeach ?>
rsce_galerie_config.php:
PHP-Code:
<?php
return array(
'label' => array(
'de' => array(
'Galerie',
),
),
'types' => array('content'),
'contentCategory' => 'texts',
'standardFields' => array('headline', 'cssID'),
'fields' => array(
'members' => array(
'label' => array(
'de' => array(
'Galerie',
'Fügen Sie eine neue Baustelle ein.',
),
),
'elementLabel' => array(
'de' => 'Baustelle %s',
),
'inputType' => 'list',
'fields' => array(
'image' => array(
'label' => array(
'de' => array('Bild', ''),
),
'inputType' => 'fileTree',
'eval' => array(
'fieldType' => 'radio',
'filesOnly' => true,
'extensions' => 'jpg,jpeg,png,gif,svg',
),
),
'text' => array(
'label' => array(
'de' => array('Text', ''),
),
'inputType' => 'text',
'eval' => array('tl_class' => 'w200'),
),
),
),
),
);
Liste der Anhänge anzeigen (Anzahl: 1)
das ich einen Ordner auswählen könnte hätte ich geschafft so:
templates/rsce_galerie_config.php
PHP-Code:
<?php
return array(
'label' => array(
'de' => array(
'Galerie2',
),
),
'types' => array('content'),
'contentCategory' => 'texts',
'standardFields' => array('headline', 'cssID'),
'fields' => array(
'members' => array(
'label' => array(
'de' => array(
'Galerie2',
'Fügen Sie eine neue Baustelle ein.',
),
),
'elementLabel' => array(
'de' => 'Baustelle %s',
),
'inputType' => 'list',
'fields' => array(
'image' => array(
'label' => array('Bilder und Ordner', 'Bitte wählen Sie ein oder mehrere Bilder oder einen Ordner aus. Wenn Sie einen Ordner auswählen, werden alle darin enthaltenen Bilder eingefügt.'),
'inputType' => 'fileTree',
'eval' => array( 'multiple' => true, 'fieldType' => 'checkbox', 'orderField' => 'orderSRC', 'files' => true, 'mandatory' => true, ),
),
'text' => array(
'label' => array(
'de' => array('Text', ''),
),
'inputType' => 'text',
'eval' => array('tl_class' => 'w200'),
),
),
),
),
);
Anhang 24807
Aber im Frontend wird mir dann nichts angezeigt ? Wie muss ich die html datei abändern?
Liste der Anhänge anzeigen (Anzahl: 2)
Intuitiv. :D
Du hast ein neues Feld mit der Beschreibung, wählst natürlich 1 Vorschaubild pro Reihe (macht ja Sinn) und wählst das modifizierte Template, fertsch.
Anhang 24805 Anhang 24806
Ich vergaß: die Templates sind schon Version 4.12!, da hat sich wegen dem schema.org was geändert...
ToM
Tante Edith sagt: Ich (für mich) finde die Kombo mit der Flex Galerie und der Lightgallery Lightbox genial userfriendly, insbesondere wegen dem Thumbnailband unten bei Großansicht.
Liste der Anhänge anzeigen (Anzahl: 2)
Jetzt schaut es so aus momentan:
PHP-Code:
<?php
return array(
'label' => array(
'de' => array(
'Galerie',
),
),
'types' => array('content'),
'contentCategory' => 'texts',
'standardFields' => array('headline', 'cssID'),
'fields' => array(
'members' => array(
'label' => array(
'de' => array(
'Galerie',
'Fügen Sie eine neue Baustelle ein.',
),
),
'elementLabel' => array(
'de' => 'Baustelle %s',
),
'inputType' => 'list',
'fields' => array(
'image' => array(
'label' => array(
'de' => array('Bild', ''),
),
'inputType' => 'fileTree',
'eval' => array(
'fieldType' => 'checkbox',
'filesOnly' => true,
'multiple' => true,
'extensions' => 'jpg,jpeg,png,gif,svg',
),
),
'text' => array(
'label' => array(
'de' => array('Text', ''),
),
'inputType' => 'text',
'eval' => array('tl_class' => 'w200'),
),
),
),
),
);
Anhang 24808 Anhang 24809
PHP-Code:
<?php foreach ($this->members as $member): ?>
<div class="col-xl-3 col-lg-6 col-md-6">
<?php foreach ($member->image as $index => $singleImage): ?>
<?php if ($singleImage= $this->arrData['getImageObject']($singleImage)): ?>
<img src="<?= $singleImage->src ?>" alt="<?= $singleImage->alt ?>">
<?php endif; ?>
<?php endforeach ?>
<p style="font-weight:bold;"><?php echo $member->text ?></p>
</div>
<?php endforeach ?>
Und ich möchte ja nur ein Vorschaubild + alle 4 fotos aber in einer Lightbox...
Liste der Anhänge anzeigen (Anzahl: 1)
ich hätte eh zb. probiert:
'files' => true,
oder das:
Dann kann ich einen Ordner oder einzelne Fotos auswählen
'eval' => array(
'fieldType' => 'checkbox',
'files' => true,
'filesOnly' => true,
'multiple' => true,
'extensions' => 'jpg,jpeg,png,gif,svg',
ABER wenn ich einzelne Fotos auswähle - geht alles im Frontend und ein Foto mit Lightbox wird angezeigt, wähle ich aber nur einen Ordner aus dann steht dieser im Backend drinnen und im Frontend wird nichts angezeigt:
Anhang 24810
Liste der Anhänge anzeigen (Anzahl: 1)
Liste der Anhänge anzeigen (Anzahl: 1)
Liste der Anhänge anzeigen (Anzahl: 3)
Nur wird es nicht angezeigt:
Ich verzweifle :(
Anhang 24813
Anhang 24814
Anhang 24815
Im Backend habe ich auch schon eingebaut das man die Bildgröße einstellen kann. Wie bringe ist das ins Frontend?
Hätte das " , $this->size " dazugeschrieben aber geht nicht:
PHP-Code:
<?php foreach ($member->image as $index => $singleImage): ?>
<?php if ($singleImage = $this->arrData['getImageObject']($singleImage, $this->size)): ?>
<a data-lightbox="<?= $this->id ?>" href="<?= $singleImage->singleSRC ?>">
<?php if(!$index): ?>
<img src="<?= $singleImage->src ?>" alt="<?= $singleImage->alt ?>" >
<?php endif; ?>
</a>
<?php endif; ?>
<?php endforeach ?>