Popup-Bundles u.a. Contao Popups von Bright Cloud Studio

[conter]

Hallo zusammen,

ein Kunde verlangt mal wieder nach einem Popuplayer und das bisher benutzte funktioniert nicht mehr mit 5.3.

Habt ihr mit einem der angebotenen Bundles gute Erfahrungen gemacht und könnt eins empfehlen?

Contao Popups von Bright Cloud Studio hatte ich mal testhalber installiert, habe aber mein Content-Element nicht zum Popup machen können, da stehe ich mit den nötigen Einstellungen etwas auf dem Schlauch.

Vielleicht ja jemand einen Tipp für mich.

Viele Grüße,
conter

[BennyBorn]

Mit dem Bundle hab ich keine Erfahrung aber wenn ein Kunde solche Overlays möchte baue ich sowas immer selbst.
Habe gerade letztens für ein Kundenprojekt wieder ein eigenes Twig-Template für ein Text-Element umgesetzt:

{% extends "@Contao/content_element/text.html.twig" %}

{% block wrapper_tag %}{% if not as_editor_view %}dialog{% else %}{{ parent() }}{% endif %}{% endblock %}

{% set attributes = attrs()
    .addClass('modal-overlay')
%}

{% block script %}

    {% if not as_editor_view %}
    <script>
    (()=>{

        let dialog = document.currentScript.previousElementSibling;


        if( typeof(window.localStorage) !== "undefined" ) {

            let itemName = 'modal-{{ data.id }}';
            let dismissedAt = window.localStorage.getItem(itemName);
            let maxDays = 7;
            let urlFragments = [
                '/no-overlays-here/',
            ];
            let currentUrl = window.location.href;

            {# remove dialog on certain pages #}
            for( let fragment of urlFragments ) {
                if( currentUrl.includes(fragment) ) {
                    dialog.parentNode.removeChild(dialog);
                    return;
                }
            }

            if( dismissedAt ) {

                let currTime = Math.round(new Date().getTime()/1000);

                if( (currTime-dismissedAt) >= (86400*maxDays) ) {
                    window.localStorage.removeItem(itemName);
                } else {
                    dialog.parentNode.removeChild(dialog);
                    return;
                }
            }

            const handleDismiss = function() {
                window.localStorage.setItem(itemName, Math.round(new Date().getTime()/1000));
                dialog.parentNode.removeChild(dialog);
            };

            dialog.addEventListener('click',handleDismiss);
            dialog.showModal();

        } else {

            dialog.parentNode.removeChild(dialog);
        }

    })();
    </script>
    {% endif %}

{% endblock %} 

Ist jetzt in diesem Fall ein modales Overlay welches entsprechend mit dem <dialog>-Element umgesetzt wird (Barrierefreiheit)

[conter]

Danke dir, das probiere ich mal aus

[derRenner]

Danke Benny für den Denkanstoss!

Die Idee weitergesponnen und das Inhaltselement Elementgruppe in Verwendung, eröffnen sich damit ja schier endlose Möglichkeiten

{# /templates/content_element/modalgroup.html.twig #}

{% extends "@Contao/content_element/element_group.html.twig" %}

{% block wrapper_tag %}{% if not as_editor_view %}dialog{% else %}{{ parent() }}{% endif %}{% endblock %}

{% set attributes = attrs()
    .addClass('modal-overlay')
%}

{% block script %}

    {% if not as_editor_view %}
    <script>
    (()=>{

        let dialog = document.currentScript.previousElementSibling;


        if( typeof(window.localStorage) !== "undefined" ) {

            let itemName = 'modal-{{ data.id }}';
            let dismissedAt = window.localStorage.getItem(itemName);
            let maxDays = 1;
            let urlFragments = [
                '/no-overlays-here/',
            ];
            let currentUrl = window.location.href;

            {# remove dialog on certain pages #}
            for( let fragment of urlFragments ) {
                if( currentUrl.includes(fragment) ) {
                    dialog.parentNode.removeChild(dialog);
                    return;
                }
            }

            if( dismissedAt ) {

                let currTime = Math.round(new Date().getTime()/1000);

                if( (currTime-dismissedAt) >= (86400*maxDays) ) {
                    window.localStorage.removeItem(itemName);
                } else {
                    dialog.parentNode.removeChild(dialog);
                    return;
                }
            }

            const handleDismiss = function() {
                window.localStorage.setItem(itemName, Math.round(new Date().getTime()/1000));
                dialog.parentNode.removeChild(dialog);
            };

            dialog.addEventListener('click',handleDismiss);
            dialog.showModal();

        } else {

            dialog.parentNode.removeChild(dialog);
        }

    })();
    </script>
    {% endif %}

{% endblock %} 

... und ab sofort können diverse, unterschiedliche, einzelne oder mehrere Inhaltselemente in der Gruppe ausgewählt, erstellt und modal angezeigt werden

Weiterer Tipp für die 5.7.x
Durch die Möglichkeit des optionalen Titels (Interner Titel) im Backend, kann damit auch das Inhaltselement in der Liste aller anderen Inhaltselement nochmals mit z.B. Mein supertolles Modal gekennzeichnet werden.