[full-background-images] - Full Background Image(s) / Slider

Diese Erweiterung stellt verschiedene Varianten für Full-Background-Bilder in Contao zu Verfügung.

• Einzelbild mit Einblendeffekt
• Zufallsbild mit Einblendeffekt
• Mehrere Bilder mit Einblendeffekt und Fadeeffekt bei Bildwechsel
• Unterseiten können die Einstellungen von übergeordneter Seite erben, überschreiben oder deaktivieren

Die Bilder und Einstellungen werden direkt in der Seitenstruktur verwaltet.

Links:
Github
Anleitung (Englisch!)
Extension-Repository
Packagist (für Composer)

Danke an:
Anregung/Idee: nuun gmbh & traumwerk
Entwicklung: 1up GmbH

Ich habe der Erweiterungen ein paar Bugfixes spendiert.
Die Änderungen betreffen nur mobile Endgeräte (primär iOS-Devices).

Hey,

spannende Erweiterung. Hast Du Erfahrung in welchen Browserversionen (IE) das ohne Probleme läuft?

Hallo

Die Erweiterung funktioniert laut meinen Tests unter IE ab Version 8.

Grüsse
bytehead

Die Erweiterung ist genau das was ich für das nächste Kundenprojekt brauche. Einfach klasse!

Habe trotzdem eine Frage:

Gäbe es die Möglichkeit zwischen den Bildern zu navigieren? Auf der Seite ist im Grunde nämlich nur ein kleiner Header-Bereich mit Logo und Navigation und die Hintergrund-Slideshow. nur dass man dort zwischen den Hintergrundbildern navigieren könnte?

Ist nur eine kleine Anregung/Anmerkung meinerseits. Gibt es vielleicht eine andere Erweiterung die sowas bewerkstelligt (unter Contao 3.2.x) ?

Auf jeden Fall eine top Erweiterung!

Grüße,
Sinainu

Hallo Sinainu

Danke für das Feedback, freut mich dass die Extension Einsatzgebiete findet.

Zu deinem Anliegen gibt es bereits ein Ticket auf Github https://github.com/1up-lab/contao-fu...ages/issues/11, ich bin jedoch noch nicht dazu gekommen, dieses Ticket zu bearbeiten.
Das Feature ist aber geplant für die Version 1.1.

Ich werde sicher hier einen Post schreiben, sobald ich das Feature drin habe.

Grüsse
bytehead

Hallo,

eine tolle Erweiterung für Contao und auch schon im Einsatz. Allerdings habe ich festgestellt, dass die Darstellung auf dem iPhone nicht richtig funktioniert. Hier wird nur ca. 1/3 der Fläche durch das Hintergrundbild gefüllt. Ist das nur bei mir so oder kann das noch jemand bestätigen?

Danke für die Rückmeldung!

Hallo Dublay

Ich habe es kurz getestet auf meinem iPhone (4s) und im iOS-Simulator. Bei mir funktioniert das einwandfrei.
Hast du allenfalls sonst Skripte / CSS dass irgendwie da mit hineinspielt?
Im Anhang noch einen Screenshot der MA-Demo mit der Extension im iOS-Simulator.

Anhang 13883

Grüsse
bytehead

Hallo bytehead,

ich habe das Problem eingrenzen können. Scheinbar hängt es mit dem Layout-Builder zusammen. Darf ich Dir mal einen Link schicken? Vielleicht siehst Du ja auf Anhieb das Problem.


Viele Grüße,

Dublay

Ja kannst du gerne machen.

Hallo,
ich wollte gerade den Full Background Image(s) Slider über composer installieren. Leider scheint er mit Contao 3.3.3 noch nicht kompatibel zu sein.

ist ein Update für Contao 3.3 geplant?

LG Martina

Zitat:

---

Zitat von Dublay

Hallo,

eine tolle Erweiterung für Contao und auch schon im Einsatz. Allerdings habe ich festgestellt, dass die Darstellung auf dem iPhone nicht richtig funktioniert. Hier wird nur ca. 1/3 der Fläche durch das Hintergrundbild gefüllt. Ist das nur bei mir so oder kann das noch jemand bestätigen?

Danke für die Rückmeldung!

---

Hallo,
ich habe dasselbe Problem,
alles gut nur nicht bei iphone ...
Gibts dafür schon eine Lösung?

