Colorbox, auch Bilder in der Großansicht responsive ausgeben

Hallo zusammen,
ich komme nicht weiter und frage daher hier um Hilfe, mein Problem:

Ich verwende die Colorbox innerhalb einer responsiven Site unter Contao 3.5.12. Die Galerie Vorschaubilder werden durch die Verwendung von Media Queries bei den Bildgrössen passend ausgegeben (datenvolumenfreundlich klein gerechnete Vorschaubilder für mobile Geräte, höher aufgelöste, größere Vorschaubilder für Desktop-Geräte), das funktioniert wunderbar.

Für die Großansicht wird jedoch geräteunabhängig immer die Auflösung der Ursprungsdatei verwendet, für Desktop-Geräte ist das sehr schön, für die Darstellung auf einem Smartphone, insbesondere im Portrait-Mode reicht eine viel kleinere Auflösung, hier wird nur unnötig Datenvolumen verbraucht.

Gibt es irgendwie einen Weg kleinere Bilder in der Großansicht zeigen? Danke für Tipps und Hinweise.

Wie groß sind die Bilder denn tatsächlich bspw.?

@Spooky,
Danke für die Nachfrage, die Ursprungsbilder haben eine Größe von 2000 x 1500 Pixel. Sie werden im Layout in voller Bildschirmbreite und in Galerien verwendet. So ist die Darstellung auch auf Desktop-Geräten mit einer Auflösung von 1920 und mehr Pixeln im Layout ziemlich gut. Über eine passende JPG-Kompression versuche ich die Dateigrösse möglichst gering zu halten, komme wegen des großen Detailreichtums im Schnitt jedoch immer noch auf über 1MB pro Bild. Insgesamt 20 Galerien haben jeweils zwischen 12 und 30 Bilder.

Was du machen könntest:

• bspw. bei Galerien ein zusätzliches <figure> für jedes Galerie Element ausgeben, wo du ein entsprechendes Responsive Image Set ausgeben lässt.
• Dieses zusätzliche <figure> Element versteckst du und fügst eine automatische ID hinzu.
• Den Detail Link änderst du auf #ID - somit sollte die colorbox automatisch das entsprechende <figure> anzeigen.

Wow, klingt ziemlich clever, ich schaue mal, ob ich das so hinkriege und melde ich mich dann hier, herzlichen Dank schon mal!

Jetzt stehe ich schon vor einem Problem dass ich ja jedem Bild dann zwei Bildgrößen zuweisen muss, eine für die responsive Ausgabe als Vorschaubild, die zweite für die responsive Ausgabe der Großansicht; wie wäre das zu lösen?

Du legst dir im Backend eine entsprechende Bildgrößeneinstellung an und im Template machst du dann bspw. folgendes:

PHP-Code:

---

<?php \Controller::addImageToTemplate($this, array(
        'singleSRC' => $col->singleSRC, 
        'size' => 1 /* das ist die ID deiner Bildgrößeneinstellung */
)) ?>
<figure>
    <?= $this->insert('picture_default', $this->picture); ?>
</figure>

---

Mit dem Einverständnis von Spooky poste ich hier die Lösung die er in meinem Auftrag entwickelt hat, vielleicht kann der/die ein oder andere diese Lösung auch gebrauchen.

Das Galerie Template:

PHP-Code:

---

<ul class="cols_<?= $this->perRow ?> inline"> 
  <?php $i = 0; ?> 
  <?php foreach ($this->body as $class=>$row): ?> 
    <?php foreach ($row as $col): ?> 
      <?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="#g<?= $this->id ?><?= $i ?>"<?= $col->attributes ?> title="<?= $col->alt ?>"><?php $this->insert('picture_default', $col->picture); ?></a> 
            <?php else: ?> 
              <?php $this->insert('picture_default', $col->picture); ?> 
            <?php endif; ?> 
            <?php if ($col->caption): ?> 
              <figcaption class="caption"><?= $col->caption ?></figcaption> 
            <?php endif; ?> 
          </figure> 
          <div style="display:none"> 
            <?php \Controller::addImageToTemplate($this, array( 
                'singleSRC' => $col->singleSRC,  
                'size' => 3 /* insert tl_image_size ID here */ 
            )) ?> 
            <figure id="g<?= $this->id ?><?= $i ?>" class="fullsize"> 
              <?= $this->insert('picture_default', $this->picture); ?> 
            </figure> 
          </div> 
        </li> 
        <?php ++$i; ?> 
      <?php endif; ?> 
    <?php endforeach; ?> 
  <?php endforeach; ?> 
</ul>

---

Das j_colorbox Template:

PHP-Code:

---

<?php 

// Add the colorbox style sheet 
$GLOBALS['TL_CSS'][] = 'assets/jquery/colorbox/'. $GLOBALS['TL_ASSETS']['COLORBOX'] .'/css/colorbox.min.css|static'; 

?> 

<script src="<?= TL_ASSETS_URL ?>assets/jquery/colorbox/<?= $GLOBALS['TL_ASSETS']['COLORBOX'] ?>/js/colorbox.min.js"></script> 
<script> 
  (function($) { 
    $(document).ready(function() { 
      $('a[data-lightbox]').map(function() { 
        $(this).colorbox({ 
          // Put custom options here 
          loop: false, 
          rel: $(this).attr('data-lightbox'), 
          maxWidth: '95%', 
          maxHeight: '95%' 
        }); 
      }); 
      $('.ce_gallery ul.inline a[data-lightbox]').map(function() { 
        $(this).colorbox({ 
          // Put custom options here 
          transition: 'none', 
          loop: false, 
          rel: $(this).attr('data-lightbox'), 
          maxWidth: '95%', 
          maxHeight: '95%', 
          inline: true, 
          scrolling: false 
        }); 
      }); 
    }); 
    $(document).bind('cbox_complete', function() { 
      $content = $('#cboxLoadedContent'); 
      $content.children('figure.fullsize').each(function() { 
        $figure = $(this); 
        if($figure.height() > $content.height()) { 
          var newWidth = ($figure.width() / $figure.height()) * $content.height(); 
          $.colorbox.resize({ 
            width: newWidth, 
            height: $content.height() 
          }); 
        } 
      }); 
    }); 
  })(jQuery); 
</script>

---

Wichtig:
Im Backend eine entsprechende Bildgrößeneinstellung anlegen und im Template einbinden.

Wow, das ist großartig!! Genau die Frage beschäftigte mich auch schon. Habe es zwar jetzt noch nicht akut gebraucht, aber das kommt bald.
Daher tausend Dank!!

Wäre ein solcher Umgang mit Bildern durch entsprechende Templates nicht auch was für den Core in Contao 4?