Bilder einfügen in Textpassagen

[Dieter53]

Ich hatte bei NOF bei meiner Chronik in einigen Textpassagen Bilder eingefügt. Wie bekomme ich das am besten mit Mobirise hin. Hatte es jetzt mal versucht mit mehreren Blöcken, aber das ist wohl keine gute Lösung.
Gibt es auch Blöcke wo ich das Pluszeichen habe und mehrere Bilder einzufügen?
Vielleicht kann mir einer helfen. Siehe Link:https://angeln.sellstedt.de/Chronik.html

[Tommy Herrmann]

Moin Dieter,

Mobirise basiert ja nun einmal auf vorhandenen Blöcken, die man manchmal nicht so leicht anpassen kann.

Hier habe ich deswegen mal einen einfachen Textblock dennoch händisch mit Bildern versehen und diese Bilder in den fließenden Text eingefügt:

https://www.mobirise-tutorials.com/Lawy ... rticle6-48

Ich habe es auch beschrieben, allerdings nicht besonders detailliert. Wenn es das ist was Du willst, gucke mal ob Du es hinbekommst. Kannst gerne Fragen dazu stellen.

[Volker]

Das ganze kann man auch so gestalten, das man einen vorhandenen Textblock nimmt und dort eben den Bilder Tag einbaut, also den von Mobirise

Beispiel: Der Artikelblock von Mobirise aus dem 5er Theme:

mb51.png

ändert man einfach ab, das z.B. oben und unten ein Bild angezeigt wird:

mb52.png

Dann kann man per Auswahl die Bilder ändern und das wars. Ist es sowas was Du meinst ?

Hier der Codeblock :

Code: Alles auswählen

<section data-bs-version="5.1" class="content5" group="Content">
    <mbr-parameters>
        <header>Size</header>
        <input type="checkbox" title="Full Width" name="fullWidth">
        <input type="range" inline title="Top" name="paddingTop" min="0" max="10" step="1" value="5">
        <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="10" step="1" value="5">
        <input type="range" name="textWidth" title="Width" min="4" max="12" value="6" step="1">

        <header>Show/Hide</header>
        <input type="checkbox" title="Title" name="showTitle" checked>
        <input type="checkbox" title="Subtitle" name="showSubtitle" checked>
        <input type="checkbox" title="Top Image" name="showImage1" checked>
        <input type="checkbox" title="Bottom Image" name="showImage2" checked>

        <header>Images</header>
        <input type="range" title="Image Size (%)" name="imgSize" min="20" max="100" step="5" value="80">

        <header>Background</header>
        <input type="color" title="Color" name="bgColor" value="#ffffff">
    </mbr-parameters>

    <div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
        <div class="row justify-content-center">
            <div class="col-md-12 col-lg-{{textWidth}}">

                <!-- OBENES BILD (austauschbar im Editor) -->
                <div class="image-wrapper mb-4" mbr-if="showImage1">
                    <img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-12-01_102008/assets/images/mbr-1920x1152.jpg" alt="Bild oben" mbr-style="{'width': imgSize + '%'}">
                </div>

                <h3 class="mbr-section-title mbr-fonts-style mb-4" mbr-if="showTitle" data-app-selector=".mbr-section-title" mbr-theme-style="display-2">
                    <b>Article Title</b>
                </h3>

                <h4 class="mbr-section-subtitle mbr-fonts-style mb-4" mbr-if="showSubtitle" data-app-selector=".mbr-section-subtitle" mbr-theme-style="display-5">
                    Enter your subtitle here
                </h4>

                <p class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">
                    You can use content blocks…
                </p>

                <!-- UNTERES BILD (austauschbar im Editor) -->
                <div class="image-wrapper mt-4" mbr-if="showImage2">
                    <img src="../_images/background2.jpg" alt="Bild unten" mbr-style="{'width': imgSize + '%'}">
                </div>

            </div>
        </div>
    </div>
</section>

[Tommy Herrmann]

Volker,

nur zu deiner Info: Jedes Bild lässt sich mit dem Bild-Editor von Mobirise jederzeit ändern — auch solche, die ursprünglich händisch über eine absolute URL eingebunden wurden. Mobirise bezieht sich dabei auf das <img> Tag.