Danke im Voraus für die Hilfe!
Anx

Zitat:

---

Zitat von Martina

Hallo,
ich wollte gerade den Full Background Image(s) Slider über composer installieren. Leider scheint er mit Contao 3.3.3 noch nicht kompatibel zu sein.

ist ein Update für Contao 3.3 geplant?

LG Martina

---

erstmal danke für die tolle Erweiterung!

bei mir läuft es unter Cto 3.3.3

ausgewählt:

- den Startpunkt einer Website ausgewählt
- individuelle Bildauswahl
- mehrere Bilder mit fade-effekt

allerdings fadet er alle Bilder, egal welchen Bildmodus man auswählt.
Die Einstellungen für Pausen u. Bildwechsel werden auch nicht umgesetzt.
wenn ich das in der ersten Seite unter Startpunkt einstelle, werden die Zeiten für Pausen u. Bildwechsel ausgeführt

Zitat:

---

Zitat von Martina

Hallo,
ich wollte gerade den Full Background Image(s) Slider über composer installieren. Leider scheint er mit Contao 3.3.3 noch nicht kompatibel zu sein.

ist ein Update für Contao 3.3 geplant?

LG Martina

---

Hallo Martina

Ein Update ist geplant, bzw. schon in Arbeit. Erste Tests unter Contao 3.3.x funktionieren soweit fehlerfrei.

Grüsse
bytehead

Zitat:

---

Zitat von anx

Hallo,
ich habe dasselbe Problem,
alles gut nur nicht bei iphone ...
Gibts dafür schon eine Lösung?

Danke im Voraus für die Hilfe!
Anx

---

Hallo Anx

Die Erweiterung sollte problemlos auch auf Smartphones funktionieren. Voraussetzung: Die Webseite muss responsive sein, sprich auch den Meta-Tag für den Viewport mitliefern.
Ich habe die Erweiterung auf dem iPhone mit der alten und der neuen Contao Demo getestet, funktioniert bei beiden Demoversionen von Contao.

Grüsse
bytehead

Zitat:

---

Zitat von andrea$

erstmal danke für die tolle Erweiterung!

bei mir läuft es unter Cto 3.3.3

ausgewählt:

- den Startpunkt einer Website ausgewählt
- individuelle Bildauswahl
- mehrere Bilder mit fade-effekt

---

Hallo andrea$

Bei mir läuft die Erweiterung auch unter 3.3.3.
Allerdings kann ich in Verwendung mit der neuen Contao Demo kein Fehlverhalten feststellen.

Zitat:

---

Zitat von andrea$

allerdings fadet er alle Bilder, egal welchen Bildmodus man auswählt.
Die Einstellungen für Pausen u. Bildwechsel werden auch nicht umgesetzt.
wenn ich das in der ersten Seite unter Startpunkt einstelle, werden die Zeiten für Pausen u. Bildwechsel ausgeführt

---

Generell werden alle Bilder gefadet (egal ob Bildübergang oder beim Seitenaufbau), wenn du die Dauer des Bildwechsels aber auf 0 setzst, sollte es nicht mehr faden.

Grüsse
bytehead

Das Contao 3.3.x-kompatible Update (v1.0.7) ist für die Contao-Erweiterungsverwaltung und Composer-Installationen verfügbar.

Grüsse
bytehead

hab scheinbar ein konflikt mit der funktion LazyLoad JavaScript, ich glaube die kommt mit theme+ daher

Probleme hat das jquery-backstretch dennoch einige was das mobile angeht.

1. landscape bei firefox/chrome android kann das script jedoch noch immer nicht richtig. Nur der native android browser kann damit umgehen
2. Dolphin Browser ist ne katastrophe

Zitat:

---

Zitat von ways2web

hab scheinbar ein konflikt mit der funktion LazyLoad JavaScript, ich glaube die kommt mit theme+ daher

---

Die neuste dev-master Version funktioniert jetzt mit dem LazyLoad Javascript von theme-plus. Allerdings noch ohne IE8/9 Support.

Zitat:

---

Zitat von ways2web

Probleme hat das jquery-backstretch dennoch einige was das mobile angeht.

1. landscape bei firefox/chrome android kann das script jedoch noch immer nicht richtig. Nur der native android browser kann damit umgehen
2. Dolphin Browser ist ne katastrophe

