Bilder in Jsfiddle

[Gudrun]

Hallo,
ich möchte hier ein Beispiel in Jsfiddle präsentieren. Wie kann ich irgendein IMG oder ICON einbinden, wenn ich noch keine Domain im Internet habe?

[Matthias Scharwies]

Servus!

Hallo,
ich möchte hier ein Beispiel in Jsfiddle präsentieren.

Wie kann ich irgendein IMG oder ICON einbinden, wenn ich noch keine Domain im Internet habe?

Du kannst jederzeit urheberrechtsfreie Bilder von Wikimedia Commons einbinden.

Gehe auf eine Seite, z.B.:

[Edit]: Konkret dieses Bild ist nicht urheberrechtsfrei. Um es zu benutzen, muss Giles Laurent als Urheber genannt werden. Die konkrete Lizenz ist bei Wikimedia Commons angegeben und muss unbedingt beachtet werden!

Deshalb wurde der Link enfernt.

SELF-Wiki: Bilder im Internet: Woher nehmen und nicht stehlen?

[[/EDIT]]

Herzliche Grüße
Matthias Scharwies

[Gudrun]

Danke Matthias!

In dem Beispiel

möchte ich die Seitenüberschrift noch vertikal zentriert neben dem Bild und dem Text "english...". Wie schaffe ich dies und ist das vorhandene Coding optimal?

Gruß

Gudrun

[Matthias Scharwies]

Servus!

Danke Matthias!

In dem Beispiel

möchte ich die Seitenüberschrift noch vertikal zentriert neben dem Bild und dem Text "english...". Wie schaffe ich dies und ist das vorhandene Coding optimal?

Nein, eher nicht. Am Handy sollte alles untereinander sein. Deshalb sollte so etwas wie "Spalte_links" nicht verwendet werden.

<h1>Seitenüberschrift</h1>

<figure>
  <img src="...lion_king_Tryggve.jpg" alt="">
  <figcaption>Bildunterschrift</figcaption>
</figure>

Das kann man dann mit CSS anfangs alles untereinander – bei breiteren Vieports auch nebeneinander positionieren.

Bilder_im_Internet/Bilder_präsentieren

Herzliche Grüße
Matthias Scharwies

[Gudrun]

Das kann man dann mit CSS anfangs alles untereinander – bei breiteren Vieports auch nebeneinander positionieren.

Ich war der Annahme, dass bei schmalen viewports der Text automatisch nach unten rutscht.

Bilder_im_Internet/Bilder_präsentieren

Unter dem Link findet man "In diesem Kapitel lernen Sie, wie Sie Bildergalerien mit HTML und CSS gestalten können".
Das möchte ich doch nicht.

[Matthias Scharwies]

Servus!

Das kann man dann mit CSS anfangs alles untereinander – bei breiteren Vieports auch nebeneinander positionieren.

Ich war der Annahme, dass bei schmalen viewports der Text automatisch nach unten rutscht.

Bilder_im_Internet/Bilder_präsentieren

Unter dem Link findet man "In diesem Kapitel lernen Sie, wie Sie Bildergalerien mit HTML und CSS gestalten können".
Das möchte ich doch nicht.

sorry, die Einleitung müsste überarbeitet werden.

Schau dir dieses Kapitel an:

Bilder_und_Bildunterschriften_nebeneinander

Herzliche Grüße
Matthias Scharwies

[Gudrun]

Schau dir dieses Kapitel an:

Bilder_und_Bildunterschriften_nebeneinander

Das Beispiel sieht bei mir komisch aus. Erstens stehen die Bildtexte im darunterstehenden Bild und nicht direkt unter dem Bild bzw. rechts neben dem Bild. Und die Frage bleibt "Wie bekomme ich die Überschrift rechts neben Bild und Bildtext bei großen viewports?"

Ich habe jetzt im Beispiel

dem h1 display:inline; verpasst. Jetzt steht bei schmalen viewports die Überschrift wie gewünscht unter dem Bild, bei breitem viewport neben dem Bild und Text aber leider nicht vertikal zentriert. Wie kriege ich das noch hin, ohne eine absolute Höhenposition anzugeben?

[Gunnar Bittersmann]

@@Gudrun

Ich habe jetzt im Beispiel

dem h1 display:inline; verpasst. Jetzt steht bei schmalen viewports die Überschrift wie gewünscht unter dem Bild, bei breitem viewport neben dem Bild und Text aber leider nicht vertikal zentriert. Wie kriege ich das noch hin, ohne eine absolute Höhenposition anzugeben?

Mit Flexbox. ☞ Beispiel

Ich bin da mal auf CodePen umgezogen; ich hasse JSFiddle wie die Pest.

Das Mark-up etwas aufgeräumt:

