Bildgrössen bei Background-Darstellung

ghost commented 5 years ago

Hallo

So wie es scheint, werden definitierte Bildgrössen nicht berücksichtigt, wenn die Darstellung als Background-Image gewählt wird. Bei der Einbindung als normales Bild hingegen schon. Ist das nicht möglich oder hat man es vergessen (kein Vorwurf :-)), dies dort auch zu berücksichtigen?

Thx

aschempp commented 5 years ago

das wird nicht möglich sein, dazu müsstest du selber CSS schreiben.

ghost commented 5 years ago

Hallo Andreas

Danke dir für die Rückmeldung. Habe es jetzt im Template 'mod_background_image' mal so ergänzt und es funktioniert. Denke, für meine Zwecke passt das.

<style>
html {
  background: url("<?php echo specialchars($this->src); ?>") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%; //Korrektur gegenüber Standardtemplate, da sonst Mobile-Darstellung nicht korrekt.
}
<?php 
if($this->picture['sources']):
  foreach($this->picture['sources'] as $value):
?>
@media screen and <?= $value['media'] ?> {
  html {
    background-image: url("<?= $value['src'] ?>");
  }
}
<?php
  endforeach;
endif;
?>
</style>

aschempp commented 5 years ago

Danke für die Rückmeldung. Ich dachte nicht dass das so einfach ist, so können wir das bestimmt gut übernehmen 🙃

ghost commented 5 years ago

Coole Sache! Aber bitte noch mal kritisch reviewen ;-). Ich bin so ein Quick-and-Dirty-Coder!

aschempp commented 5 years ago

Mach ich, aber lass doch das Ticket offen damit es nicht vergessen geht 😂

ghost commented 5 years ago

Oh 😁! Sorry. Reflex!

albirs commented 3 years ago

bei Verwendung des mod_pageimage_background.html5 wird der Wert "-webkit-min-device-pixel-ratio" mit ausgegeben ("../contao-pageimage/src/Controller/PageimageController.php" zeile 132).

Auch wenn ich bei den Bildgrößen (Themes > Bildgrößen) bei den Media-Querys keine Pixeldichte angebe, wird "-webkit-min-device-pixel-ratio" IMMER ausgegeben ...(?) ähnlich wie hier:

@media screen and (max-width: 2600px) and (-webkit-min-device-pixel-ratio: 2560w), screen and (max-width: 2600px) and (min-resolution: 2560wdppx) { html { background-image: url("assets/images/../****.jpg"); } }

Diese Angabe macht in meinem Szenario die kompletten @media Anweisung unbrauchbar und haben somit keine Auswirkungen mehr. Auch wird diese explizit als non-standard bei https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio deklariert

Wieso ist diese zusätzliche Angabe enthalten?

Ich habe die Ausgabe über eine eigene Schleife gelöst (ähnlich @DanEi75) wo die "-webkit-min-device-pixel-ratio" nicht mit ausgegeben wird und es funktioniert einwandfrei.

albirs commented 1 month ago

Contao 5.3.12

https://github.com/terminal42/contao-pageimage/blob/main/contao/templates/mod_pageimage_background.html5 funktioniert bei mir nicht in dieser Version, es werden keine Bildgrößen ausgegeben. Nur mit angepassten Code aus https://github.com/terminal42/contao-pageimage/issues/40#issuecomment-503944785 (weiter oben) funktioniert es:


<style>
    html {
        background-image: url("<?= \Contao\StringUtil::specialchars($this->src) ?>");
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
        background-size: cover;
    }
    <?php foreach ($this->picture['sources'] as $mediaQuery): ?>
    @media <?= $mediaQuery['media'] ?> {
        html {
            background-image: url("<?= \Contao\StringUtil::specialchars($mediaQuery['src']) ?>");
        }
    }
    <?php endforeach ?>
</style>
<?php $GLOBALS['TL_HEAD'][] = ob_get_clean() ?>

terminal42 / contao-pageimage

Bildgrössen bei Background-Darstellung #40