---

Ich werde mir die Erweiterung auf Firefox&Chrome unter Android ansehen. Unter iOS funktioniert es mit Chrome einwandfrei.
Dolphin kenne ich nicht - der wird auch einen verschwindend kleinen Marktanteil haben - somit nicht relevant.

Grüsse,
bytehead

Zitat:

---

Zitat von bytehead

Die neuste dev-master Version funktioniert jetzt mit dem LazyLoad Javascript von theme-plus. Allerdings noch ohne IE8/9 Support.



Ich werde mir die Erweiterung auf Firefox&Chrome unter Android ansehen. Unter iOS funktioniert es mit Chrome einwandfrei.
Dolphin kenne ich nicht - der wird auch einen verschwindend kleinen Marktanteil haben - somit nicht relevant.

Grüsse,
bytehead

---

zuerst mal wie es sich gehört... DANKE! Denn die extension ist toll.

ja, dolphin ist sicher zu vernachlässigen..... firefox und chrome wäre schon toll... falls das Problem dort zu beheben wäre, klappt es dann vielleicht ja auch mit den anderen exoten... da die genau das gleiche Problem wie firefox & Co haben.
das es mit IOs läuft ist schon mal toll,, kann ich nur mit emus testen.. .und den trau ich ned :)

gruss
ways

Hallo
Die Hintergrundbilder werden vom Mittelpunkt aus skaliert. Gerne würde ich die obere linke Ecke als Referenzpunkt für die Bildskalierung verwenden. Kann man das irgendwie ändern? Leider verstehe ich zu wenig von Programmierung, um selbst aktiv zu werden. Ich nutze Contoa 3.3.3 und Full Background Image(s) 1.1.0 Build 5 zurzeit in einer lokalen Installation.
Gruss
pees

Hallo pees

Zitat:

---

Zitat von pees

Die Hintergrundbilder werden vom Mittelpunkt aus skaliert. Gerne würde ich die obere linke Ecke als Referenzpunkt für die Bildskalierung verwenden. Kann man das irgendwie ändern?
pees

---

Das könnte ich eigentlich noch zu den Einstellungen hinzufügen. Wird in einer nächsten Version drin sein.

Bis dahin kannst du das Template modifizieren:

Code:

---

<script type="text/javascript">
    window.addEventListener("load-fullbg", function() {
        ;(function($){
            $(document).ready(function() {
                $.backstretch(
                    [<?php echo $this->images; ?>],
                {
                    centeredX: false,
                    centeredY: false,
                    duration: <?php echo $this->timeout; ?>,
                    fade: <?php echo $this->speed; ?>,
                });
            });
        })(jQuery);
    });
</script>

---

centeredX und centeredY sind defaultmässig auf true gesetzt.

Grüsse
bytehead

Zitat:

---

Zitat von bytehead

Bis dahin kannst du das Template modifizieren:

Code:

---

<script type="text/javascript">
    window.addEventListener("load-fullbg", function() {
        ;(function($){
            $(document).ready(function() {
                $.backstretch(
                    [<?php echo $this->images; ?>],
                {
                    centeredX: false,
                    centeredY: false,
                    duration: <?php echo $this->timeout; ?>,
                    fade: <?php echo $this->speed; ?>,
                });
            });
        })(jQuery);
    });
</script>

---

centeredX und centeredY sind defaultmässig auf true gesetzt.

---

Bei mir werden die Bilder nicht komplett angezeigt. Es fehlt links u. rechts etwas vom Bild.
Auch wenn ich das Template wie von dir hier gepostet ändere u. mal die x/y unterschiedlich auf true oder false setze, ändert das nichts.
Größe der Bilder 1280x720 aber auch wenn ich sie reduziere auf 800x450 sind sie links/rechts abgeschnitten.

Richtig responsive ist das ganze auch nicht? Beim ändern des Viewports verschwindet so einiges vom Bild.

Tolle Erweiterung!

Bei mir ist nur das Problem, dass die Bilder ihre Größe beibehalten und nicht je nach Größe des Browserfensters automatisch skalieren.
An was kann das liegen?

Grüße
Chinagirl

Nach nochmaligem Testen habe ich festgestellt, dass Problem ist nur beim Firefox am Apple !?