[Dieter53]

Danke erst einmal für die Anworten.
Werde mal ausprobieren.

[Volker]

Volker,

nur zu deiner Info: Jedes Bild lässt sich mit dem Bild-Editor von Mobirise jederzeit ändern — auch solche, die ursprünglich händisch über eine absolute URL eingebunden wurden. Mobirise bezieht sich dabei auf das <img> Tag.

Das Verhalten von Mobirise ist aber neu oder ?? Ich sehe das auch gerade

Dann ist ja noch einfache Bilder in Mobirise zu bringen Einfach mit dem img tag einfügen

[Tommy Herrmann]

nee, glaube nicht, dass das neu ist.

Ich kenne das nicht anders.

[Volker]

nee, glaube nicht, dass das neu ist.

Ich kenne das nicht anders.

Aha und warum hast Du dann so oft die Bilder per URL eingefügt ? Klar ist das ein neues Verhalten, damit kann man ja ganz anders arbeiten wie bis her. Ich kann in jeden Block einfach ein <img src="123.jpg" > einsetzen und kann dann durch draufklicken ein Bild auswählen. Dann hättest Du Dir das mit URL ja sparen können jahrelang



Erklär mir Laien mal warum Du dann sowas machst, wenn es doch schon immer geht ?

Diese Bilder habe ich in ein Verzeichnis "images" mit meinem FTP-Programm auf meinen Server kopiert und dann lediglich auf diese im "Code-Editor" absolut verlinkt:


<!-- Beginn eigene Galerie -->
<div class="column">
<img src="http://www.mobirise-tutorials.com/images/Enten.jpg" alt="Enten" title="Enten" style="width:100%">
</div>
<div class="column">
<img src="http://www.mobirise-tutorials.com/images/Libelle.jpg" alt="Libelle" title="Libelle" style="width:100%">
</div>
<div class="column">
<img src="http://www.mobirise-tutorials.com/images/Luchs.jpg" alt="Luchs" title="Luchs" style="width:100%">
</div>
<div class="column">
<img src="http://www.mobirise-tutorials.com/images/Frucht.jpg" alt="Frucht" title="Frucht" style="width:100%">
</div>
<div class="column">
<img src="http://www.mobirise-tutorials.com/images/Fliege.jpg" alt="Fliege" title="Fliege" style="width:100%">
</div>
<div class="column">
<img src="http://www.mobirise-tutorials.com/images/Spatzen.jpg" alt="Spatzen" title="Spatzen" style="width:100%">
</div>
<!-- Ende eigene Galerie -->

.. und schließlich noch die Anzeige der Bilder, die ich hier mit einer absoluten URL versehen und bereits vorher auf meinen Server kopiert habe, da ja Mobirise von solchen händisch eingebauten Bildern nichts weiß würde es bei einem relativen Link zu einer Fehlermeldung beim Publizieren kommen. Diesen Bereich habe ich in diesen einfachen Textblock kopiert, dort wo sich der Beispieltext befand.

<div class="simpleSlides">
<img class="bildlinks" src="http://www.mobirise-tutorials.com/Lawye ... Fliege.jpg" alt="Fliege" title="Fliege (klick)">
<img class="slides animate-left" src="http://www.mobirise-tutorials.com/Lawye ... ibelle.jpg">
<img class="slides animate-left" src="http://www.mobirise-tutorials.com/Lawye ... Kiefer.jpg">
<img class="slides animate-left" src="http://www.mobirise-tutorials.com/Lawye ... /Luchs.jpg">
<img class="slides animate-left" src="http://www.mobirise-tutorials.com/Lawye ... Hinten.jpg">
</div>

[Tommy Herrmann]

Du - ich kann ja auch nichts dafür, wenn du das noch nie gesehen hast. Das ging schon immer, zumindest seit Mobirise Version 3 im Jahr 2017.

Bitte schreibe doch nicht immer, dass etwas nichts stimmt, nur weil Du es nicht kennst

