Contao-Camp 2024
Ergebnis 1 bis 5 von 5

Thema: responsive / srcset für background image

  1. #1
    Contao-Nutzer
    Registriert seit
    12.02.2014.
    Beiträge
    192

    Standard responsive / srcset für background image

    Hallo zusammen,

    folgendes Problem: ich habe das Template ce_image dahingehend verändert, das es ein zuätzliches div gibt, welches mit dem angegebenen Bild als Hintergrund-Bild gesetzt wird.

    PHP-Code:
    <div class="headerimage" style="background:url(<?= $this->singleSRC ?>) center 30% no-repeat; background-size:cover">
    Das geht auch fein. Allerdings möchte ich je nach Pixeldichte und Bildschirmgröße die passenden generierten Bilder verwenden. Wie stelle ich das an? Ich weiss, dass die URLs zu den alternativen Bildern im "srcset" abrufbar sind. Gibt es eine Template-Funktion, die mir automatisch je nach Pixeldichte/Skalierunfsfaktor nur die richtige Bild-URL liefert?

    Danke und grüße,
    Misios

  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.879
    Partner-ID
    10107

    Standard

    Von Haus aus geht das mit Hintergrund Bildern nicht. Wenn dann müsstest du das mit JavaScript umsetzen.

  3. #3
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.328
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Das ist leider nicht ganz trival und funktioniert auch nicht überall. Anregung findest Du möglicherweise unter https://css-tricks.com/responsive-images-css/ oder auch unter https://aclaes.com/responsive-backgr...set-and-sizes/.

  4. #4
    Contao-Nutzer
    Registriert seit
    12.02.2014.
    Beiträge
    192

    Standard

    Javascript dachte ich mir schon.

    Hab die Lösung von lucinas Link umgesetzt und es funzt. Zumindest mit kleinen Anpassungen:

    Template "ce_image_header";
    PHP-Code:
    <?php $this->extend('block_searchable'); ?>

    <?php $this->block('content'); ?>
        
      <figure class="image_container"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?>>
      
          <div class="responsive-background-image"><?php $this->insert('picture_default'$this->picture); ?></div>

      </figure>

    <?php $this->endblock(); ?>
    JS im Seitenlayout:

    PHP-Code:
    class ResponsiveBackgroundImage {

        
    constructor(element) {
            
    this.element element;
            
    this.img element.querySelector('img');
            
    this.src '';

            
    this.img.addEventListener('load', () => {
                
    this.update();
            });

            if (
    this.img.complete) {
                
    this.update();
            }
        }

        
    update() {
            
    let src typeof this.img.currentSrc !== 'undefined' this.img.currentSrc this.img.src;
            if (
    this.src !== src) {
                
    this.src src;
                
    this.element.style.backgroundImage 'url("' this.src '")';

            }
        }
    }

    let elements document.querySelectorAll('.responsive-background-image');  
    for (
    let i=0i<elements.lengthi++) {  
      new 
    ResponsiveBackgroundImage(elements[i]);


    CSS:
    HTML-Code:
    .responsive-background-image {
    	background-size: cover;
      	background-position: center center;
      	background-repeat: no-repeat;
      	display: inline-block;
    	width: 100%;
    	height: 700px;
    }
    
    .responsive-background-image img {
      	display: none;
    }

    Vielen Dank für die Hilfe!

    Misios

  5. #5
    Contao-Fan
    Registriert seit
    16.01.2012.
    Beiträge
    414

    Standard

    steh grade for dem gleichen Problem und würd es nur sehr ungern mit javascript lösen. Hat sich da was getan?

    Gibt es keine Möglichkeit die IRGENDWIE so in der richtung funktioniert? (Im Template)

    $GLOBALS['header'] = '<style> blabla </style>';

    Im Body ging es scheinbar ja mal ne Zeitlang mit <style scoped> aber das funktioniert nicht mehr oder? (hab icb jedenfalls nicht hingebracht).
    Geändert von Nacht69 (04.08.2019 um 19:00 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
  •