liebe Grüße,
chinagirl

Hallo,
ich bin neu hier.
Habe den Full Background Image(s) Slider installiert unter Contao 3.3.3.
Meine Frage wäre, wie kann ich die Bilder einbinden?

Danke in voraus.

Zitat:

---

Zitat von jove

Hallo,
ich bin neu hier.
Habe den Full Background Image(s) Slider installiert unter Contao 3.3.3.
Meine Frage wäre, wie kann ich die Bilder einbinden?

Danke in voraus.

---

du musst erst im startpunkt der seite (seitenstruktur) das ganze aktivieren... und dann kannst du in den einstellungen der seitenstruktur auch pro seite Bilder angeben

Zitat:

---

Zitat von ways2web

du musst erst im startpunkt der seite (seitenstruktur) das ganze aktivieren... und dann kannst du in den einstellungen der seitenstruktur auch pro seite Bilder angeben

---

Danke ways2web.

Gruß JoVe

Hallo andrea$

Zitat:

---

Zitat von andrea$

Bei mir werden die Bilder nicht komplett angezeigt. Es fehlt links u. rechts etwas vom Bild.
Auch wenn ich das Template wie von dir hier gepostet ändere u. mal die x/y unterschiedlich auf true oder false setze, ändert das nichts.
Größe der Bilder 1280x720 aber auch wenn ich sie reduziere auf 800x450 sind sie links/rechts abgeschnitten.

Richtig responsive ist das ganze auch nicht? Beim ändern des Viewports verschwindet so einiges vom Bild.

---

Ich kann deine Beobachtungen nicht nachvollziehen/nachstellen. Hast du einen Link, wo man sich das anschauen kann?
Mehr Informationen über die Versionen von Device/Betriebssystem/Browser wäre sicher auch hilfreich.

Grüsse
bytehead

Hallo chinagirl

Zitat:

---

Zitat von chinagirl

Tolle Erweiterung!

---

Danke vielmal!

Zitat:

---

Zitat von chinagirl

Nach nochmaligem Testen habe ich festgestellt, dass Problem ist nur beim Firefox am Apple !?

---

Ich habe dies gerade auf einem Mac OSX System mit Firefox v31.0 getestet und finde kein falsches Verhalten.
Hast du einen Link zu der Installation oder kannst du mir die Versionen von Device/Betriebssystem/Browser nennen?

Grüsse
bytehead

Die Erweiterung ist einfach Spitze!..

Zitat:

---

Zitat von bytehead

Hallo andrea$



Ich kann deine Beobachtungen nicht nachvollziehen/nachstellen. Hast du einen Link, wo man sich das anschauen kann?
Mehr Informationen über die Versionen von Device/Betriebssystem/Browser wäre sicher auch hilfreich.

Grüsse
bytehead

---

danke für deine schnelle Antwort!

Ich habs nur offline aber chinagirl hat ja ein ähnliches Problem. Ich habe das auf einem Desktop, Windows 7 div. Browser: FF, Opera, Iron (chrome). Mobile Geräte sind bei mir noch gar nicht im Gespräch.
Ich habe die Seite überwiegend mit Prozentangaben für wrapper, container etc. erstellt. Ich wüßte jetzt auch nicht weiter woran es liegen kann. Viel Einstellungsmöglichkeiten gibt es ja nicht.

Ziehe ich das Browserfenster weit genug auf, ist das komplette Bild sichtbar.

Hallo andrea$

Zitat:

---

Zitat von andrea$

Ziehe ich das Browserfenster weit genug auf, ist das komplette Bild sichtbar.

---

Ich vermute zu wissen, was du meinst :)
Das Bild wird im grösstmöglichen Format in das Fenster eingepasst, wenn das Seitenverhältnis des Bildes zum Bildschirm nicht passt, wird je nach Situation links/rechts oder oben/unten abgeschnitten.
Aber das verhaltet sich in allen mir bekannten Browsern so - ist also kein Bug ;-)

Grüsse
bytehead

hallo bytehead!

Zitat:

---

Zitat von bytehead

Ich habe dies gerade auf einem Mac OSX System mit Firefox v31.0 getestet und finde kein falsches Verhalten.
Hast du einen Link zu der Installation oder kannst du mir die Versionen von Device/Betriebssystem/Browser nennen?