Die Tatsache, warum ich in vielen meiner Tutorials eine absolute URL verwende liegt in erster Linie daran, dass es für die Benutzer meiner Tutorials so viel einfacher und verständlicher sein kann, die Bilder (auch wenn es dann meine sind) direkt auch in Mobirise auf der Arbeitsseite zu sehen - also unmittelbar nach dem Kopieren meiner Skripte.

Weiterhin gab es früher Probleme mit relativen Pfadangaben in Mobirise, die nicht über den Image-Editor eingepflegt wurden. Diese Bilder hat Mobirise damals nicht gefunden. Das sind die logischen und sehr einfachen Gründe.

[stobi_de]

Ich habe hier ins Menu ein Bild "reingefummelt".
Ja, es ist gefummelt, noch ohne KI.
Da kann ich das Bild allerdings nicht anklicken in Mobi.
Die Seite ist die mit den Waagen: wms-hano.com

Code: Alles auswählen

<div class="row">
                                <div class="col-12 col-lg-6">
                                    <a class="text-black dropdown-item text-primary" href="eichung-eichvorbereitung-waage.php" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">Eichung &amp; Eichvorbereitung</a>
                                    <a class="text-black dropdown-item text-primary" href="kalibrierung-wartung-waage.php" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">Kalibrierung &amp; Wartung</a>
                                    <a class="text-black dropdown-item text-primary" href="instandsetung-reparatur-waage.php" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">Instandsetzung &amp; Reparatur</a><a class="text-black dropdown-item text-primary" href="mietwaagen-inventurwaagen.php" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">Mietwaagen &amp; Inventurwaagen</a><a class="text-black dropdown-item text-primary" href="komplettpakete-waagenservice.php" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">Service-Komplettpakete</a>
                                </div>                        
                                <div class="d-none d-lg-block col-lg-6">
                                    
                                    <div class="img-wrapper" id="myMenuImage">
                                        <img src="file:///D:/InternetProjekte/Hano_V2/assets/images/gewichte-chat500-1.jpg" alt="Waagen reparieren und kalibrieren">
                                    </div>
                                    
                                </div>
                            </div>  

[Volker]

Du siehst mich sprachlos

´
Gerade Du, der immer schreibt das Publizieren mit Mobirise das A und O ist und auch das Beste, erklärst dann in keinem Deiner Tuts, das man wenn man Deine Bilder im Code hat, dann einfach seine eigene mit Klick einfügen kann ???

Willst Du mich für dumm verkaufen ??? Die Bilder liegen doch dann auch da wo sie sollen im assets/image Ordner. Also genau so wie es eigentlich sein soll. Jetzt schreibts Du was von besser für den User ??

Diese Bilder habe ich in ein Verzeichnis "images" mit meinem FTP-Programm auf meinen Server kopiert und dann lediglich auf diese im "Code-Editor" absolut verlinkt:

Ich frage mich, wenn es doch schon immer ging, warum machst Du sowas ?? Das wäre ja Leute verascht wenn Du weißt wie es richtig ginge, aber den Leuten erzählst das die Bilder mit einen FTP Programm auf den Server gelegt werden sollen. Tommy was soll der Mist ??

Wenn es 2017 bereits gegangen wäre wüsste ich das / ich hoffe Frank schreibt auch was dazu oder jemand der auch seit 2017 mit Mobirise arbeitet.

Fakt ist, das wenn ich ein fake img einbaue und dann auf das broken Picture klicke, jedes Bild normal eingefügt wird und auch im assets/image Ordner landet. Und das immer schon - wusste nur keiner ( außer Tommy ) super

Sorry Tommy, aber ich muss lachen

[Volker]

Ich habe hier ins Menu ein Bild "reingefummelt".
Ja, es ist gefummelt, noch ohne KI.
Da kann ich das Bild allerdings nicht anklicken in Mobi.
Die Seite ist die mit den Waagen: wms-hano.com

Ich kann das broken Bild klicken und ein neues wählen. Ohne Probleme - ging doch schon immer Frank

[Tommy Herrmann]

Ich bin gerade unterwegs am Handy.

Bitte halte Dich mal mit deinen etwas dreisten Kommentaren zurück. Lasse Deine Unkenntnis nicht an mir ab. Ich werde mich in meinem Forum nicht beschimpfen lassen.

[Volker]

Das ist dreist :

