RS Custom Elements Bildergalerie

[Bernator]

Benötige das Eingabe- und Ausgabetemplate für RS Custom Elements mit Bildergalerie.

Aufbau Ein-/Ausgabe:

1. Überschriftenfeld
2. Auswahl Hauptbild
3. Textfeld als TinyMCE
4. Bildergalerie mit Auswahl von Bildern + Einstellung "Wichtiger Bereich" + 4 Bilder in einer Reihe + Lightbox


Fertigstellung so schnell wie möglich...

Viele Grüße
Jens

Moderation: Verschoben, Problem wurde mit Forenunterstützung gelöst
In den Aufträgen würde niemand nach einer Lösung des Problems suchen würde

[Black Pirate]

Das sollten wir doch mit ein bisschen Hilfe hier im Forum umsetzen können

Hast du den schon was angefangen?

[zonky]

Wenn Du mit der Erstellung eines Arrays nicht so vertraut bist, könntest Du auch das mal testen https://app.intco.it/rsce-visual-editor/index.html

Am Template musst Du aber selbst schrauben...

[Bernator]

Hallo Zonky,

habe das Werkzeug ausprobiert... irgendwie komme ich da aber auch nicht weiter.

/** This file should be saved as rsce_element_config.php */

return array(
    'label' => array(
        'de' => array('element1', 'Elemente Einsatz'),
    ),
    'types' => array('content', 'module'),
    'contentCategory' => 'texts',
    'moduleCategory' => 'custom_elements',
    'fields' => array(
        'text' => array(
            'label' => array(
                'de' => array('text', ''),
            ),
            'inputType' => 'textarea',
            'eval' => array(
                'allowHtml' => '1',
                '' => '',
            ),
            '' => '',
        ),
        'hauptbild' => array(
            'label' => array(
                'de' => array('hauptbild', ''),
            ),
            'inputType' => 'fileTree',
            'eval' => array(
                'size' => '',
            ),
        ),
        'galerie' => array(
            'label' => array(
                'de' => array('galerie', ''),
            ),
            'inputType' => 'fileTree',
            'eval' => array(
                'files' => '1',
            ),
            'options' => array('1'),
        ),
        'ueberschrift' => array(
            'label' => array(
                'de' => array('ueberschrift', ''),
            ),
            'inputType' => 'text',
        ),
    ),
); 

Eine Überschrift gibt es nicht, Galeriebilder kann ich immer nur eines auswählen und die Textarea ist nicht formatierbar. Hmm, da muss ich wohl noch einmal schauen...

[mlweb]

Vielleicht hilft Dir der Forenbeitrag weiter

[Black Pirate]

Ich würde es in etwa so machen:

return array(
	'label' => array(
		'de' => array(
			'Custom-Gallery',
			'Benutzerdefinierte Galerie',
		),
	),
	'types' => array('content'),
	'contentCategory' => 'texts',
	'standardFields' => array('headline', 'cssID'),
	'fields' => array(
		'cuGa' => array(
			'label' => array(
				'de' => array(
					'Gallerie',
					'Füge eine beliebige Anzahl an Galerien ein.',
				),
			),
			'elementLabel' => array(
				'de' => 'Galerie %s',
			),
			'inputType' => 'list',
			'fields' => array(
				'mainimage' => array(
					'label' => array('Hauptbild', 'Wähle hier das Hauptbild aus'),
					'inputType' => 'fileTree',
					'eval' => array(
						'fieldType' => 'radio',
						'filesOnly' => true,
						'extensions' => 'jpg,jpeg,png',
					),
				),
				'images' => array(
					'label' => array('Galeriebilder', 'Wähle hier die Galeriebilder aus'),
					'inputType' => 'fileTree',
					'eval' => array(
						'fieldType' => 'checkbox',
						'filesOnly' => true,
						'isGallery' => true,
						'multiple'   => true,
        				'orderField' => 'orderSRC',
					),
					'sql'       => "blob NULL",
				),
				'title' => array(
					'label' => array('Überschrift', 'Titel / Überschrift eingeben'),
					'inputType' => 'text',
				),
				'description' => array(
					'label' => array('Text', 'Text einfügen'),
					'inputType' => 'textarea',
					'eval' => array('rte' => 'tinyMCE'),
					'sql' => array('type' => 'text', 'notnull' => false),
				),
				

			),
		),
	),
);