---

danke für deine rasche antwort!

ich habe einen mac osx mit firefox v31.0.
das problem dürfte an meinem gerät liegen, da ich die seite jetzt auf einem anderm mac osx getestet habe und da funktioniert sie tadellos.

grüße,
chinagirl

Zitat:

---

Zitat von bytehead

Hallo andrea$
Ich vermute zu wissen, was du meinst :)
Das Bild wird im grösstmöglichen Format in das Fenster eingepasst, wenn das Seitenverhältnis des Bildes zum Bildschirm nicht passt, wird je nach Situation links/rechts oder oben/unten abgeschnitten.
Aber das verhaltet sich in allen mir bekannten Browsern so - ist also kein Bug ;-)

Grüsse
bytehead

---

Zunächst mal wollte ich das nicht als Bug melden. ;)

Wenn ich z.B. meine Seite (übrigens eine Onepage) mit Web Developer unterschiedliche Fenstergrößen anzeigen lasse, wird das Bild komplett dargestellt. Ziehe ich am Fenster ist wieder links/rechts was abgeschnitten.

Zitat:

---

Das Bild wird im grösstmöglichen Format in das Fenster eingepasst, wenn das Seitenverhältnis des Bildes zum Bildschirm nicht passt, wird je nach Situation links/rechts oder oben/unten abgeschnitten.

---

Genau so habe ich das aber verstanden, dass das Hintergrundbild sich immer der Fenstergröße anpasst. Klingt für mich widersprüchlich oder verstehe ich da wieder was falsch? Ich nehme an das 95% der Hintergrundbilder nie der aktuellen Fenstergröße des Browsers entsprechen .


Ich werde mal sehen ob ich heute meine Seite auf hochlade.

Zitat:

---

Zitat von andrea$

Zunächst mal wollte ich das nicht als Bug melden. ;)

---

Ok, dann hab ich dich wohl falsch verstanden :)

Zitat:

---

Zitat von andrea$

Genau so habe ich das aber verstanden, dass das Hintergrundbild sich immer der Fenstergröße anpasst. Klingt für mich widersprüchlich oder verstehe ich da wieder was falsch? Ich nehme an das 95% der Hintergrundbilder nie der aktuellen Fenstergröße des Browsers entsprechen .

---

Hmm. Ich wüsste nicht, wie ich ein Bild mit dem Seitenverhältnis von z.B. 16:9 (1920px x 1080px) auf einen 16:10 (1920px x 1200px) Bildschirm füllend draufbringe ohne das Bild auf 2133px x 1200px zu vergrössern und links und rechts was abzuschneiden.

Grüsse
bytehead

Zitat:

---

Zitat von bytehead

Ok, dann hab ich dich wohl falsch verstanden :)
Hmm. Ich wüsste nicht, wie ich ein Bild mit dem Seitenverhältnis von z.B. 16:9 (1920px x 1080px) auf einen 16:10 (1920px x 1200px) Bildschirm füllend draufbringe ohne das Bild auf 2133px x 1200px zu vergrössern und links und rechts was abzuschneiden.

Grüsse
bytehead

---

ich weiß es noch weniger! :D

aber tumbrl scheints zu gehen hier

Zitat:

---

Zitat von andrea$

ich weiß es noch weniger! :D

aber tumbrl scheints zu gehen hier

---

tumblr beschneidet auch um das ganze passende und unverzerrt abzubilden.. sieht man doh deutlich, dass links und rechts dann einfach abgeschnitten, wenn das Seitenverhältnis mathem. nicht zur ausgangsgröße passt.

gruss

wenn ma da reloaded kommt immer ein anders Bild. Manchmal wird was abgeschnitten, stimmt. Bei anderen Bilder bleibst einfach gleichgroß. Wie dem auch sei, so ein full-background-image kann schon ne tolle atmospäre schaffen.

Tumbler macht es vor - auch die schneiden zwecks Proportionalität an dem Hintergrundbild rum.
Hintergrundbilder sollen einen gewissen Mood reinbringen, unabhängig von dem Bildausschnitt, welcher schlussendlich angezeigt wird.
Wenn Bilder vollständig angezeigt werden müssen, ist ein Full-Background-Image der falsche Weg.

Grüsse
bytehead