• Der äußere Container ist header, nicht div. Die Sprachangabe lang="de" ist dort, weil’s in CodePen das äußerste Element ist, wo man im HTML-Editor rankommt. Bei dir sollte die Sprachangabe natürlich am Wurzelelement html sein.
• Den Link zur englischen Version hast du völlig richtig in Englisch beschriftet. Der Sprachwechsel sollte aber auch angegeben sein, d.h. lang="en" am a-Element.
• Es macht für Screenreader-Nutzer keinen Sinn, zweimal „English version“ vorgelesen zu bekommen. Das Bild braucht in diesem Fall keinen Alternativtext, also alt="". (Das alt-Attribut muss aber vorhanden sein, sonst würde der Dateiname angesagt werden.)
• Apropos Bild: das wird bei dir kein Löwe sein. Auch nicht drei Löwen. Ich hoffe, es ist auch keine Flagge.
• Das div ums img kann weg, ebenso die spans um „English version“.

Zum CSS:

• header ist eine Flexbox. Durch flex-wrap: wrap rutscht die Überschrift runter, wenn der Viewport so schmal ist, dass sie nicht daneben passt.
• Darin das a-Element ist wiederum eine Flexbox. Bei beiden Flexboxen sorgt align-items: center für die vertikale Zentrierung.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Matthias Scharwies

Du kannst jederzeit urheberrechtsfrie Bilder von Wikimedia Commons einbinden.

Gehe auf eine Seite, z.B.:

File:011_The_lion_king_Tryggve_in_the_Serengeti_National_Park_Photo_by_Giles_Laurent.jpg

… und dort auf "original file"

Nein! Dort auf 192 × 240 pixels.

Über 8 Megabyte für ein klein angezeigtes Bild – das kann nicht dein Ernst gewesen sein. Die kleine Variante mit etwas über 30 Kilobyte ist völlig ausreichend.

🖖 Live long and prosper

[Der Martin]

Hallo,

Du kannst jederzeit urheberrechtsfrie Bilder von Wikimedia Commons einbinden.

nenn es von mir aus Korinthenkackerei - aber zumindest nach deutschem Recht gibt es keine urheberrechtsfreien Medien. Das Urheberrecht hat man automatisch und kann es auch nicht abgeben.

Was du meinst, ist eher "mit einer freien Lizenz", oder "mit dem Recht zur freien Nutzung".

Die deutsche Juristerei unterscheidet sehr genau zwischen Urheberrecht und Nutzungsrecht.

Einen schönen Tag noch
 Martin

[klawischnigg]

Hi there,

Du kannst jederzeit urheberrechtsfrie Bilder von Wikimedia Commons einbinden.

nenn es von mir aus Korinthenkackerei - aber zumindest nach deutschem Recht gibt es keine urheberrechtsfreien Medien.

nenn es von mir aus Korinthenkackerei - aber das trifft nur auf Medien zu, die eine gewisse Schöpfungshöhe erreichen...

[Camping_RIDER]

Aloha ;)

nenn es von mir aus Korinthenkackerei - aber das trifft nur auf Medien zu, die eine gewisse Schöpfungshöhe erreichen...

Stimmt - aber praxisrelevant ist das kaum. Es gibt in der Praxis nur wenig Medien, die nicht ausreichend Schöpfungshöhe für ein Urheberrecht haben. Sowas trifft auf einfachste Piktogramme zu - aber um die geht es wohl eher nicht, wenn man extra nach Wikimedia Commons zum Suchen geht...

Was ich viel konsternierender finde:

Ihr beide seit am Korinthenkacken, aber auf den Elefanten im Raum weist niemand hin:

Das konkret verlinkte Bild ist nicht nur nicht urheberrechtsfrei, es ist sogar nur unter Auflagen nutzbar - es steht unter CC-BY-SA 4.0 und die Verwendung ohne geeignete Attribution (auch das reine Einbinden) kann mit Fug und Recht zu (auch kostenpflichtigen) Abmahnungen führen.

Daher ist die Empfehlung von Matthias hier nicht nur auf Korinthenkacker-Ebene sachlich falsch, sondern geradezu gefährlich nachlässig und sollte auf gar keinen Fall so stehen bleiben.

Und bitte kommt mir jetzt nicht mit "das klagt ja eh keiner ein" - gerade bei professionellen Fotografen, wie der Urheber des verlinkten Bilds einer ist, habe ich genau das schon einmal direkt miterlebt: die Fotografie stand mit CC-BY-SA auf Wikimedia Commons, wurde ohne Attribution verwendet - und mit einer über 100€ teuren Abmahnung sowie strafbewehrter Unterlassungserklärung quittiert.

Also bitte: wenn man sowas verbreitet, dann muss das schon auch wasserdicht sein. So wie es da steht ist es gefährlicher Unfug, dafür auch mein -1.

