Contao-Camp 2024
Ergebnis 1 bis 9 von 9

Thema: Galerie mit 1 Thumbnail

  1. #1
    Contao-Fan Avatar von k-webdesign
    Registriert seit
    07.06.2010.
    Ort
    Karlsruhe
    Beiträge
    644
    Partner-ID
    5911
    User beschenken
    Wunschliste

    Standard Galerie mit 1 Thumbnail

    Hi,

    habt ihr eine Idee, wie ich die Galerie so anpassen kann, dass 1 Thumbnail gezeigt wird und beim Klick darauf kann man per Lightbox/Pfeiltasten die weiteren Bilder anschauen kann. Vermute, das wird über eine Template-Änderung möglich. Hat jemand eventuell eine Vorlage?

    Contao 4-fähig wäre schön

  2. #2
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    6.463
    Partner-ID
    107
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo Kim,

    das könntest du ansehen und testen:
    https://www.marcosimbuerger.ch/conta...e-oeffnen.html
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Contao-Sprechstunde
    Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
    Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki

    Schon wieder ein Update?
    Glücklich sind die, die den Wert erkennen – und wertschätzen.
    „Muss man machen wie beim Zahnarzt. Der bestraft einen auch mit hohen Rechnungen wenn man die Pflege vernachlässigt.”

  3. #3
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.292
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Im Grunde geht das auch mit einer Galerie und für die dann eine Klasse (damit man auch noch 'normale' Galerien haben kann).
    Grundlage ist recht einfach: Per CSS alle Bilder verstecken (nur das erste nicht) fertig xD
    Etwas mehr Arbeit im Template: Wenn die Galerie diese Klasse hat, dann Bilder ausgeben und bei allen Bildern (bis auf dem ersten) nen display: none (oder per Klasse).
    Sollte dann auch klappen ;-)

    Ich meine irgendwo gab es dazu auch mal nen Tutorial.. finde das gerade allerdings nicht (und das was ich dazu vor ewigkeiten mal gemacht habe find ich auch gerade nicht mehr.. ich glaub das Projekt gibts schon gar nicht mehr *g*).

    Viele Grüße

    Edit: Hab mal was rausgesucht:
    https://de.contaowiki.org/Galerie_mi...m_Vorschaubild
    https://contao.ninja/bildergalerie-tipps.html
    Geändert von MacKP (29.11.2017 um 21:07 Uhr)
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  4. #4
    Contao-Urgestein Avatar von cliffparnitzky
    Registriert seit
    08.10.2010.
    Ort
    Lüneburg
    Beiträge
    2.446
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ich bin auch der Meinung, dass CSS die schnellste, einfachste und vermutlich sogar beste Variante ist.

    Ich glaube zu wissen, dass die Bilder beim Einfügen in den DOM von der Lightbox initial übernommen werden. D.h. sie müssen zwangsläufig erstmal rein, wenn man beim Klicken nicht mit JavaScript was dazu frickeln will.

    Am Einfachsten wäre es alle Bilder außer das erste per CSS einfach auszublenden .... z.B. so:

    HTML-Code:
    ce_gallery li:not(:first-child) {display: none;}
    Gruß, Cliff

  5. #5
    Contao-Fan Avatar von rusty
    Registriert seit
    07.02.2012.
    Ort
    Hamburg
    Beiträge
    264

    Standard Galerie mit 1 Thumbnail

    Eine 1-Vorschaubild-Galerie brauchte ich gestern auch. Da ich keine unnötigen Vorschaubilder ausgeben wollte, habe ich im gallery_default Template in der verschachtelten PHP-Schleife eine Zählvariable mitlaufen lassen. Nur bei Bild Nummer 1 wird noch alles vollständig ausgegeben, bei allen folgenden Galeriebildern gebe ich nur noch einen Link ohne Inhalt aus. Funktioniert gut.
    Das Template habe ich natürlich umbenannt, so dass man in den Template-Einstellungen der Galerie auch noch die Standardvariante zur Verfügung hat.
    Geändert von rusty (30.11.2017 um 08:09 Uhr)

  6. #6
    Contao-Nutzer Avatar von gracilis
    Registriert seit
    19.06.2009.
    Ort
    Rostock
    Beiträge
    180

    Standard

    Hallo, altes Thema, aber ich mache das wie bei foundation mit dem 'featured image',
    also css, alles ausblenden und das erste (first-child) einblenden, geht schnell und gut, ohne Hacks.
    .per.aspera.ad.astra.

  7. #7
    Contao-Nutzer Avatar von Twitt
    Registriert seit
    02.03.2014.
    Ort
    Schweiz
    Beiträge
    143
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von cliffparnitzky Beitrag anzeigen
    Am Einfachsten wäre es alle Bilder außer das erste per CSS einfach auszublenden .... z.B. so:
    HTML-Code:
    ce_gallery li:not(:first-child) {display: none;}
    Gruß, Cliff
    Hallo Cliff

    Schon eine Weile her aber dein Tipp hat mir gerade sehr geholfen.
    Herzlichen Dank dafür.

    Liebe Grüsse aus der Schweiz.
    --
    Grüsse aus der Schweiz
    Twitt

    GLAMOUR DOGS - Lieblingsschnauzen mit Charakter (made with contao)

  8. #8
    Contao-Fan Avatar von Nightwing
    Registriert seit
    29.05.2013.
    Beiträge
    436

    Standard

    Zitat Zitat von rusty Beitrag anzeigen
    Eine 1-Vorschaubild-Galerie brauchte ich gestern auch. Da ich keine unnötigen Vorschaubilder ausgeben wollte, habe ich im gallery_default Template in der verschachtelten PHP-Schleife eine Zählvariable mitlaufen lassen. Nur bei Bild Nummer 1 wird noch alles vollständig ausgegeben, bei allen folgenden Galeriebildern gebe ich nur noch einen Link ohne Inhalt aus. Funktioniert gut.
    Das Template habe ich natürlich umbenannt, so dass man in den Template-Einstellungen der Galerie auch noch die Standardvariante zur Verfügung hat.
    Danke, da bin ich heut mittag zufällig drübergestolpert, und habs mit diesem Code vollbracht. (Version 4.9.8) Schöne Idee!

    Im Template selbst hab ich dazu noch via Flexbox gezaubert, sodass eine Überschrift, kurze Beschreibung des Albums und Anzahl der Bilder rechts daneben ausgegeben wird:
    Mein Problem wäre "nur" noch: woher und wie bekomme ich die Überschrift der Galerie von links nach rechts oben hin? CSS?
    Per DCA ein Feld für die Beschreibung generieren dürfte eher weniger das Problem sein, die Bilderanzahl hab ich schon mit einem Counter erfasst.
    Hier mal ein Bild zur Veranschaulichung und Template + CSS dazu:

    1.PNG

    gallery_single_image_flex.html5:
    PHP-Code:
    <div class="gallery_flex_container">
      <div class="gallery_flex_parts">
        <ul class="cols_<?= $this->perRow ?>" itemscope itemtype="http://schema.org/ImageGallery">
          <?php $i 1$count 0; foreach ($this->body as $class => $row): ?>
            <?php $count++; foreach ($row as $col): ?>
              <?php if ($col->addImage): ?>
                <?php if ($i == 1): ?>
                  <li class="<?= $class ?> <?= $col->class ?>">
                  <figure class="image_container"<?php if ($col->margin): ?> style="<?= $col->margin ?>"<?php endif; ?>><?php endif; ?>    
                    <?php if ($col->href): ?>
                      <a href="<?= $col->href ?>"<?= $col->attributes ?><?php if ($col->linkTitle): ?> title="<?= $col->linkTitle ?>" alt="<?= $col->alt ?>"<?php endif; ?>><?php if ($i == 1): ?><?php $this->insert('picture_default'$col->picture); ?><?php endif; ?></a>
                    <?php endif; ?>
                    <?php if ($i == 1): ?>
                  </figure>
                  </li>
                <?php endif; ?>
              <?php endif; ?>
            <?php $i++; endforeach; ?>
          <?php endforeach; ?>
        </ul>
      </div>
      <div class="gallery_flex_parts">
        <h2>Überschrift</h2>
        <p>Albumbeschreibung</p>
        <p class="info"><?= $count?> Bilder</p>
      </div>
    </div>
    gallery_single_image_flex.css:
    Code:
    /* Bildergalerie ein Vorschaubild in Flexbox */
    .gallery_flex_container {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
    }
    
    .gallery_flex_container > div {
      flex: 0 40%;
      align-self: flex-start;
    }
    
    .gallery_flex_parts,
    .gallery_flex_parts li {
      width: 100%;
      list-style-type: none;
    }
    Hat mir jemand eine Idee zu meiner Frage? Wär subber

    ToM

  9. #9
    Contao-Fan Avatar von Nightwing
    Registriert seit
    29.05.2013.
    Beiträge
    436

    Standard

    Nachtrag: war nicht ganz einfach, aber ich habs hinbekommen
    Ganz herzlichen Dank an Spooky für die neue Dokumentation!!!

    templates/gallery_single_image_flex.html5:
    HTML-Code:
    <div class="gallery_flex_container">
      <div class="gallery_flex_part_left">
        <ul class="cols_<?= $this->perRow ?>" itemscope itemtype="http://schema.org/ImageGallery">
          <?php $count = 0; foreach ($this->body as $class => $row): ?>
            <?php foreach ($row as $col): ?>
              <?php if ($count == 0): ?>        
                <?php if ($col->addImage): ?>
                  <li class="<?= $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="<?= $this->headline ?>" alt="<?= $col->alt ?>"<?php $this->insert('picture_default', $col->picture); ?></a>
                      <?php endif; ?>
                    </figure>
                  </li>
                <?php endif; ?>
              <?php else: ?>
                <?php if ($col->addImage): ?>
                  <li class="<?= $class ?> <?= $col->class ?>" style="display:none;">
                    <figure class="image_container"<?php if ($col->margin): ?> style="<?= $col->margin ?>"<?php endif; ?>>
                      <?php if ($col->href): ?>
                        <a href="<?= $col->href ?>"<?= $col->attributes ?><?php if ($col->linkTitle): ?> title="<?= $col->linkTitle ?>" alt="<?= $col->alt ?>"<?php endif; ?>><?php $this->insert('picture_default', $col->picture); ?></a>
                      <?php endif; ?>
                    </figure>
                  </li>
                <?php endif; ?>
              <?php endif; ?>
            <?php $count++; endforeach; ?>
          <?php endforeach; ?>
        </ul>
      </div>
      <div class="gallery_flex_part_right">
        <h2><?= $this->headline ?></h2>
        <!--    <a href="<?= $col->href ?>"<?= $col->attributes ?> title="<?= $this->headline ?>" alt="<?= $col->alt ?>"><h2><?= $this->headline ?></h2></a>    -->
        <p><?= $this->galry_txt ?></p>
        <p class="info"><?= $count; ?> <?php if ($count == 0): ?> Bild <?php else: ?> Bilder <?php endif; ?></p>
      </div>
    </div>
    files/layout/css/gallery_single_image_flex.css:
    Code:
    /* Bildergalerie ein Vorschaubild in Flexbox */
    .ce_gallery.block > h2 {
        display: none;
    }
    
    .gallery_flex_container {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: flex-start;
    }
    
    .gallery_flex_container > div {
        flex: 0 50%;
    }
    
    .gallery_flex_part_left li {
        list-style-type: none;
    }
    
    .gallery_flex_part_left {
        align-self: center;
    }
    
    .gallery_flex_part_right {
        align-self: flex-start;
    }
    contao/dca/tl_content.php:
    PHP-Code:
    <?php

    // Galerie Feld zur Beschreibung vom Album 
    use Contao\CoreBundle\DataContainer\PaletteManipulator;
    $GLOBALS['TL_DCA']['tl_content']['fields']['galry_txt'] = [
        
    'label'                     => &$GLOBALS['TL_LANG']['tl_content']['galry_txt'],
        
    'exclude'                     => true,
        
    'search'                     => true,
        
    'inputType'                 => 'text',
        
    'eval'                         => array('maxlength'=>255'tl_class'=>'w50'),
        
    'sql'                         => "varchar(255) NOT NULL default ''",
    ];
    PaletteManipulator::create()
        ->
    addLegend('galry_txt''headline'PaletteManipulator::POSITION_AFTER)
        ->
    addField('galry_txt''headline'PaletteManipulator::POSITION_AFTER)
        ->
    applyToPalette('gallery''tl_content')
    ;
    contao/languages/de/tl_content.php:
    PHP-Code:
    <?php

    // Galerie Feld zur Beschreibung vom Album
    $GLOBALS['TL_LANG']['tl_content']['galry_txt'] = ['Beschreibung','Hier können Sie dem Inhaltselement eine Beschreibung hinzufügen.'];
    Ergebnis:
    Unbenannt.PNG

    Das man natürlich nach Leeren des Caches auch noch das Installtool aufrufen sollte, wurde mir dann auch irgendwann mal bewusst...
    Kleine Kosmetik am Rande wird noch passieren müssen: die Überschrift möchte genauso klickbar sein, wie das Bild auch und die Links sollten dann gleich sein.
    Zudem stimmt die Anzahl der Bilder, aber zur Lightbox etc übergibt er eins weiter?!?

    ToM
    Geändert von Nightwing (21.10.2020 um 23:43 Uhr)

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
  •