Bitte schreibe doch nicht immer, dass etwas nichts stimmt, nur weil Du es nicht kennst

Ich glaub ich spinne

[stobi_de]

So Leute, dann mache ich mal den Mediator.

Fangen wir mit einem technischen Teil an:
Also, hier geht das nicht, weil das Bild innerhalb eines Textes liegt.
Mobi erkennt das Bild für die Bearbeitung innerhalb von Mobi mit Doppelklick und Dateiauswahl nicht.
Es wird aber korrekt hochgeladen (dieses ist auch der Fall oben in meinem Beispiel)

Code: Alles auswählen

<h2 class="mbr-section-title mbr-fonts-style" data-app-selector=".mbr-section-title, .title-wrapper" mbr-theme-style="display-1" mbr-if="showTitle"><b>
                        WMS HANO</b> <br><small>Präzision trifft <a href="eichung-eichvorbereitung-waage.php#Eichgesetz" class="text-primary">Leidenschaft<img src="file:///D:/InternetProjekte/Hano_V2/assets/images/gewichte-chat500-1.jpg" alt="Waagen reparieren und kalibrieren"></a></small></h2>

So geht das:

Code: Alles auswählen

<h2 class="mbr-section-title mbr-fonts-style" data-app-selector=".mbr-section-title, .title-wrapper" mbr-theme-style="display-1" mbr-if="showTitle"><b>
                        WMS HANO</b> <br><small>Präzision trifft <a href="eichung-eichvorbereitung-waage.php#Eichgesetz" class="text-primary">Leidenschaft</a></small></h2><img src="file:///D:/InternetProjekte/Hano_V2/assets/images/gewichte-chat500-1.jpg" alt="Waagen reparieren und kalibrieren">

Aber darum geht es ja jetzt nicht.
Euer Umgangston spiegelt den Zeitgeist wieder. Jeder hasst jeden und jedes Gefühl kommt ungefiltert durch. Die asozialen Medien leben davon. Wenn ich jetzt der Forenbetreiber wäre, würde ich Euch beide eine Woche in die Ecke stellen zum Nachdenken.
@Volker: "Willst Du mich für dumm verkaufen" ist ein persönlicher Angriff der nicht adäquat ist.
@Tommy: Auch wenn es Dein Forum ist, so solltest Du als Demokrat auch auf Deiner eigenen Spielwiese mit Kritik umgehen können, die dann aber sachlich formuliert sein muss.

[Volker]

Frank wenn Du mir jetzt auch sagts das es schon immer ging - ok, dann bin ich halt ein Trottel
Ich hab das erst jetzt gemerkt.

Allerdings wenn Tommy das doch weiß oder schon immer wusste, warum schreibt er nicht sofort hier dem Themen Ersteller:

Setz einfach Bilder mit dem img tag rein und gut ist

Hätte ich jetzt so geraten Anscheinend war/ist das ja allgemein bekannt das das geht - nur ich wusste das nicht

[stobi_de]

Ich kritisiere hier vor allem Euer beider Umgangston!
Das ist absolut überflüssig.
====
Und auch ich finde immer wieder Stellen, wo das, so wie von Tommy geschrieben, nicht funktioniert. Wenn man z.B. einen Codeschnipsel benutzt, der seine eigene Verzeichnis-Struktur voraussetzt und man nicht alles umschreiben will.

[Dieter53]

Aua, da habe ich was losgetreten mit meiner Frage.

[stobi_de]

Nö, die Frage war ok, "Willst Du mich für dumm verkaufen ???" war nicht ok.
In die Ecke, 5 Minuten schämen

[Tommy Herrmann]

Kommentare wie „Ich glaub, der liebe Tommy will mich auf den Arm nehmen“, „Das ist ja absolut lächerlich, was du uns da zu erzählen versuchst“ oder „Willst du mich für dumm verkaufen?“ – und noch viele andere abfällige Bemerkungen, nur weil du dich mit Mobirise nicht gut auskennst: Solche Äußerungen solltest du gegenüber anderen nicht machen und schon gar nicht völlig respektlos gegenüber dem Administrator und dem Foreninhaber. Das lasse ich mir nicht gefallen.