Fachlich und sachlich richtig wäre der Verweis auf CC0 als tatsächlich freie (=uneingeschränkte) Lizenz (es gibt dafür extra Suchmaschinen, siehe z.B. search.creativecommons.org, die man dann aber auch nach CC0 filtern muss) oder Plattformen mit eigener komplett freier Lizenz, wie z.B. Pixabay.

Grüße,

RIDER

[Auge]

Hallo

Das konkret verlinkte Bild ist nicht nur nicht urheberrechtsfrei, es ist sogar nur unter Auflagen nutzbar - es steht unter CC-BY-SA 4.0 und die Verwendung ohne geeignete Attribution (auch das reine Einbinden) kann mit Fug und Recht zu (auch kostenpflichtigen) Abmahnungen führen.

Fachlich und sachlich richtig wäre der Verweis auf CC0 als tatsächlich freie (=uneigeschränkte) Lizenz

… oder die Beachtung der Lizenzbedinungen der konkreten Bilder.

Das Memory-Spiel für einen gegebenen (mutmaßlich privaten) einmaligen Anlass dürfte unter den Bedingungen von CC-BY-SA machbar sein. Auch die eventuell für einzelne Bilder gestellte Bedingung NC sollte dabei erfüllbar sein, wenn keine (spätere?) wirtschaftliche Verwertung erfolgen soll.

Tschö, Auge

[Camping_RIDER]

Aloha ;)

Fachlich und sachlich richtig wäre der Verweis auf CC0 als tatsächlich freie (=uneigeschränkte) Lizenz

… oder die Beachtung der Lizenzbedinungen der konkreten Bilder.

Das Memory-Spiel für einen gegebenen (mutmaßlich privaten) einmaligen Anlass dürfte unter den Bedingungen von CC-BY-SA machbar sein. Auch die eventuell für einzelne Bilder gestellte Bedingung NC sollte dabei erfüllbar sein, wenn keine (spätere?) wirtschaftliche Verwertung erfolgen soll.

Richtig. Aber Achtung, der Kontext war hier ja nicht gegeben 😉

...und wenn schon das Einbinden des Bilds eine Hürde darstellt ist die korrekte Lizenzangabe mutmaßlich auch eine - noch dazu eine, die halt im Zweifel auch teuer werden kann. Deshalb mein Verweis auf Bildquellen, die tatsächlich keinerlei Angaben erfordern.

Grüße,

RIDER

[Gunnar Bittersmann]

@@Camping_RIDER

Das konkret verlinkte Bild ist nicht nur nicht urheberrechtsfrei, es ist sogar nur unter Auflagen nutzbar - es steht unter CC-BY-SA 4.0 und die Verwendung ohne geeignete Attribution (auch das reine Einbinden) kann mit Fug und Recht zu (auch kostenpflichtigen) Abmahnungen führen.

Danke für den Hinweis. Gleich mal in meinem Beispiel ergänzt.

Normalerweise denke ich dran, Bildautor und Lizenz (CC bei Wikimedia Commons) bzw. Quelle (bei Unsplash) anzugeben. Hier hatte ich einfach Gudruns Vorlage kopiert, mea culpa.

🖖 Live long and prosper

[Matthias Scharwies]

Servus!

@@Camping_RIDER

Das konkret verlinkte Bild ist nicht nur nicht urheberrechtsfrei, es ist sogar nur unter Auflagen nutzbar - es steht unter CC-BY-SA 4.0 und die Verwendung ohne geeignete Attribution (auch das reine Einbinden) kann mit Fug und Recht zu (auch kostenpflichtigen) Abmahnungen führen.

Danke für den Hinweis. Gleich mal in meinem Beispiel ergänzt.

Ja, vielen Dank - ich werde das in meiner Antwort ändern.

Im Wiki wollen wir zukünftig dummy-SVGs nutzen, die konnte ich hier onch nicht vorstellen.

Ich hatte einen Wiki-Artikel analog zu Lorem_ipsum vermisst; es gibt/gab ja auch Lorempixel.

Das lege ich die Tage an.

Herzliche Grüße
Matthias Scharwies

[Rolf B]

Hallo Gudrun,

Wenn es sein ganz bestimmtes Bild sein muss, kannst du auch eine Data-URI daraus machen.

Ich stelle nur gerade erschrocken fest, dass unser zugehörigen Wiki Helferlein kaputt ist 😲

Rolf

[Gudrun]

Ich stelle nur gerade erschrocken fest, dass unser zugehörigen Wiki Helferlein kaputt ist 😲

Schade 😞

[Rolf B]

Hallo Gudrun,

fixed 😀

Rolf

[Gudrun]

Super,

Danke!😀😀😀