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

[bytehead]

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

[bytehead]

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

[jgrotstabel]

Hey,

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

[bytehead]

Hallo

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

Grüsse
bytehead

[Sinainu]

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

[bytehead]

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

[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!

[bytehead]

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.

Bildschirmfoto-2014-06-23-um-16.14.58.jpg

Grüsse
bytehead

[Dublay]

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

[bytehead]

Ja kannst du gerne machen.

[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

[anx]

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

[andrea$]

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

[bytehead]

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

[bytehead]

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

[bytehead]

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.

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

[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

[ways2web]

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

[bytehead]

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.

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

[ways2web]

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

[pees]

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

[bytehead]

Hallo 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:

<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

[andrea$]

Bis dahin kannst du das Template modifizieren:

<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.

[chinagirl]

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

[chinagirl]

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

liebe Grüße,
chinagirl

[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.

[ways2web]

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

[jove]

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

[bytehead]

Hallo 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

[bytehead]

Hallo chinagirl

Tolle Erweiterung!

Danke vielmal!

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

[jove]

Die Erweiterung ist einfach Spitze!..

[andrea$]

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.

[bytehead]

Hallo 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

[chinagirl]

hallo 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

[andrea$]

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.

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.

[bytehead]

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

Ok, dann hab ich dich wohl falsch verstanden

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

[andrea$]

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!

aber tumbrl scheints zu gehen hier

[ways2web]

ich weiß es noch weniger!

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

[andrea$]

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.

[bytehead]

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