ist aus dem Bauch heraus, vielleicht findet man noch Tippfehler

[Bernator]

Klasse, dass ist doch genau das, was ich brauche. Hätte es natürlich gerne jeweils als Einzelelement, da gucke ich aber einmal. An die Ausgabe gehe ich dann auch dran... Danke.

[Black Pirate]

Wenn du es Einzeln verwendest, kannst du das Field "Titel/Überschrift" auch weglassen.
Weil das RSCE bringt von Haus aus eine Element-Überschrift mit.

diese kannst du im Template aufrufen mit:

<<?php echo $this->hl ?>>
    <?php echo $this->headline ?>
</<?php echo $this->hl ?>>

[Bernator]

Stimmt... das probiere ich aus.

Bei der Ausgabe habe ich aber das Problem, dass die Bilder nicht ausgegeben werden:

    <?php $mycounter = 1; ?>
    <?php foreach ($this->cuGa as $item): ?>
            
<?php if($item->title): ?>
<h4><?php echo $item->title; ?></h4>
<?php endif; ?>
            
<?php if ($image = $this->arrData['getImageObject']($this->mainimage)): ?>
<img src="<?php echo $image->src ?>"  alt="<?php echo $image->alt ?: $this->headline ?>" title="<?php echo $image->title ?: $this->headline ?>"<?php echo $image->imgSize ?>>
<?php endif ?>


<?php if($item->description): ?>
<p><?php echo $item->description; ?></p>
<?php endif; ?>
            
            
<?php if ($image = $this->arrData['getImageObject']($this->images)): ?>
<a data-lightbox="<?php echo $this->id ?>" href="<?php echo $image->singleSRC ?>">
<img src="<?php echo $image->src ?>"  alt="<?php echo $image->alt ?: $this->headline ?>" title="<?php echo $image->title ?: $this->headline ?>"<?php echo $image->imgSize ?>>
</a>
<?php endif ?>
            
            
            
<?php $mycounter++; ?>
<?php endforeach ?>

Habe ich da etwas übersehen?

[Black Pirate]

versuch mal dies zu ändern

<?php if ($image = $this->arrData['getImageObject']($item->mainimage)): ?>

und

<?php if ($image = $this->arrData['getImageObject']($item->images)): ?>

Weil du hast deine Variable "item" benannt

[Black Pirate]

als Idee damit man die vorbelegten Bildgrössen aus Themes-Bildgrössen verwenden kann:

<a href="<?= \FilesModel::findByUuid($item->mainimage)->path; ?>" data-lightbox="">
    <?= $this->figure($item->mainimage, '8'); ?>
</a>

Die 8 wäre dann deine ID aus den Bildgrössen.

[Bernator]

Dann habe ich einen Fehler:

[2023-08-16T13:52:12.998830+02:00] request.CRITICAL: Uncaught PHP Exception TypeError: "Contao\CoreBundle\Image\Studio\FigureBuilder::from(): Argument #1 ($identifier) must be of type FilesModel|ImageInterface|string|int|null, array given" at /www/htdocs/xxxxxxxxxxxxxxx/vendor/contao/core-bundle/src/Image/Studio/FigureBuilder.php line 327 {"exception":"[object] (TypeError(code: 0): Contao\\CoreBundle\\Image\\Studio\\FigureBuilder::from(): Argument #1 ($identifier) must be of type FilesModel|ImageInterface|string|int|null, array given at /www/htdocs/xxxxxxxxxx/vendor/contao/core-bundle/src/Image/Studio/FigureBuilder.php:327)"} []

[Bernator]

Die Überschrift, den Text und das Hauptbild habe ich nun in der Ausgabe.

Die Bilder als Galerie bekomme ich einfach nicht angezeigt:

    <?php $mycounter = 1; ?>
    <?php foreach ($this->cuGa as $item): ?>
            
<?php if($item->title): ?>
<h4><?php echo $item->title; ?></h4>
<?php endif; ?>
            

            <?php if ($image = $this->arrData['getImageObject']($item->mainimage)): ?>
                <?= $this->figure($item->mainimage, '8'); ?>
            <?php endif ?>

<?php if($item->description): ?>
<p><?php echo $item->description; ?></p>
<?php endif; ?>
            
<?php foreach ($this->images as $imageId): ?>
    <?php if ($image = $this->getImageObject($imageId, $this->size)): ?>
         <?php $this->insert('picture_default', $image->picture) ?>
    <?php endif ?>
<?php endforeach ?>

<?php $mycounter++; ?>
<?php endforeach ?>

Da habe ich nun bereits alle Lösungsansätze im Forum durch... was mache ich da nur falsch?

[Bernator]

So geht es auch nicht:

<?php foreach ($this->images as $imageId): ?>
<?php if ($image = $this->arrData['getImageObject']($this->images)): ?>
<a href="<?= \FilesModel::findByUuid($item->images)->path; ?>" data-lightbox="">
    <?= $this->figure($item->images, '8'); ?>
</a>
<?php endif ?>
<?php endforeach ?>

[Black Pirate]

Vielleicht mal noch die Frage: mit welcher Contao Version arbeitest du?

[Bernator]

Mit 4.13

[Black Pirate]

Ok, here we go...

config:

<?php

return array(
	'label' => array(
		'de' => array(
			'Custom-Gallery',
			'Benutzerdefinierte Galerie',
		),
	),
	'types' => array('content'),
	'contentCategory' => 'texts',
	'standardFields' => array('headline', 'cssID'),
	'fields' => array(
		'cuGa' => array(
			'label' => array(
				'de' => array(
					'Gallerie',
					'Füge eine beliebige Anzahl an Galerien ein.',
				),
			),
			'elementLabel' => array(
				'de' => 'Galerie %s',
			),
			'inputType' => 'list',
			'fields' => array(
				'mainimage' => array(
					'label' => array('Hauptbild', 'Wähle hier das Hauptbild aus'),
					'inputType' => 'fileTree',
					'eval' => array(
						'fieldType' => 'radio',
						'filesOnly' => true,
						'extensions' => 'jpg,jpeg,png',
					),
				),
				'images' => array(
					'label' => array('Galeriebilder', 'Wähle hier die Galeriebilder aus'),
					'inputType' => 'fileTree',
					'eval' => array(
						'fieldType' => 'checkbox',
						'filesOnly' => true,
						'isGallery' => true,
						'multiple'   => true,
        				'orderField' => 'orderSRC',
					),
					'sql'       => "blob NULL",
				),
				'title' => array(
					'label' => array('Titel', 'Titel einfügen'),
					'inputType' => 'text',
				),
				'description' => array(
					'label' => array('Text', 'Text einfügen'),
					'inputType' => 'textarea',
					'eval' => array('rte' => 'tinyMCE'),
					'sql' => array('type' => 'text', 'notnull' => false),
				),
				

			),
		),
	),
);

Template:

<div class="<?php echo $this->class ?> block"<?php echo $this->cssID ?>>

    <?php foreach ($this->cuGa as $item): ?>
    <div class="cuGaBox">
        <h4><?= $item->title ?></h4>
        <?= $this->figure($item->mainimage, '1'); ?>
        
        <?= $item->description ?>
		
        <?php foreach ($item->images as $img): ?>
            <a href="<?= \FilesModel::findByUuid($img)->path; ?>" data-lightbox="">
                <?= $this->figure($img, '2'); ?>
            </a>
        <?php endforeach; ?>
        
	</div>
    <?php endforeach ?>
	
