Dynamische Timeline

[Volker]

Huhu

angeregt durch den Forumbeitrag viewtopic.php?f=2&t=1997

Hier das fertige Projekt:

Admin Seite: https://www.niederastroth.de/timeline/t ... -admin.php
Login: admin und Passwort: admin
Mobirise Seite : https://www.niederastroth.de/timeline/index.html



Ich habe einen Mobirise Timeline Block genommen und den soweit leer geräumt das der nun seine Daten über ein Javascript mit einer json einliest. Das ganze werde ich auf meiner Seite als komplettes Projekt zur Verfügung stellen, da eine mbrext nicht reicht, weil Scripte in den Seiteneigenschaften Bereich müssen. Dazu werde ich noch ein Video speziell für den Einbau machen ( müssen )
Den Admin Zugang werde ich noch mit einem Passwort versehen

[Volker]

So nun habe ich alles mal ins Zip gepackt.

Anleitung:

Ladet das zip File runter und entpackt es. Folgende Dateien sind vorhanden:
Ordner assets
Ordner tinymce

index.html
timline_admin.php
timline-api.php
project.mobirise



In der Admin ist der Benutzer admin und Passwort auch admin. Das bitte ändern !
tinymcs/ timeline_admin.php und timeline-api.php hoch laden auf euren server

In mobirse improtiert ihr die project.mobirise darin sind neben dem timline Block auch das neue Mega Menü
Ihr könnt dann den timeline und auch das Menü als User Block speichern. Dann habt ihr das immer zur Verfügung.

Beim ersten Aufruf der timeline-api wird ein Ordner data und uploads angelegt auf Euren Server. In data ist dann die DB und in den upload Ordner liegen dann später die Bilder.

Wenn ihr nun die timline_admin.php aufruft habt ihr 6 Beispieleinträge, die könnt ihr ja löschen oder durch eure ersetzen.

In Mobirse kann das Zahnrad nach wie vor für die farbliche Einstellung genutzt werden. Da ändert sich nichts. Allerdings ist die timeline jetzt auch nicht auf 12 Einträge begrenzt, sondern unendlich
Ihr könnt jetzt auch eigene icons SVG nutzen und einfügen.

Hier der Download: https://www.niederastroth.de/dyntimeline.zip

Viel Spaß damit

[struggle]

Hallo Volker,

erst mal, ist richtig schön geworden. Jetzt hab`ich mal eine Frage. Ich nutze Mobirise 4 mit dem Code-Editor und wenn ich Deine vorherigen Ausführungen richtig verstanden habe, wird das bei mir nicht funktionieren. Ist das korrekt ?

[Volker]

Das ist eine gute Frage

Am besten probierst du das mal aus.

Ich sehe gerade der Block den ich da genommen hatte war auch ein M4 Block. Theme Creative M4 - also sollte der doch auch bei Dir laufen.

[Volker]

Falls Du timline und deine index in unterschiedlichen Ordnern hast, bitte das Javascript in den Seiteneigenschaften anpassen. Genau nach dem Schema:

Code: Alles auswählen

<script>
(function() {
    var API = '/timeline/timeline-api.php'; // ← Pfad zur API anpassen falls nötig
var API_BASE = '/timeline/';
    /* ── Daten laden ──────────────────────────────────────────────── */
    fetch(API + '?action=json')
        .then(function(r) { return r.json(); })
        .then(function(data) {
            applyConfig(data.config);
            renderEntries(data.entries);
        })
        .catch(function(err) {
            console.error('Timeline: API nicht erreichbar', err);
        });

    /* ── Config: Titel, Untertitel, Farben ───────────────────────── */
    function applyConfig(cfg) {
        var titleEl    = document.getElementById('tl-title');
        var subtitleEl = document.getElementById('tl-subtitle');
        if (titleEl    && cfg.title)    titleEl.textContent    = cfg.title;
        if (subtitleEl && cfg.subtitle) subtitleEl.textContent = cfg.subtitle;

        if (cfg.reverse_timeline === '1' || cfg.reverse_timeline === true) {
            var c = document.getElementById('tl-container');
            if (c) c.classList.add('reverseTimeline');
        }
    }

    /* ── Einträge rendern – exakte Mobirise-HTML-Struktur ────────── */
    function renderEntries(entries) {
        var container = document.getElementById('tl-container');
        if (!container) return;
        container.innerHTML = '';

        var count = entries.length;

        entries.forEach(function(entry, idx) {
            var isLast    = (idx === count - 1);
            var isReverse = entry.is_reverse;
            var hasSep    = !isLast;

            /* Bild (optional) */
            var imgHtml = '';
            if (entry.image_url) {
                imgHtml = '<img src="' + API_BASE + escAttr(entry.image_url) + '"'
                        + ' alt="' + escAttr(entry.image_alt || '') + '"'
                        + ' loading="lazy"'
                        + ' style="width:100%;border-radius:20px;margin-bottom:1rem;'
                        +          'object-fit:cover;max-height:200px;display:block;">';
            }

            /* Tag / Jahreszahl (optional) */
            var tagHtml = '';
            if (entry.tag) {
                tagHtml = '<span style="display:inline-block;'
                        + 'background:rgba(255,255,255,.18);color:#fff;'
                        + 'border-radius:99px;padding:.1rem .75rem;'
                        + 'font-size:.75rem;font-weight:600;letter-spacing:.04em;'
                        + 'margin-bottom:.6rem;">'
                        + esc(entry.tag) + '</span>';
            }

            /* CSS-Klassen */
            var classes = ['row', 'timeline-element'];
            if (isReverse) classes.push('reverse');
            if (hasSep)    classes.push('separline');

            /* Eintrag bauen */
            var row = document.createElement('div');
            row.className = classes.join(' ');

            /* Icon: Font Awesome oder eigenes SVG */
            var iconInner = (entry.icon && entry.icon.trim().startsWith('<svg'))
                ? '<span class="mbr-iconfont" style="width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:#fff;">' + entry.icon + '</span>'
                : '<span class="' + escAttr(entry.icon) + ' mbr-iconfont"></span>';

            row.innerHTML =
                '<span class="iconsBackground">'
              +     iconInner
              + '</span>'
              + '<div class="col-xs-12 col-md-6 align-left">'
              +     '<div class="timeline-text-content">'
              +         imgHtml
              +         tagHtml
              +         '<h4 class="mbr-timeline-title pb-3 mbr-fonts-style">'
              +             esc(entry.title)
              +         '</h4>'
              +         '<div class="mbr-timeline-text mbr-fonts-style">'
              +             entry.content
              +         '</div>'
              +     '</div>'
              + '</div>';

            container.appendChild(row);
        });
    }

    /* ── Hilfsfunktionen ─────────────────────────────────────────── */
    function esc(str) {
        var d = document.createElement('div');
        d.textContent = str || '';
        return d.innerHTML;
    }
    function escAttr(str) {
        return String(str || '').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
    }

})();
</script>

Funtioniert wie man auf meiner Seite sehen kann: https://www.niederastroth.de/timeline.html

[Tommy Herrmann]

[struggle]

Hab`s probiert in Mobirise 4, geht leider nicht, Mobirise meckert und will die Fünf
Versuch war`s wert