contao-pageimage

Hallo
Ich habe die terminal42/contao-pageimage im Einsatz, ich weiss das in der Regel das Background Image auf Smartphones/Mobile Devices nicht fixiert werden kann (es gibt da ja mit CSS eine Möglichkeit). Wie ist das bei der Erweiterung ???? Ich würde mit dieser gerne erreichen das es wie hier aussieht (nur das Background Image beachten das ist auf dem Desktop wie auch Mobile fixiert und immer schön angepasst).

Könnte mir da jemand Helfen oder Tipps geben wie ich das realisieren kann

Freundliche Grüsse
designpilot

Äh ... wie bitte?

Uppps da fehlen ja noch Infos
- Link zur Musterseite: www.racerfish.com

Wenn man auf der Musterseite scrollt dann ist es ja auf dem Desktop immer fixed das Hintergrundbild (auf der Musterseite ist das Hintergrundbild sogar auf den Mobile Devices fixed) Ich habe das bis jetzt
nicht hinbekommen (hab schon paar Anleitungen versucht, aber das will irgendwie nicht funktionieren). Wenn ich im Firefox mit dem Inspector die verschiedenen Devices simuliere, da funktioniert es bei allen, da frage ich mich dann wieso das es da geht.

Hier auch noch der Link zur Testseite bei der ich es probiert habe umzusetzen: dev.nakedfacts.ch

Ich würde mich über Tipps oder Hilfe von der Community freuen

Die Musterseite verwendet aber für die mobile Version ein anderes, auf Mobil angepasstes Hintergrundbild.

Das habe ich so jetzt nicht beobachtet, aber die Frage ist wie ich das am besten lösen kann, denn es geht ja auch darum dass das Background Image für Mobile ja auch fixed ist auf der Musterseite. Gäbe es da eine Lösung in Kombination mit der terminal42/contao-pageimage das dies so realisierbar ist (fixierter Background auch auf Mobile/Smart Devices).

Deine Frage hat vermutlich nichts speziell mit dieser Extension zu tun.

Zitat:

---

Zitat von Spooky

Deine Frage hat vermutlich nichts speziell mit dieser Extension zu tun.

---

Hallo Spooky
Ich denke eben schon, denn irgendwoher wird die Erweiterung ja den Code generieren. Auf allen Desktop Devices wird
das Hintergrundbild so skaliert wie es muss (es ist auch fixed) nur wird auf sämtlichen Mobile/Smart Devices das
entsprechende Hintergrundbild nicht fixiert (ich weiss das es nur über wahrscheinlich einen eigenen DIV Container realisiert werden kann).

Ich möchte die terminal42/contao-pageimage gerne weiter nutzen weil sie einfach vorteilhaft ist. Aber wie schon erwähnt, habe ich es bis jetzt nicht hinbekommen das auch auf den Mobile/Smart Devices das Hintergrundbild fixiert bleibt.

Bei www.racerfish.com geht das doch auch oder ist da was anders

Das hat nichts mit der Extension zu tun. fixed background images funktionieren nicht auf allen Geräten (zB nicht auf iOS).

Zitat:

---

Zitat von Spooky

Das hat nichts mit der Extension zu tun. fixed background images funktionieren nicht auf allen Geräten (zB nicht auf iOS).

---

aber wie wird das denn bei www.racerfish.ccom gemacht ???? Ich sehe zwar, dass da das Bild ja ausgetauscht wird (also wenn man das Browserfenster kleiner zieht sieht man das) Wenn ich direkt auf dem Mobile/Smart Device kucken gehe, dann sehe ich nur das Bild was nach dem austausch vorhanden ist, aber dort ist das ja fixiert und passt sich auch entsprechend der Auflösung, sprich des Viewports an.

Wie kann ich das denn so hinkriegen wie dort, natürlich unter Verwendung der contao-pageimage, oder wenn es eine
andere Lösung/Möglichkeit dafür gibt bin ich offen dafür (Es müsste natürlich schon so sein, das man jeder Seite das jeweilige zur Kategorie gehörende Bild angezeigt bekommt, also genau das was contao-pageimage ja macht).

Danke schon mal im Voraus für die Mithilfe an alle

Zitat:

---

Zitat von designpilot

aber wie wird das denn bei www.racerfish.ccom gemacht ????

---

Sieh dir einfach HTML & CSS an. Dort wird nicht background-attachment: fixed; verwendet, sondern ein <div>, dass position: fixed; ist.

Zitat:

---

