Ergebnis 1 bis 24 von 24

Thema: RS Custom Elements Bildergalerie

  1. #1
    Contao-Nutzer
    Registriert seit
    25.09.2013.
    Beiträge
    191

    Standard RS Custom Elements Bildergalerie

    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
    Geändert von Bernator (17.08.2023 um 02:19 Uhr)

  2. #2
    Contao-Nutzer Avatar von Black Pirate
    Registriert seit
    10.02.2015.
    Beiträge
    226

    Standard

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

    Hast du den schon was angefangen?

  3. #3
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    9.925
    User beschenken
    Wunschliste

    Standard

    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...

  4. #4
    Contao-Nutzer
    Registriert seit
    25.09.2013.
    Beiträge
    191

    Standard

    Hallo Zonky,

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

    PHP-Code:
    /** 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...

  5. #5
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    7.080
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Vielleicht hilft Dir der Forenbeitrag weiter
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  6. #6
    Contao-Nutzer Avatar von Black Pirate
    Registriert seit
    10.02.2015.
    Beiträge
    226

    Standard

    Ich würde es in etwa so machen:

    Code:
    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
    Geändert von Black Pirate (16.08.2023 um 13:10 Uhr)

  7. #7
    Contao-Nutzer
    Registriert seit
    25.09.2013.
    Beiträge
    191

    Standard @Black Pirate

    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.

  8. #8
    Contao-Nutzer Avatar von Black Pirate
    Registriert seit
    10.02.2015.
    Beiträge
    226

    Standard

    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:
    Code:
    <<?php echo $this->hl ?>>
        <?php echo $this->headline ?>
    </<?php echo $this->hl ?>>

  9. #9
    Contao-Nutzer
    Registriert seit
    25.09.2013.
    Beiträge
    191

    Standard

    Stimmt... das probiere ich aus.

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

    PHP-Code:
        <?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?

  10. #10
    Contao-Nutzer Avatar von Black Pirate
    Registriert seit
    10.02.2015.
    Beiträge
    226

    Standard

    versuch mal dies zu ändern

    Code:
    <?php if ($image = $this->arrData['getImageObject']($item->mainimage)): ?>
    und
    Code:
    <?php if ($image = $this->arrData['getImageObject']($item->images)): ?>
    Weil du hast deine Variable "item" benannt

  11. #11
    Contao-Nutzer Avatar von Black Pirate
    Registriert seit
    10.02.2015.
    Beiträge
    226

    Standard

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

    Code:
    <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.

  12. #12
    Contao-Nutzer
    Registriert seit
    25.09.2013.
    Beiträge
    191

    Standard

    Dann habe ich einen Fehler:

    Code:
    [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)"} []

  13. #13
    Contao-Nutzer
    Registriert seit
    25.09.2013.
    Beiträge
    191

    Standard

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

    Die Bilder als Galerie bekomme ich einfach nicht angezeigt:

    PHP-Code:
        <?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?

  14. #14
    Contao-Nutzer
    Registriert seit
    25.09.2013.
    Beiträge
    191

    Standard

    So geht es auch nicht:

    PHP-Code:
    <?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 ?>

  15. #15
    Contao-Nutzer Avatar von Black Pirate
    Registriert seit
    10.02.2015.
    Beiträge
    226

    Standard

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

  16. #16
    Contao-Nutzer
    Registriert seit
    25.09.2013.
    Beiträge
    191

    Standard

    Mit 4.13

  17. #17
    Contao-Nutzer Avatar von Black Pirate
    Registriert seit
    10.02.2015.
    Beiträge
    226

    Standard

    Ok, here we go...

    config:
    Code:
    <?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:
    Code:
    <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

  18. #18
    Contao-Nutzer
    Registriert seit
    25.09.2013.
    Beiträge
    191

    Standard

    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.

  19. #19
    Contao-Nutzer Avatar von Black Pirate
    Registriert seit
    10.02.2015.
    Beiträge
    226

    Standard

    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

  20. #20
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    7.080
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Moderation: Habe den Thread verschoben, da er nicht (mehr) in die Rubrik Kleinaufträge passt.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  21. #21
    Contao-Nutzer
    Registriert seit
    25.09.2013.
    Beiträge
    191

    Standard

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

  22. #22
    Contao-Nutzer
    Registriert seit
    25.09.2013.
    Beiträge
    191

    Standard

    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

  23. #23
    Contao-Nutzer
    Registriert seit
    25.09.2013.
    Beiträge
    191

    Standard

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

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

  24. #24
    Contao-Nutzer Avatar von Black Pirate
    Registriert seit
    10.02.2015.
    Beiträge
    226

    Standard

    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:

    Code:
    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),
    				),
    				
    
    			),
    		),
    	),
    );

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •