Joomla Modul: CCC Twoclick - nicht responsiv auf Modulposition und in Beiträgen

    Habe jetzt auf einer Webseite das Modul von coolcat-creations (Elisa hiiiiilfe) im Einsatz aber es ist nicht so wie ich es mir vorgestellt habe.

    Diverse Einstellungen im Backend versucht aber komme nicht weiter.


    Problem:

    Ich kann in den Moduleinstellungen nur px für die Höhe eintragen und nicht %. Bei der Breite werden % Angaben (z.B.100%) ohne Probleme akzeptiert. Versucht man nun bei Höhe ebenfalls % anzugeben (z.B. 75%) wird das Youtube Video komplett ausgeblendet. Erst nach Eingabe einer Höhe in px erscheint es wieder.


    Der Effekt ist dann halt so, dass bei kleineren Displays der Text unterhalb des Videos mit dem Button "Anzeigen" sich auf die px Angabe der Bildhöhe bezieht und daher nie direkt unter dem Video erscheint. Noch problematischer ist es bei Einbindung des erstellten Moduls in Beiträgen mittels eigener Modulposition und loadposition.


    Ändere ich dort die % in der Breite, wird die Position zwar angepasst aber rechtsbündig und von links verkleinert.

    Auch hier macht die fehlende %-Angabe für die Höhe viel aus.


    Vielleicht mache ich aber auch irgendwo in den Einstellungen einen Fehler (oder mehrere).

    Könnt Ihr helfen?

    Jemand eine Idee?


    Infos zum Modul hier:

    Programmierung von Joomla Erweiterungen
    Dieses Joomla Modul blendet eine externe iFrame Quelle erst nach Einverständnis des Besuchers ein. Dieses Modul ist beliebt um Datenschutz Anforderungen zu…
    coolcat-creations.com


    Hier mal das bisherige Ergebnis:

    Beispiel im Beitrag: https://www.selbstbestimmung-rlp.de/aktuelles/beitraege

    Beispiel auf Modulposition Startseite links: https://www.selbstbestimmung-rlp.de/


    Einstellungen Modul:


    Ich habe eben bei einer Seite von mir (wo ich das Plugin verwende) die mobile Ansicht getestet und dasselbe Problem, hm... hmm


    Edit: Wenn ich das Video abspiele, dann passt es aber, nur das Platzhalterbild und das Standbild vom Video sehen komisch aus in der mobilen Ansicht, das wird nicht passend skaliert.

    Hm, sorry. Aber jetzt mal frech gefragt: Ihr seid nicht in der Lage, Euch ein paar Zeilen CSS zu basteln, um das responsiv zu bekommen? Ggf. mit einem Override? Höhe in Prozent ist nebenbei schon immer ein "Problem" bzw. sinnfrei in HTML/CSS, wenn die Umgebung nicht stimmt. Gibt ja Bootstrap...

    Deine Frage ist nicht frech sondern absolut gerechtfertigt .

    Es geht nicht darum den Code mit CSS zu überschreiben, das habe ich ja vorhin mit Cover schon gemacht. Problematisch ist dass sich das lokal eingebundene Bild im Frame nicht anpasst. Man sieht halt das Bild wie abgeschnitten. Also bei dem Beitrag vor allen Dingen.

    Wenn ich da ein Logo hinterlege fällt es (fast) niemandem auf aber ich möchte halt das Video-Startbild verwenden und da hänge ich gerade.

    Es gibt nun folgende Lösung:

    Zunächst muss statt dem Textfeld im Modul der Editor aktiviert werden. Dazu geht man via FTP in des Joomla-Verzeichnis unter modules mod_ccctwoclick/mod_ccctwoclick.xml und ändert die Zeile 72 von type="textarea" in type="editor".

    Danach eine Zeile darunter (also 73) hinzufühen und filter="safehtml" einfügen. Wenn dies nicht gemacht wird, werden die HTML-Inhalte im Editor nicht gespeichert. Also unbedingt diese Zeile einfügen.

    Komplett sie es dann so aus:

    Code
    <field
                        name="contentbeforereplacement"
                        label="MOD_CCCTWOCLICK_DISABLED_CONTENT_LBL"
                        desc="MOD_CCCTWOCLICK_DISABLED_CONTENT_DESC"
                        type="editor"
                        filter="safehtml"
                        cols="50"
                        rows="10"
                        default=""
                />

    Jetzt ins Backend und das Modul bearbeiten. Dazu das Hintegrundbild entfernen und im Editir das Hintergrundbild mit Text einfügen.


    Da der ursprüngliche frame noch vorhanden ist, also quasi auf der Seite ein leerer frame angezeigt wird und das im Editor neu angelegte Bild weiter unten, muss noch etwas CSS in der custom.css eingefügt werden. Wichtig ist, dass das richtige Element beim Code angegeben wird.



    Dazu Entwicklertools mit F12 öffnen und mit dem Inspektor auf das leere Feld um die Sektionsbezeichnung sehen zu können, denn die wird gleich benötigt.

    In diesem Fall #ccctc-235.


    Nun in der Custom.css diesen Code einfügen:

    CSS
    #ccctc-235 {
height: 285px;
height: auto !important;
background-color: black;
}

    Der Code ist für jedes weitere Modul wegen der geänderten Sektionsbezeichnung separat einzutragen.

    Wenn Ihr z.B. das Modul kopiert und auf einer anderen Seite an der gleichen Modulposition hinterlegt, ändert sich der Code und Ihr müsst #ccctc-2xx verwenden. Also immer mit dem Inspektor die exakte Bezeichnung ermitteln.



    Ergebis: Hintegrundbild nun responsiv.

    NGS Startseite


    Vielen Dank auch an Elisa für Hinweise zur Lösung.

    Musst du mal bei Elisa nachfragen. Auf Github gibt es dazu nicht viel Neues.

    GitHub - coolcat-creations/mod_ccctwoclick: This module reveals an external iframe only after user click. (2-Click Solution) to respect the privacy of the user.
    This module reveals an external iframe only after user click. (2-Click Solution) to respect the privacy of the user. - GitHub -…
    github.com


    COOLCAT creations · Joomla · Design · Programmierung
    ❤️ Suchen Sie Unterstützung bei Design, Web oder Marketingthemen auf Augenhöhe? ✅ Mit einem Klick sind Sie Ihrem Ziel näher!
    coolcat-creations.com


    In J4 sind wir auf Viktors Plugins umgestiegen:

    2CYV - 2 Click Youtube Videos - Joomla! Plugin
    Mit diesem Plugin lassen sich Youtube Videos einfach und datenschutzkonform in Joomla! Artikeln mit einer einfachen Syntax einbinden! Typ: Plugin - Lizenz:…
    kubik-rubik.de


    Er hat auch ein ganz neues Plugin für IFrames (alle eingebetten IFrames).

    Damit kannst du immer eine Zustimmung vor Ausführung DSGVO konform setzen.

    2CI - 2 Click Iframes