Bilder in Textfelder einsetzen
Jedes Bild, dass an beliebiger Stelle im Internet* verfügbar ist, kann durch einfaches Kopieren in ein beliebiges Jimdo-Textfeld eingefügt werden.
*Vorsicht: wird die Quelle gelöscht, ist auch das Bild auf der Jimdo-Seite weg!
- Bilder hochladen (ggf. auf versteckter Unter-Seite)
- Seite mit Bildern im Ansichtsmodus öffnen und Bild in den Zwischenspeicher kopieren (...rechte Maustaste Klick auf Bild = Kontextmenü Bild kopieren)
- Textfeld im Bearbeitungsmodus erstellen
- Bild aus Zwischenspeicher einfügen
Ein auf diese Weise eingefügtes Bild...
Öffnet man das so eingefügte Bild Im html-Modus, kann man sehen, dass es alle vereinbarten Attribute wie Höhe und Breite, Alt-Tag und Title-Tag etc. mitgenommen hat.
Beispiel:
Quell-Code:
<img id="cc-m-imagesubtitle-image-5695921864"
style="width: 95px; height: 90px; display: block; margin-left: auto; margin-right: auto;" title="Kostenlose Jimdo-Seite erstellen!"
src="http://u.jimdo.com/www32/o/s69854fd484825586/img/i330af2f39250bfa9/1349162600/std/
image.png" alt="Kostenlose Jimdo-Seite erstellen!"
name="cc-m-imagesubtitle-image-5695921864" />
TIPP: Die Image-id (hier: id="cc-m-imagesubtitle-image-5695921864") kann gelöscht oder zu Formatierungszwecken über den head-Editor verwendet werden.
Das eingefügte Bild lässt sich im Jimdo-Texteditor wie normaler Text bearbeiten (ausschneiden, verschieben, kopieren, verlinken etc).
Außerdem bekommt es sog. "Anfasser", wenn es markiert wird. Mit diesen kann man sehr bequem die Bildgröße ändern, wenn man vorher im html-Modus die Parameter für "width" und "height" gelöscht hat (!).
TIPP: Durch eine solche händische Grössenänderung werden die Parameter für "width" und "height" vom Jimdo-Editor automatisch wieder hinzugefügt, dann allerdings nicht mehr fixiert, sondern flexibel!
Bildposition (rechts/links) festlegen
Um ein auf oben beschriebene Weise in ein Textfeld eingefügtes Bild (...wie in diesem Absatz) rechts- oder linksbündig neben den Text zu stellen, kann man es entweder in eine Tabelle setzen, oder folgendermaßen vorgehen:
- Bild im Texteditor markieren
- mit einem Klick auf die Schaltflächen für die Ausrichtung "links ausgerichtet" oder "rechts ausgerichtet" dem Bild die gewünschte Position zuweisen
- Im HTML-Modus danach den Randabstand des Bildes einstellen
(style-Anweisung eränzen mit Zusatz "margin: ...;" oder "padding: ...;" )
Erklärung s.h.:
Im Beispiel oben ist der Quellcode des Bildes auf diese Weise folgendermaßen abgeändert worden:
<img id="cc-m-imagesubtitle-image-5695925864"
style="margin: 0 20px; float: left;"
src="https://u.jimcdn.com/www32/o/s69854fd484825586/img/i330af2f39250bfa9/1349162600/std/image.png" alt=""
width="50" height="50" />
PS: keine Anfasser mehr im neuen Jimdo?
Seit dem Creator-Update, mit dem die neuen Designs und das Blog-System eingeführt wurde, gibt es in Text-Elementen für dort eingesetzte Bilder offenbar keine "Anfasser" mehr - mit denen man die Bildgröße ändern konnte. Das ist schade, aber das Problem kann umgangen werden.
Lösung:
Statt in ein Text-Element kann ein Bild auch in ein Tabellenelement eingesetzt werden. In Tabellenfeldern werden für alle eingesetzten Bildelemente Elemente Anfasser generiert!
Die Vorgehensweise ist die Gleiche, wie beim Einfügen der Bilder in Textelemente, und Tabellenelemente können auch als Textelemente benutzt werden, wenn man die Tabelle einfach herauslöscht:
strg/cmd + a = alles markieren
strg/cmd + x = ausschneiden/löschen
Aktualisierung:
Pfade von Bildern in html austauschen
Wenn man auf einer Webseite einen html-Code einsetzen möchte, durch den Bildelemente eingebunden werden, muss man oft im html-Widget-Element den Pfad der Bilder anpassen.
Beispiel:
<a href="/">
<img border="1px solid #666"
onMouseOver="this.src='ico/view.hover.png';"
onMouseOut="this.src='ico/view.png';"
src="ico/view.png"
alt="hover effect"
/>
</a>
Die Pfade der Bilder ico/view.hover.png und ico/view.hover.png wären auszutauschen mit den Pfaden der eigenen Bilder, damit der Code im Jimdo html-Widget funktioniert.
Vorgehensweise:
1. beide Bilder hochladen als Jimdo Standard-Bildelement
2. rechte MT: Klick auf Bild und auswählen "Bildadresse kopieren"
3. Inhalt der Zwischenablage in html einsetzen anstelle von this.src='...'
Beispiel:
<a href="/">
<img style="border: 1px solid #666" onMouseOver="this.src='https://image.jimcdn.com/app/cms/image/transf/dimension=107x10000:format=jpg/path/s69854fd484825586/image/i6ee21f7f1ccc65f6/version/1609864256/image.jpg';" onMouseOut="this.src='https://image.jimcdn.com/app/cms/image/transf/dimension=107x10000:format=png/path/s69854fd484825586/image/i03ff06665419f15e/version/1609864235/image.png';" src="https://image.jimcdn.com/app/cms/image/transf/dimension=107x10000:format=png/path/s69854fd484825586/image/i03ff06665419f15e/version/1609864235/image.png" alt="hover effect" width="80px" height="auto" alt="map" title="Map" />
</a>
Ergebnis: