Contao-Camp 2024
Ergebnis 1 bis 17 von 17

Thema: Großansicht der Galeriebilder

  1. #1
    Contao-Fan
    Registriert seit
    27.11.2009.
    Ort
    Bremen
    Beiträge
    463

    Standard Großansicht der Galeriebilder

    Ich habe mit RSCE eine Galerie im Template eingebaut:
    HTML-Code:
    	<div ce_gallery block">	
    		<ul class="cols_3" itemscope itemtype="http://schema.org/ImageGallery">
    		<?php $dataSorted = array_map('\StringUtil::binToUuid', deserialize($this->orderSRC, true)); 
    		foreach ( $dataSorted as $data ) {
    		    if ($image = $this->getImageObject($data, array('','', 22))): ?>
    		        <li><?php $this->insert('picture_default', $image->picture);?></li>
    		    <?php endif; 
    		} ?>
    		</ul>
    	</div>
    Gibt es eine Möglichkeit, im Frontend die Großansicht eines Bildes per Klick auf das Vorschaubild aufzurufen?

  2. #2
    Contao-Fan Avatar von Ainschy
    Registriert seit
    24.06.2009.
    Ort
    Wenden
    Beiträge
    793
    Partner-ID
    5666
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ja, schau dir das HTML eines Bilds mit aktivierter Lightbox an, dann siehst du was du dem Template noch mit auf dem Weg geben musst.

  3. #3
    Contao-Fan
    Registriert seit
    27.11.2009.
    Ort
    Bremen
    Beiträge
    463

    Standard

    Hm, z. B. data-lightbox="lb693". Allerdings hilft mir das mit meinen weniger als rudimentären php-Kenntnissen nicht wirklich weiter ... Kannst Du mir vielleicht etwas konkreter helfen?

  4. #4
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo,

    schau dir aus dem Contao Core die gallery_default.html5 an, wie diese aufgebaut ist und baue dein rsce_meintemplate.html5 dementsprechend nach.
    Die Lightbox wird durch das data-lightbox angesprochen.

    data-lightbox="???" fragt nur eine eindeutige Bezeichnung ab, damit sie auch als Gallery dargestellt werden kann. Hier kannst du dann z.B. die ID des Inhaltselementes abfragen und einsetzen, oder aber du fügst noch ein zusätzliches Feld ein, wo der Redakteur das Feld selbst befüllen kann.

    z.B
    PHP-Code:
    data-lightbox="<?= $this->id ?>"
    Grüsse
    Bernhard


  5. #5
    Contao-Fan
    Registriert seit
    27.11.2009.
    Ort
    Bremen
    Beiträge
    463

    Standard

    Zitat Zitat von derRenner Beitrag anzeigen
    Hallo,

    schau dir aus dem Contao Core die gallery_default.html5 an, wie diese aufgebaut ist und baue dein rsce_meintemplate.html5 dementsprechend nach.

    Das habe ich versucht und bin leider überhaupt nicht weitergekommen ...

    Ich nehme an, dass ich in der rsce-Konfigurationdatei dem Array noch irgendwie die URL des Bildes hinzufügen muss, oder?
    Code:
    'multiSRC' => 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' => 'standardField', 
         'eval' => array( 
                'tl_class' => 'clr', 
                'isGallery' => true, 
                'multiple' => true, 
                'fieldType' => 'checkbox', 
                'orderField' => 'orderSRC', 
                'files' => true, 
                'mandatory' => true, 
                'extensions' => \Config::get('validImageTypes') 
          ),    
    )
    Weil
    HTML-Code:
    <a href="<?= $col->href ?>">
    im Template liefert mir leider kein Ergebnis.

    So sieht das Template an der Stelle im Moment aus:

    HTML-Code:
    	<div class="col-md-8 order-md-2 ce_gallery block">	
    		<ul class="cols_3" itemscope itemtype="http://schema.org/ImageGallery">
    		<?php $dataSorted = array_map('\StringUtil::binToUuid', deserialize($this->orderSRC, true)); 
    		foreach ( $dataSorted as $data ) {
    		    if ($col = $this->getImageObject($data, array('','', 22))): ?>
    		        <li><a href="<?= $col->href ?>" class="cboxElement" data-lightbox="<?= $this->id ?>" <?= $col->attributes ?><?php if ($col->linkTitle): ?> title="<?= $col->linkTitle ?>"<?php endif; ?>><?php $this->insert('picture_default', $col->picture); ?></a></li>
    		    <?php endif; 
    		} ?>
    		</ul>
    	</div>

  6. #6
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    du fragst in der foreach-Schleife $col ab, aber hast ein $data deklariert
    PHP-Code:
    foreach ( $dataSorted as $data ) {
                if (
    $col 
    Grüsse
    Bernhard


  7. #7
    Contao-Fan
    Registriert seit
    27.11.2009.
    Ort
    Bremen
    Beiträge
    463

    Standard

    Danke für den Tipp :-)

    So funktioniert es aber leider auch nicht:

    HTML-Code:
    	<div class="col-md-8 order-md-2 ce_gallery block">	
    		<ul class="cols_3" itemscope itemtype="http://schema.org/ImageGallery">
    		<?php $dataSorted = array_map('\StringUtil::binToUuid', deserialize($this->orderSRC, true)); 
    		foreach ( $dataSorted as $col ) {
    		    if ($col = $this->getImageObject($col, array('','', 22))): ?>
    		        <li><a href="<?= $col->href ?>" class="cboxElement" data-lightbox="<?= $col->id ?>" <?= $col->attributes ?><?php if ($col->linkTitle): ?> title="<?= $col->linkTitle ?>"<?php endif; ?>><?php $this->insert('picture_default', $col->picture); ?></a></li>
    		    <?php endif; 
    		} ?>
    		</ul>
    	</div>

  8. #8
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    auch die foreach-Schleife ist nicht zu.
    Wie erwähnt, schau dir mal das default_gallery.html5 an
    Grüsse
    Bernhard


  9. #9
    Contao-Fan
    Registriert seit
    27.11.2009.
    Ort
    Bremen
    Beiträge
    463

    Standard

    Zitat Zitat von derRenner Beitrag anzeigen
    auch die foreach-Schleife ist nicht zu.
    Hm, doch, die ist meines Wissens zu:

    Code:
    } ?>
    Direkt vor dem schließenden </ul>

    Wie gesagt: ich kann kein php, daher wäre es nett, wenn ich einen konkreten Tipp bekommen könnte. Die default_gallery.html5 habe ich mir schon gefühlte 50x angeguckt und komme trotzdem nicht weiter. Sorry ...

    Die Anzeige der Galerie funktioniert einwandfrei. Nur wird das Bild beim Öffnen der Lightbox nicht geladen, weil die URL zum Bild schlicht fehlt. Die Ausgabe sieht - verkürzt - so aus:

    HTML-Code:
    <a href="" class="cboxElement" data-lightbox="769">
       <picture >
          <source srcset="assets/images/d/712134_Loop_06-c7171382.jpg" media="(max-width: 549px)">
          <source srcset="assets/images/5/712134_Loop_06-49e62e1c.jpg" media="(max-width: 767px)">
          <source srcset="assets/images/3/712134_Loop_06-d0acfe7f.jpg" media="(min-width: 768px)">
          <img src="assets/images/4/712134_Loop_06-5211afe6.jpg" alt="" loading="lazy" itemprop="image" width="800" height="600">
       </picture>
    </a>
    Geändert von Lufine (15.02.2021 um 19:01 Uhr)

  10. #10
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Wenn du dir die Variablen im Frontend ausgeben lässt, dann findes du wohl auch 'href' nicht ... <?= $col->href ?> wird nicht aufgelöst, weil 'href' bei dir möglicherweise nicht abgefragt wird, nicht vorhanden ist.

    Umgehe dies, indem du den Bildlink direkt abfragst. Hier ein Beispiel - die Variablen musst du durch deine aber ersetzen
    PHP-Code:
    <a class="overlay-trigger-icon bg-light text-dark" href="<?php if (null !== ($objFile Contao\FilesModel::findByUuid($portfolio->backgroundimage))): $imagePath $objFile->path; echo $imagePath; endif; ?>" data-lightbox="<?php echo 'lightbx' $count++; ?>>"></a>
    Grüsse
    Bernhard


  11. #11
    Contao-Fan
    Registriert seit
    27.11.2009.
    Ort
    Bremen
    Beiträge
    463

    Standard

    Sorry, aber das hilft mir ohne PHP-Kenntisse leider überhaupt nicht weiter ...

  12. #12
    Contao-Fan Avatar von Ainschy
    Registriert seit
    24.06.2009.
    Ort
    Wenden
    Beiträge
    793
    Partner-ID
    5666
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Lufine Beitrag anzeigen
    Sorry, aber das hilft mir ohne PHP-Kenntisse leider überhaupt nicht weiter ...
    Dafür gibts hier im Forum die Rubrik Kleinaufträge: https://community.contao.org/de/foru...Auftr%C3%A4ge)

  13. #13
    Contao-Fan
    Registriert seit
    27.11.2009.
    Ort
    Bremen
    Beiträge
    463

    Standard

    Leider möchte anscheinend niemand diesen Auftrag haben ... (https://community.contao.org/de/show...351#post540351)

    Könnt Ihr mir nicht vielleicht doch an dieser Stelle mit einem konkreten Codeschnipsel weiterhelfen?

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

    Support Contao

    Standard

    Mal eine Frage am Rand. Mir ist nicht ganz klar was Deine eigene Galerie anderes erreicht als das die Standardgalerie tut.
    Wahrscheinlich habe ich etwas entscheidendes übersehen.
    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.




  15. #15
    Contao-Fan
    Registriert seit
    27.11.2009.
    Ort
    Bremen
    Beiträge
    463

    Standard

    Zitat Zitat von mlweb Beitrag anzeigen
    Mal eine Frage am Rand. Mir ist nicht ganz klar was Deine eigene Galerie anderes erreicht als das die Standardgalerie tut.
    Wahrscheinlich habe ich etwas entscheidendes übersehen.
    Die Bilder in der Galerie werden von den Redakteur*innen neben noch ein paar anderen Text-Elementen über ein eigenes Inhaltselement 'Projektinformationen' eingefügt.

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

    Support Contao

    Standard

    Vielleicht hat sich keiner auf den Auftrag gemeldet, weil Du die kompletten Angaben für einen Kleinauftrag nicht gemacht hast. https://community.contao.org/de/show...3%B6ffentlicht

    Aber egal: Ich habe etwas recherchiert und folgende Codeschnipsel im Forum von Rocksolid gefunden https://help.rocksolidthemes.com/dis...customelements

    Falls Du damit nicht zurecht kommst, kannst Du Dich gern direkt bei mir melden, dann würde ich das als Kleinauftrag übernehmen.
    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.




  17. #17
    Contao-Fan
    Registriert seit
    27.11.2009.
    Ort
    Bremen
    Beiträge
    463

    Standard

    Nochmal einen Dank an Maren für diese Lösung:

    rsce_projekt.html mit Figure:
    HTML-Code:
        <div class="col-md-8 order-md-2 ce_gallery block">
            <ul class="cols_3" itemscope itemtype="http://schema.org/ImageGallery">
                <?php $dataSorted = array_map('\StringUtil::binToUuid', deserialize($this->orderSRC, true));
                foreach ($dataSorted as $data) { ?>
                    <li>
                        <?php if ($image =
                            $this->getImageObject($data, array('', '', 22), null, null, ['fullsize' => '1'])): ?> <!-- 22 ist die ID der verwendeten Bildgroesse -->
                            <?php $this->insert('image', (array) $image); ?>
                        <?php endif ?>
                    </li>
                <?php } ?>
            </ul>
        </div>
    rsce_projekt.html ohne Figure:
    HTML-Code:
        <div class="col-md-8 order-md-2 ce_gallery block">
            <ul class="cols_3" itemscope itemtype="http://schema.org/ImageGallery">
                <?php $dataSorted = array_map('\StringUtil::binToUuid', deserialize($this->orderSRC, true));
                foreach ($dataSorted as $data) { ?>
                    <li>
                        <?php if ($image =
                            $this->getImageObject($data, array('', '', 22), null, null, ['fullsize' => '1'])): ?> <!-- 22 ist die ID der verwendeten Bildgroesse -->
                            <a data-lightbox="<?= $this->id ?>"
                               href="<?= $image->href ?>">
                                <?php $this->insert('picture_default', $image->picture); ?>
                            </a>
                        <?php endif; ?>
                    </li>
                <?php } ?>
            </ul>
        </div>
    Die dazugehörige rsce_projekt_config.php:
    PHP-Code:
    <?php
    return array(
        
    'label' => array('Projektinformationen',''),
        
    'types' => array('content'),
        
    'contentCategory' => 'texts',
        
    'moduleCategory' => 'miscellaneous',
        
    'standardFields' => array('cssID'),
        
    'fields' => array(
                
    'multiSRC' => 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' => 'standardField'
                        
    'eval' => array( 'tl_class' => 'clr''isGallery' => true'multiple' => true'fieldType' => 'checkbox''orderField' => 'orderSRC''files' => true'mandatory' => true'extensions' => \Config::get('validImageTypes') ),    
                       ),
        ),
    );

Aktive Benutzer

Aktive Benutzer

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

Lesezeichen

Lesezeichen

Berechtigungen

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