VN .mbrext Generator

Mit diesem Werkzeug erstellst Du aus Deinem vollständigen Block-HTML und dem zugehörigen CSS/LESS eine importierbare .mbrext-Datei. Die Verarbeitung erfolgt lokal in Mobirise.

Code und Einstellungen

• Blockname, Alias, Gruppe und Beschreibung festlegen.
• HTML/Mobirise-Markup in template.html und CSS/LESS in style.less einfügen. Die automatisch erzeugte params.json lässt sich im dritten Reiter prüfen.
• Einen eigenen Begrüßungstext für die Startseite des erzeugten Blocks angeben.
• Optional echte PNG-Dateien als cover.png und thumb.png auswählen. Ohne Auswahl werden PNG-Platzhalter mitgeliefert.

Bilder automatisch importieren – jetzt auch aus Mobirise-Themes

Du musst die Blockbilder nicht mehr einzeln auswählen. Der Schalter „Bilder importieren“ ist beim ersten Öffnen eingeschaltet; Deine Schalterstellung wird gespeichert.

• Ein: Der Generator untersucht das eingefügte HTML und CSS/LESS und übernimmt die darin verwendeten lokalen Bilder automatisch nach components/_images. Nicht verwendete Projekt- und Theme-Bilder bleiben draußen.
• Aus: Verlinkte statische Blockbilder werden durch SVG-Platzhalter ersetzt. Eine Auswahl des Quellordners ist dafür nicht erforderlich. Cover und Thumb lassen sich unabhängig davon weiterhin als PNG auswählen.
• Unter „Projekt-/Quellordner prüfen oder ändern“ siehst Du den erkannten Projektordner. Wenn Mobirise keinen eindeutigen Ordner bereitstellt, wähle dort den Projektordner oder den lokal veröffentlichten Ordner mit assets/images. Alternativ kannst Du seinen vollständigen Pfad eintragen.
• Die Suche berücksichtigt die vollständigen relativen Bildpfade, lokale file:-Adressen und @projectpath-Verweise innerhalb des Quellordners. Es erfolgt keine Suche in anderen Projekten oder anhand ähnlicher Dateinamen.
• Bilder mit gleichen Namen aus unterschiedlichen Unterordnern bleiben getrennt; die Dateinamen im Paket werden bei Bedarf eindeutig ergänzt. Mehrfach verwendete Dateien werden nur einmal verpackt.
• Normale Bilder, Mobirise-Bild- und Hintergrundfelder, Bild-srcset-Angaben, Video-Vorschaubilder und Hintergrundbilder aus CSS/LESS mit url(...) werden berücksichtigt.
• PNG, JPG/JPEG, WebP, GIF, SVG, AVIF, BMP und ICO werden ohne Größenänderung und ohne Neukomprimierung übernommen. Die Pfade im erzeugten Code werden auf ../_images/… angepasst.

Neu in Version 9: Originalbilder der Themes übernehmen

Blöcke dürfen ihre Originalbilder aus einem installierten Mobirise-Theme behalten. Bei eingeschaltetem „Bilder importieren“ werden auch vollständig referenzierte lokale Bilder aus addons/<Theme>/components/_images übernommen – einschließlich Unterordnern wie reflection/image26.jpg.

• Der Generator verwendet den von Mobirise gemeldeten Addons-Ordner und die vollständigen Bildpfade aus dem Code, beispielsweise eine file:///…/addons/reflectionm5/components/_images/reflection/image26.jpg-Adresse.
• Es werden ausschließlich die tatsächlich referenzierten Bilder kopiert. Die Dateien des installierten Themes werden weder verändert noch gelöscht; andere Theme-Dateien werden nicht mit verpackt.
• Projektbilder und Theme-Bilder können im selben Block verwendet werden. Gleichnamige Dateien erhalten bei Bedarf unterschiedliche Namen im Paket.
• Es gibt keine Suche in allen Themes nach ähnlichen oder gleichen Dateinamen. Relative Projektpfade bleiben an den Projektordner gebunden; für Theme-Bilder muss der vollständige lokale Pfad im Code stehen.
• Für ausschließlich vollständig referenzierte Theme-Bilder ist kein Projektordner erforderlich. Fehlt eine Datei oder lässt sich der zuständige Addons-Ordner nicht ermitteln, erscheint weiterhin die Bildprüfung mit der Möglichkeit, Platzhalter zu verwenden.
• Bei ausgeschaltetem Bildimport erhalten auch verlinkte Theme-Bilder SVG-Platzhalter.

Bildpfade prüfen, bevor das Paket entsteht

Über „Bildverweise prüfen“ kannst Du die gefundenen Dateien und ihre Herkunft vorab anzeigen. Beim Erstellen erscheint diese Prüfung automatisch, wenn Dateien fehlen, nicht lesbar sind, außerhalb des Quellordners und der zulässigen Theme-Bildordner liegen oder ein Pfad mehrere unterschiedliche Bilder trifft.

Du kannst dann abbrechen und den Code beziehungsweise Quellordner korrigieren oder ausdrücklich „Mit Platzhaltern erstellen“ wählen. Es wird nie stillschweigend ein mehrdeutiger Treffer übernommen. Bei einem solchen Konflikt zwischen Projekt- und Veröffentlichungsordner kannst Du gezielt den gewünschten Veröffentlichungsordner als Quelle wählen.

SVG-Platzhalter für fehlende Blockbilder

Bei ausgeschaltetem Bildimport sowie nach Deiner Bestätigung für nicht importierbare Bilder erzeugt der Generator ein SVG mit der Beschriftung „Bild-Platzhalter“. Vorhandene HTML-Abmessungen, Pixelmaße im style-Attribut und Maßangaben im Dateinamen wie 1920x1280 bestimmen die Größe. Bestehende Klassen und Layout-Einstellungen bleiben erhalten.

So erstellst Du Dein Paket

1. Das Werkzeug über den runden VN-Knopf am Bildschirmrand öffnen.
2. Metadaten und vollständigen Block-Code eintragen; Cover und Thumb bei Bedarf auswählen. „Bilder importieren“ je nach Bedarf ein- oder ausschalten und den Quellordner prüfen.
3. Einen vorhandenen Zielordner angeben und auf „.mbrext Paket erstellen“ klicken. Bereits vorhandene Pakete werden nur nach Rückfrage überschrieben.
4. Eventuelle Hinweise zu fehlenden Bildern prüfen. Die erzeugte Datei in Mobirise über Erweiterungen → Einlesen/Import auswählen. Eine Warnung für die eigene, nicht offiziell signierte Erweiterung gegebenenfalls mit „Import Anyway“ bestätigen.