Zitat von Spooky

Sieh dir einfach HTML & CSS an. Dort wird nicht background-attachment: fixed; verwendet, sondern ein <div>, dass position: fixed; ist.

---

Wenn ich das also richtig verstehe, müsste dem Modul was für das Background Image zuständig ist dort einfach in den Modul-Einstellungen unter CSS-ID/Klasse (am besten CSS-ID) etwas vergeben z.B. bg-hintergrund und dann im CSS entsprechend die Formatierungen wie halt eben

Code:

---

#bg-hintergrund {
  position: fixed;
}

---

usw. vergeben oder ist das so falsch ? Ich weiss ned was ich da machen kann ...

liege ich da falsch Spooky ???


Gesendet von iPhone mit Tapatalk Pro

Kann mir da echt niemand helfen ? Ich habe auch probiert die mod_background_image.html5 anzupassen (zumindest weiss ich jetzt wo her dass das <style> html {} </style> her kommt) aber das hat einfach nicht funktioniert.

Das Modul terminal42/contao-pageimage ist vorrangig dafür gemacht, um jeder Seite der Webseite ein eigenes Bild zu ordnen zu können. So benutze ich das Modul jedenfalls immer.

Wenn du für verschiedene Bildschirmgrößen das Hintergrundimage austauschen willst, wäre meiner Meinung eine direkte Anweisung in der CSS Datei mit Media Query besser zu handhaben.
So z.B.

Code:

---

html{
  background-image: url("dein-pfad/bg-image-mobil.png") no-repeat left top;
  background-size: cover;
  background-position: top;
}
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
  html{
    background-image: url("dein-pfad/bg-image-tablet.png") no-repeat left top;
  }
}
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
  html{
    background-image: url("dein-pfad/bg-image-pc.png") no-repeat left top;
  }
}

---

Die Hintergrundbilder werden vom Bildformat an die Devices angepasst und ja auch eigentlich nie wieder geändert.

Steffen Winde

Zitat:

---

Zitat von swinde

Das Modul terminal42/contao-pageimage ist vorrangig dafür gemacht, um jeder Seite der Webseite ein eigenes Bild zu ordnen zu können. So benutze ich das Modul jedenfalls immer.

Wenn du für verschiedene Bildschirmgrößen das Hintergrundimage austauschen willst, wäre meiner Meinung eine direkte Anweisung in der CSS Datei mit Media Query besser zu handhaben.
So z.B.

Code:

---

html{
  background-image: url("dein-pfad/bg-image-mobil.png") no-repeat left top;
  background-size: cover;
  background-position: top;
}
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
  html{
    background-image: url("dein-pfad/bg-image-tablet.png") no-repeat left top;
  }
}
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
  html{
    background-image: url("dein-pfad/bg-image-pc.png") no-repeat left top;
  }
}

---

Die Hintergrundbilder werden vom Bildformat an die Devices angepasst und ja auch eigentlich nie wieder geändert.

Steffen Winde

---

Hi swinde
Also die Standard mod_background_image.html5 sieht ja so aus:

PHP-Code:

---

<?php if ($this->useCss): ?>
<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;
}
</style>
<?php else: ?>
<script>
(function (window, document){
"use strict";
    var container, image, imgWidth, imgHeight;

    image = document.createElement('img');
    image.style.maxWidth = 'none'; // override Contao CSS framework
    image.onload = function() {
        imgWidth = this.width;
        imgHeight = this.height;
        fillBg();
        if (window.addEventListener) {
            window.addEventListener('resize', fillBg, false);
        } else if (document.attachEvent) {
            document.attachEvent('resize', fillBg);
        }
    }
    image.src = '<?php echo specialchars($this->src); ?>';

    container = document.createElement('div');
    container.cssClass = 'background-image';
    setStyles(container, {
        'position': 'fixed',
        'overflow': 'hidden',
        'top': 0,
        'left': 0,
        'width': '100%',
        'height': '100%',
        'z-index': '-1'
    });

    container.appendChild(image);
    document.body.insertBefore(container, document.body.firstChild);

    function fillBg() {
        var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

        var newWidth = windowWidth;
        var newHeight = (windowWidth / imgWidth) * imgHeight;
        var topMargin = ((newHeight - windowHeight) / 2) * -1;
        var leftMargin = 0;

        if (newHeight < windowHeight) {
            newWidth = (windowHeight / imgHeight) * imgWidth;
            newHeight = windowHeight;
            topMargin = 0;
            leftMargin = ((newWidth - windowWidth) / 2) * -1;
        }

        setStyles(image, {
            'height': (newHeight + 'px'),
            'width': (newWidth + 'px'),
            'marginLeft': (leftMargin + 'px'),
            'marginTop': (topMargin + 'px')
        });
    }

    function setStyles(el, styles) {
        for (var rule in styles) {
            el.style[rule] = styles[rule];
        }
    }
}(window, document));