</div>

Bildgrösse ID 1 und ID 2 ist nur als Beispiel, dort musst du deine ID's eintragen.

Danach noch mit deinen CSS stylen und fertig.


Hab ich gerade auf einer 4.13 getestet, wird alles ausgegeben nach deinem Wunsch

[Bernator]

Super, die Ausgabe hat grundsätzlich funktioniert. Top!

Das mit den Bildgrößen IDs kenne ich nicht, die Bilder bleiben immer groß und werden nicht nebeneinander angezeigt. Da schaue ich aber noch einmal.

[Black Pirate]

Die Bildgrössen kannst du hier definieren:
->Themes -> Bildgrössen


Die Bilder nebeneinander ist stylen.
Dies kannst du in deinem CSS zB. Grid oder Flex machen, dann wirds auch responsiv

[mlweb]

Moderation: Habe den Thread verschoben, da er nicht (mehr) in die Rubrik Kleinaufträge passt.

[Bernator]

Die Bildgrößen konnte ich nun auch definieren... hat geklappt.

[Bernator]

Jetzt, wo das Custom Element so schön funktioniert merke ich, dass es für meinen Einsatz doch inhaltlich sehr lang wird auf der Seite.

Ist es möglich, jeden einzelnen Inhalt als Accordeon darzustellen? Wenn ja, mache ich das in der Config oder im Template der Ausgabe?

Einen schönen Feierabend
Jens

[Bernator]

War dann eigentlich ganz easy, wenn man sich das Accordeon-Element im Quellcode ansieht...

<section class="ce_accordionStart ce_accordion block">
<div class="toggler">Name des Togglers</div>
<div class="accordion">

[Black Pirate]

RSCE kann das ebenfalls von Haus aus.
Dazu definierst du einfach in der config eine Field-Gruppe.

Mit deinem Beispiel würde das dann so aussehen:

return array(
	'label' => array(
		'de' => array(
			'Custom-Gallery',
			'Benutzerdefinierte Galerie',
		),
	),
	'types' => array('content'),
	'contentCategory' => 'texts',
	'standardFields' => array('headline', 'cssID'),
	'fields' => array(
		'cuGa' => array(
			'label' => array(
				'de' => array(
					'Gallerie',
					'Füge eine beliebige Anzahl an Galerien ein.',
				),
			),
			'elementLabel' => array(
				'de' => 'Galerie %s',
			),
			'inputType' => 'list',
			'fields' => array(
				
				'group1' => array(
					'label' => array('Gruppe Bilder', ''),
					'inputType' => 'group',
				),
				
				'mainimage' => array(
					'label' => array('Hauptbild', 'Wähle hier das Hauptbild aus'),
					'inputType' => 'fileTree',
					'eval' => array(
						'fieldType' => 'radio',
						'filesOnly' => true,
						'extensions' => 'jpg,jpeg,png',
					),
				),
				'images' => array(
					'label' => array('Galeriebilder', 'Wähle hier die Galeriebilder aus'),
					'inputType' => 'fileTree',
					'eval' => array(
						'fieldType' => 'checkbox',
						'filesOnly' => true,
						'isGallery' => true,
						'multiple'   => true,
        				'orderField' => 'orderSRC',
					),
					'sql'       => "blob NULL",
				),
				
				'group2' => array(
					'label' => array('Gruppe Texte', ''),
					'inputType' => 'group',
				),
				
				'title' => array(
					'label' => array('Titel', 'Titel einfügen'),
					'inputType' => 'text',
				),
				'description' => array(
					'label' => array('Text', 'Text einfügen'),
					'inputType' => 'textarea',
					'eval' => array('rte' => 'tinyMCE'),
					'sql' => array('type' => 'text', 'notnull' => false),
				),
				

			),
		),
	),
);