3 neue Content-Elemente zum ausprobieren | twentytwenty, flip_ce, count_ce

Moinsen liebe Community,

hier ein paar neue Content-Elemente zum ausprobieren. Wichtig ist das Ihr jQuery aktiviert habt, die laufen nähmlich alle nicht ohne.

twentytwenty
twentytwenty ist ein Contao-Frontend-Modul welches die Unterschiede zwischen zwei Bildern aufzeigt. Durch einen Slider sieht man den Vorher- / Nachher-Effekt.

https://github.com/Sascha-Brandhoff/twentytwenty


count_ce
count_ce ist ein Contao-Frontend-Modul welches einen Zähler erstellt der ab einer zuvor definierten Zahl bis zu einer ebenfalls vorab definierten Zahl durchläuft. Der Zähler startet erst wenn man in seine Richtung scrollt. Der Anzeigebereich kann vollkommen frei definiert werden. An der Stelle wo gezählt werden soll fügst Du nur %s ein. Dieser Wert wird durch den Zählwert ersetzt.

https://github.com/Sascha-Brandhoff/count_ce


flip_ce
flip_ce ist ein Contao-Frontend-Modul welches einen 3D-Dreheffekt erlaubt. Diesen Effekt kennt man vom wenden einer Visitenkarte. Es gibt eine Vor- und eine Rückseite die frei gestaltet werden kann. Fährt man über den Bereich wendet dieser sich von der Vor- zur Rückseite.

https://github.com/Sascha-Brandhoff/flip_ce


Ich freue mich auf eure Testergebnisse und würde mich freuen wenn Ihr gewünschten Optimierungsbedarf oder Fehler entweder im Git meldet oder eben hier.

Grüße
Sascha

twentytwenty klingt interessant...leider nur via Composer? Ich hätte schon einen Showcase und du damit vielleicht einen Demolink :)

Edit:
Manuell kann ich es leider auch nicht installieren

Moin Sascha,

legst du noch den Composer Anschluss für twentytwenty nach?

Danke und Gruß, Cliff

Zitat:

---

Zitat von Kahmoon

twentytwenty klingt interessant...leider nur via Composer? Ich hätte schon einen Showcase und du damit vielleicht einen Demolink :)

---

So im ER ist es jetzt ebenfalls und per Composer geht's jetzt auch. War heute morgen nur zu müde :D Über den Demolink würde ich mich sehr freuen.

Danke. ich teste es mal...aktuell zerhauts mir damit mein Grid. Keine Ahnung warum. Ich suche noch.

Also ich glaube das Modul erzeugt fehlerhaftes HTML.

Ich habe eigentlich zwei Spalten links (grid11 und rechts grid5). Sobald ich ein twentytwenty Element in "links" einbaue rutscht "rechts" in das Element von twentytwenty. Als ob dort ein schließendes DIV fehlt.


Edit:

Fehler gefunden!
In deinem Template ce_twentytwenty.html5 ist das letzte DIV kein schließendes Div sondern ein öffnendes

Code:

---

<div class="afterbefore-container" id="twentytwenty-id<?=$this->id; ?>">
    <div style="width: <?=$this->Before->arrSize[0]; ?>px;" class="twentytwenty-container" data-orientation="horizontal">
    <img src="<?= $this->Before->src; ?>" <?= $this->Before->imgSize; ?>>
    <img src="<?= $this->After->src; ?>" <?= $this->After->imgSize; ?>>
    </div>
<div>

---

Es wäre auch schön wenn dieses ce_ Element, wie andere Elemente auch, ein ce_inside bekommt

Also quasi:

Code:

---

<?php $this->extend('block_searchable'); ?>

<?php $this->block('content'); ?>
<div class="ce_inside">
    <div class="afterbefore-container" id="twentytwenty-id<?=$this->id; ?>">
        <div style="width: <?=$this->Before->arrSize[0]; ?>px;" class="twentytwenty-container" data-orientation="horizontal">
        <img src="<?= $this->Before->src; ?>" <?= $this->Before->imgSize; ?>>
        <img src="<?= $this->After->src; ?>" <?= $this->After->imgSize; ?>>
        </div>
    </div>
</div>
<?php $this->endblock(); ?>

---

Ein Problem bleibt aber nach wie vor. Das Ganze ist nicht responsive...vermutlich deshalb weil im Template nicht das Picture-Element <?php $this->insert('picture_default', $this->picture); ?> sondern ein ganz normales img Tag verwendet wird!?

Hi Kahmoon,

twentwenty ist nen bissel älter. Ich checke es mal und mache dann einen Commit. Danke vorab!

Grüße
Sascha

Wenn ich das Modul twentytwenty einbinde werde keine Fotos angezeigt.

Ich bekomme folgende Fehlermeldung:

HTML-Code:

---

TypeError: $(...).load is not a function
       

...wentytwenty({default_offset_pct: 0.7});$(".twentytwenty-container[data-orientati...

---

Wie kann ich dies beheben?

Zitat:

---

Zitat von Sascha.Brandhoff

... Wichtig ist das Ihr jQuery aktiviert habt, die laufen nähmlich alle nicht ohne ...

---

Hast du ???

Ja, habe ich...

Ich habe aber mal aus dem Dropdown die Quelle CDN mit Fallback gewählt statt nur Lokal und nun geht es, Danke für den Wink ;).

Moinsen liebe Menschen,

ich werde twentytwenty morgen, spätestens am Sonntag, updaten. Wenn alles klappt isses dann auch Responsiv.

Grüße

Hallo Leute,

also ich finde die Idee mit dem flip_ce super, habe sie auch gleich versucht zu testen.
Jedoch läuft Sie bei mir nicht. Ich habe versucht es mit den Inhaltselementen Flip-Vorne-Start, Flip-Vorne-Ende, Flip_Hinten-Start und Flip-Hinten-Stop oder Flip Start und Flip Stop umzusezten. Leider geht aber beides nicht. Jquery habe ich natürlich auch aktiviert.

Habt ihr vielleicht eine Idee was ich noch machen kann.

Vielen Dank

<flipStart>
<flipVorneStart>
[...Content Elemente von Dir...]
<flipVorneStop>
<flipHintenStart>
[...Content Elemente von Dir...]
<flipHintenStop>
<flipStop>

Wichtig! jQuery aktivieren und eine Höhe bei flipStart angeben.

Zitat:

---

Sascha.Brandhoff
<flipStart>
<flipVorneStart>
[...Content Elemente von Dir...]
<flipVorneStop>
<flipHintenStart>
[...Content Elemente von Dir...]
<flipHintenStop>
<flipStop>

Wichtig! jQuery aktivieren und eine Höhe bei flipStart angeben.

---

Die Anordnung der Elemente hat mir nochmal sehr geholfen

Danke

Die twentytwenty/composer.json ist falsch, oder soll das installiert werden nach system/modules/flip_ce ? glaube kaum.

https://github.com/Sascha-Brandhoff/...wenty/issues/2

Wer sich unter twentytwenty nix vorstellen kann, gerade sehr populär bei Fotografen die Vorher/Nachher Bilder zeigen wollen.
Demo gibt natürlich auf der Originalseite: http://zurb.com/playground/twentytwenty

Bei twentytwenty gibts noch nichts neues oder? :D

Ich habe zwar den gefunden Fehler debuggt aber die Responsive-Sache noch nicht reinbekommen. Mal schauen vielleicht klappts am WE.

Darf ich noch mal nachfragen? :-)

Hallo,

ich habe twentytwenty Version 1.0.0 Build 2 installiert und zentriert sowie responsive eingebunden. Es sind nur die folgenden CSS-Angeban notwendig:

Code:

---

.twentytwenty-container {
    max-width:100%;
    margin:0 auto;
}

---

Ich habe allerdings Probleme mit twentytwenty zusammen mit der Extension calendarfield. Diese Erweiterung benötigt im Frontend die MooTools, sobald ich diese aktiviere läuft TwentyTwenty nicht mehr. Kannst Du Dir das bitte einmal anschauen, Danke.


Außerdem habe ich noch einen Verbesserungsvorschlag zu TwentyTwenty:
Ist es möglich, den Abstand der Trennlinie vom linken Rand über ein Eingabefeld im Backend einzugeben? So wie es jetzt ist muss die Anpassung in der Datei ContentTwentyTwenty.php vorgenommen werden und dann ist die Einstellung für die gesamte Installation gültig. Wenn auf zwei verschidenen Seiten unterschiedliche Abstände benötigt werden ist das nicht möglich.


Danke und viele Grüße

Schmidty

Schaue nach Ostern mal ob das lösbar ist.

Grüße

Hallo,
wollte folgende Erweitewrungen Testen
- count_ce
- flip_ce
- twentytwenty
leider lassen sich diese unter 3.5.8 mit Composer nicht installieren.
(gerade die Erweiterung "twentytwenty" wäre interessant)

Gruß Thomas

Zitat:

---

Zitat von speedweb

leider lassen sich diese unter 3.5.8 mit Composer nicht installieren.

---

Eine genauere Beschreibung als "lassen sich nicht installieren" wäre irgendwie hilfreich. Fehlermeldung?

Sorry hier die Meldung von Composer
Your requirements could not be resolved to an installable set of packages.