</script>
<?php endif; ?>

---

Kann ich das CSS im Template direkt anpassen ???? Weil das Background Image müsste ja im CSS so aus sehen:

Code:

---

background: url("<?php echo specialchars($this->src); ?>") no-repeat center center fixed;

---

Weisst Du swinde unter dev.nakedfacts.ch in der Desktop Ansicht funktioniert alles einwandfrei so wie es soll (das Background Image ist fixiert, beim scrollen wird das Background Image überdeckt) nur auf den Tablets/Smartphones will das einfach nicht funktionieren.

Suche auf Google nach "fixed background image ios".

Zitat:

---

Zitat von Spooky

Suche auf Google nach "fixed background image ios".

---

Das heisst dann ab einer bestimmten Viewport-Grösse das Bild austauschen? Muss das Template mod_background_image.html5 angepasst werden? Was mir auch noch in den Sinn gekommen ist, das in einem eigenen Layout-Bereich und dann auf manuelle Ausgabe stellen und das in der fe_page eintragen.

Das Background-Image auf dem Desktop würde ja so passen wie es ist, es geht wirklich nur um die Tablet/Smartphone Ansicht und wenn man das nicht anders machen kann, dann bin ich um jede Hilfe froh Spooky.

Spooky dann geht das wirklich nur ohne die contao-pageimage ???? Oder könnte man das irgendwie anders lösen.

Schön wäre es eben wenn man für die einzelnen Seiten (Fotografie, Videografie usw.) entsprechend das jeweilige Background Image einbinden kann (für Fotografie eines was mit z.B ner Fotokamere drauf is und für Videografie eines mit einer Videocam usw.)


Gesendet von iPhone mit Tapatalk Pro

Mit der Contao Page Image Extension kannst du einer Seite ein Bild zuweisen. Was du damit machst ist prinzipiell dir überlassen.

Zitat:

---

Zitat von Spooky

Mit der Contao Page Image Extension kannst du einer Seite ein Bild zuweisen. Was du damit machst ist prinzipiell dir überlassen.

---

Ich glaube Du verstehst mich falsch ;-) Ich setze ja die Contao Page Image Extension ein damit ich jeder Seite individuell das Background-Image zuweisen kann, nun sollte es aber so sein das auch auf den Smartdevices (Tablets/Smartphones) das Background-Image fixed sein soll, was ja aber anhand der von Dir bereits erwähnten Gründen (erwähntem Grund) für vorallem iOS Devices nicht so ohne weiteres funktioniert.

Wie gehe ich das Problem jetzt am besten an (auf dem Firefox z.B. funktioniert das einwandfrei, da der Gecko ist und nicht Webkit wie Google Chrome oder Safari). Was müsste ich da alles ändern/anpassen, damit es auf allen Browsern funktioniert (ich habe deinen Link auch schon angeschaut und ein paar Beispiele, aber da ist die Rede davon, dass man ein separates DIV einfügen muss das es funktioniert) könntest Du mir da nicht ein wenig helfen oder Tipps geben, so das ich das verstehe. Ich mein ich will ja was lernen, aber das hört sich alles so schwer an obwohl es das wahrscheinlich gar nicht ist.

Mal zum Mitschreiben:

• den Weg zum Fixed Background kennst Du ja
• wenn Du ein weiteres <div> brauchst dann füge es halt im Template ein
• Du bist ja beim Template nicht daran gebunden was vorgegeben ist. Du hast Elemente zur Verfügung
• Man kann damit auch sowas machen wie <div auf><image rein><div zu>
• Man könnte auch etwas machen wie <style "background-image:<image rein> <style wieder zu>

Man könnte vermutlich auch noch ganz andere Dinge machen, wie zu versuchen, das Ganze mit dem experimentellen image-set-notation zu verheiraten.

https://caniuse.com/#feat=background-img-opts
http://jsbin.com/garetikubu/edit?html,output

Der Phantasie sind keine Grenzen gesetzt.

Zitat:

---

Zitat von lucina

Mal zum Mitschreiben:

• den Weg zum Fixed Background kennst Du ja
• wenn Du ein weiteres <div> brauchst dann füge es halt im Template ein
• Du bist ja beim Template nicht daran gebunden was vorgegeben ist. Du hast Elemente zur Verfügung
• Man kann damit auch sowas machen wie <div auf><image rein><div zu>
• Man könnte auch etwas machen wie <style "background-image:<image rein> <style wieder zu>

Man könnte vermutlich auch noch ganz andere Dinge machen, wie zu versuchen, das Ganze mit dem experimentellen image-set-notation zu verheiraten.

https://caniuse.com/#feat=background-img-opts
http://jsbin.com/garetikubu/edit?html,output

Der Phantasie sind keine Grenzen gesetzt.

---

Hallo lucina
- ja den Weg dahin wüsste ich schon, aber durch das mod_background_image.html5 ist das ein wenig erschwert
(da wird noch ein DIV generiert und ich hab das dort auch schon probiert anzupassen aber ohne Erfolg) oder ich versteh es einfach nicht richtig (das Template ist ja oben ersichtlich)

Zu Punkt 2 weiss ich ja auch wie das geht, aber durch das Template was ja vorhanden ist (für mich) auch ein wenig erschwert. Zu Punkt 3 das verstehe ich auch und bei Punkt 4 + 5 ist selbsterklärend.

Ich hab da schon zwei, drei Sachen probiert aber ohne Erfolg. Hast Du Dir das mod_background_image.html5 angeschaut???? Für Dich ist es da sicher einfacher durchzublicken (Du bist ja auch schon jahrelang in dem Business tätig oder hast ja einiges an Wissen mehr als ich.

Kann mir da niemand „verständlich“ erklären wie ich das lösen kann? Dabei soll aber die contao-pageimage zentraler Bestandteil bleiben (es soll ja für jede der entsprechenden Seiten das dazugehörige Bild verwendet werden).

Ich denke, das wenn ich da einfach ein <div> in der fe_page einfüge, ich das schon anhand der vorgeschlagenen Empfehlungen (danke Spooky und Lucina) hin bekommen würd, aber nicht wenn es darum geht das die contao-pageimage Bestandteil bleiben soll.

Ich hoffe das da der eine oder andere helfen kann


Gesendet von iPhone mit Tapatalk Pro

Ich kann (und will) dir nun wirklich nicht Dein Template bauen. Dann bleiben Verständnis und Lerneffekt ja völlig auf der Strecke.

Besser als unter https://aclaes.com/responsive-backgr...set-and-sizes/ kann ich auch nicht erklären, wie Du für eine Javascript-Lösung, die auch noch srcset unterstützt, vorgehen musst.

Wenn Du auf dieser Basis ein Modultemplate für page_images baust und es dann ins Layout einbaust, dann solltest Du Dein Ziel erreichen können.

Zitat:

---

Zitat von lucina

Ich kann (und will) dir nun wirklich nicht Dein Template bauen. Dann bleiben Verständnis und Lerneffekt ja völlig auf der Strecke.

Besser als unter https://aclaes.com/responsive-backgr...set-and-sizes/ kann ich auch nicht erklären, wie Du für eine Javascript-Lösung, die auch noch srcset unterstützt, vorgehen musst.

Wenn Du auf dieser Basis ein Modultemplate für page_images baust und es dann ins Layout einbaust, dann solltest Du Dein Ziel erreichen können.

---

Hallo Lucina
Ich habe mir jetzt mal noch MAMP Pro gekauft um eine lokale Entwicklungsumgebung zu schaffen, die läuft sehr gut und damit kann ich auch arbeiten (werde da sicher dabei auch einiges lernen).

Ich wollte/will auch nicht das mir das jemand baut (ich möchte ja dabei was lernen) , weil wie Du ja schon sagst "da würden Verständnis und Lerneffekt ja auf der Strecke bleiben" Du musst aber auch zugeben, das man nur lernen kann wenn man für einen konkreten Fall/Beispiel auch Muster/Beispiele bekommt sprich findet.

Ich hoffe das ich dies irgendwie schaffe (mein Kumpel für den ich die Seite aufbaue sagt das es nicht zwingend so sein muss für den Anfang, das ich für das Zeit habe) wie es aber so ist, lässt es dann manchmal der Stolz fast nicht zu wenn man es noch nicht hinkriegt.

Allenfalls müsste ich die contao-pageimage für das erste vergessen und das so via CSS und eigenem DIV lösen wie Du ja oben schon mal erläutert hast.