Problem 1
- Installation request for sascha-brandhoff/count_ce dev-master -> satisfiable by sascha-brandhoff/count_ce[dev-master].
- sascha-brandhoff/count_ce dev-master requires contao/core >=3.4,<3.5 -> no matching package found.
Problem 2
- Installation request for sascha-brandhoff/flip_ce dev-master -> satisfiable by sascha-brandhoff/flip_ce[dev-master].
- sascha-brandhoff/flip_ce dev-master requires contao/core >=3.4,<3.5 -> no matching package found.
Problem 3
- Installation request for sascha-brandhoff/twentytwenty >=1.0.0.0,<1.1-dev -> satisfiable by sascha-brandhoff/twentytwenty[1.0.0-stable].
- sascha-brandhoff/twentytwenty 1.0.0-stable requires contao/core >=3.4,<3.5 -> no matching package found.

funktionieren die Erweiterungen nur unter 3.4 ?
Was muss angepasst werden dass die Erweiterungen auch unter 3.5.8 funktionieren?

Moinsen Thomas,

okay. Also das sagt mir jetzt so überhaupt nix. Ich habs gestern mit einer 3.5.9 probiert da ging das ganze ohne Probleme. Vielleicht mag einer von den Composer-Cracks sich das mal ansschauen. Ansonsten würde ich Dir empfehlen die Erweiterungen direkt aus dem Git zu ziehen https://github.com/Sascha-Brandhoff?tab=repositories

Grüße

Zitat:

---

Zitat von Schmidty

Hallo,

ich habe twentytwenty Version 1.0.0 Build 2 installiert und zentriert sowie responsive eingebunden. Es sind nur die folgenden CSS-Angeban notwendig:

Code:

---

.twentytwenty-container {
    max-width:100%;
    margin:0 auto;
}

---

Danke und viele Grüße

Schmidty

---

Danke, leider ist das halt nur ein Workaround. Responsive Images wäre da schon schöner.

VG

Zitat:

---

Zitat von Sascha.Brandhoff

Moinsen Thomas,

okay. Also das sagt mir jetzt so überhaupt nix. Ich habs gestern mit einer 3.5.9 probiert da ging das ganze ohne Probleme. Vielleicht mag einer von den Composer-Cracks sich das mal ansschauen. Ansonsten würde ich Dir empfehlen die Erweiterungen direkt aus dem Git zu ziehen https://github.com/Sascha-Brandhoff?tab=repositories

Grüße

---

Hallo Sascha.Brandhoff,
komisch das es bei dir geklappt hat. Du hast (z.B. in der count_ce) in der composer.json festgelegt, das es nicht für contao 3.5 geht ->

Code:

---

"require":{
                "php":">=5.3",
                "contao/core": ">=3.4,<3.5"
        },

---

Da müßte eher das stehen:

Code:

---

"require":{
                "php":">=5.3",
                "contao/core": ">=3.4,<3.6"
        },

---

also kleiner 3.6, damit das auch in Contao 3.5 installiert werden kann.
Wenn du das allerdings als legacy installiert hast (wenn das überhaupt im ER ist), dann wundert es nicht, da dort die Überprüfung nicht richtig gemacht werden kann von Composer.

Viele Grüße

Hallo Sascha,

gibt es schon etwas neues bezüglich twentytwenty und dem Problem mit den MooTools?

Kannst Du meinen Vorschlag von #20 umsetzen?

Danke für die Rückmeldung.

Schmidty

Hi Schmidty,

ich bin akut leider etwas eingebunden. Die CSS-Sache baue ich defintiv ein und nach MooTools schauen werd ich auch aber ich kann aktuell leider keinen Termin nennen :/

Grüße

So Schmidty ist erledigt. Hab den CSS-Selektor hinzugefügt.

Grüße

Zitat:

---

Zitat von Sascha.Brandhoff

So Schmidty ist erledigt. Hab den CSS-Selektor hinzugefügt.

Grüße

---

Vielen Dank für dein count_ce! Wäre es auch möglich, daß der counter startet, sobald er den sichtbaren Bereich der Website erreicht? Ich möchte gern ein div von unten hochfahren lassen (in dem sich dann der counter befindet), wenn ich auf ein Label klicke. Dabei scrolle ich natürlich nicht mit der Mouse, was zur Folge hat, daß der counter nicht startet. Für die Hilfe kann ich mich auch gern erkenntlich zeigen ;-)

danke & schönes WE!

Da der Entwickler Sascha Brandhoff am 15. Oktober verstorben ist wird das wohl nicht möglich sein. Mir ist auch nicht bekannt dass jemand die Erweiterungen fortführt.