Bilder und Icons unterschiedlich plazieren per CSS

[webeditor]

Hallo zusammen,

ich stehe hier vor einem kleinen Problem und habe nicht wirklich eine Idee zu einem Lösungsansatz 🙁.

Rahmenbedingungen: Etliche Leute sollen Beiträge für eine interne Informationsseite schreiben. Die Texte kommen in Markdown daher (schon das ist problematisch genug, den Leuten beizubiegen ...).

Hugo wirft dann per entsprechenden Templates die fertigen HTML-Seiten raus.

Im Inhalt können Bilder vorkommen, diese sollen in voller Größe mittig plaziert werden - kein Problem.

Schwierig wird's jetzt, weil in den Texten auch PDF-Dokumente verlinkt werden sollen. Der Transparenz wegen soll den verlinkten Titeln dieser Dokumente jeweils ein pdf-Icon vorangestellt werden.

Das Problem: Wenn ich Bilder mittig auf die Seite positioniere, dann kommen auch die PDF-Icons mittig. Ich kann in markdown eben keine Klassen zuordnen.

Wie kann ich jetzt beispielsweise im CSS definieren, daß

• Bilder bis 64x64px eben icons sind und im Textfluss bleiben
• größere Bilder aber als Bilder, Fotos, Grafiken zu betrachten sind und in voller Größe mittig auf der Seite zu erscheinen haben?

Irgendwie hab ich keine Idee, wonach ich suchen muß ...

[Der Martin]

Hallo,

Etliche Leute sollen Beiträge für eine interne Informationsseite schreiben. Die Texte kommen in Markdown daher (schon das ist problematisch genug, den Leuten beizubiegen ...).

Hugo wirft dann per entsprechenden Templates die fertigen HTML-Seiten raus.

wer ist Hugo? .oO(?)

Wie kann ich jetzt beispielsweise im CSS definieren, daß

• Bilder bis 64x64px eben icons sind und im Textfluss bleiben
• größere Bilder aber als Bilder, Fotos, Grafiken zu betrachten sind und in voller Größe mittig auf der Seite zu erscheinen haben?

An der Bildgröße kannst du dich nicht orientieren, die ist für CSS nicht zugänglich. Aber ein Icon für einen bestimmten Dateityp hat doch wahrscheinlich immer denselben Dateinamen. Da könntest du eventuell mit dem Attributselektor was anfangen:

img[src*="pdf"]
 { /* CSS-Regeln für ein PDF-Icon */
 }

Vielleicht kommst du damit ein Stück weiter ...

Live long and pros healthy,
 Martin

[Tabellenkalk]

Hallo,

Vielleicht kommst du damit ein Stück weiter ...

Noch weiter vermutlich mit einem zusätzlichen ‚not‘…

Gruß
Kalk

[Matthias Scharwies]

Servus!

Hallo,

Etliche Leute sollen Beiträge für eine interne Informationsseite schreiben. Die Texte kommen in Markdown daher (schon das ist problematisch genug, den Leuten beizubiegen ...).

Hugo wirft dann per entsprechenden Templates die fertigen HTML-Seiten raus.

wer ist Hugo? .oO(?)

Im Wiki: Content_Management_System#Alternative:_statische_Homepage-Generatoren

Gerade kleinere Vereine und Webauftritte, die vorher jahrelang Eigenlösungen oder ein gehacktes Wordpress hatten, steigen auf diesen Static Site Generator um.

Der verträgt Markdown, aber auch reines HTML und wandelt das gleich nach dem Hochladen in fertige HTML-Dateien um, die er dann bei jedem Request gleich ausliefern kann. Angeblich ist das schneller, als sich erst aus den Datenbanken die einzelnen Bestandteile zusammenbauen zu müssen.

Herzliche Grüße

Matthias Scharwies

[webeditor]

Im Wiki: Content_Management_System#Alternative:_statische_Homepage-Generatoren

Gerade kleinere Vereine und Webauftritte, die vorher jahrelang Eigenlösungen oder ein gehacktes Wordpress hatten, steigen auf diesen Static Site Generator um.

Der verträgt Markdown, aber auch reines HTML und wandelt das gleich nach dem Hochladen in fertige HTML-Dateien um, die er dann bei jedem Request gleich ausliefern kann. Angeblich ist das schneller, als sich erst aus den Datenbanken die einzelnen Bestandteile zusammenbauen zu müssen.

Genau der ist's. Läuft super. In diesem Fall ist's nicht ganz so kritisch, aber meine anderen Webseiten laufen draußen im echten Internet, und da bin ich ganz froh, daß ich mir nicht dauernd 'n Kopf um Backups und Updates und Sicherheitslücken etc. machen muß. Und schnell ist die Seitenauslieferung tatsächlich.

[webeditor]

An der Bildgröße kannst du dich nicht orientieren, die ist für CSS nicht zugänglich. Aber ein Icon für einen bestimmten Dateityp hat doch wahrscheinlich immer denselben Dateinamen. Da könntest du eventuell mit dem Attributselektor was anfangen:

img[src*="pdf"]
 { /* CSS-Regeln für ein PDF-Icon */
 }

Manchmal sieht man den Wald vor Bäumen nicht. Das setze ich seit Jahren ein, um externe Links zu kennzeichnen. Und zudem war mir nicht geläufig, daß ich damit auch nicht nur am Anfang, sondern auch irgendwo zwischendrin selektieren kann *=.

Besten Dank!! So funzt das tatsächlich und ich kann alle anderen img zentrieren.

[Matthias Scharwies]

Servus!

Hallo zusammen,

ich stehe hier vor einem kleinen Problem und habe nicht wirklich eine Idee zu einem Lösungsansatz 🙁.

Rahmenbedingungen: Etliche Leute sollen Beiträge für eine interne Informationsseite schreiben. Die Texte kommen in Markdown daher (schon das ist problematisch genug, den Leuten beizubiegen ...).

Für schwierigeres Layout kannst du im Hugo auch HTML-Markup verwenden!

• https://gohugo.io/content-management/formats/

Schwierig wird's jetzt, weil in den Texten auch PDF-Dokumente verlinkt werden sollen. Der Transparenz wegen soll den verlinkten Titeln dieser Dokumente jeweils ein pdf-Icon vorangestellt werden.

Irgendwie hab ich keine Idee, wonach ich suchen muß ...

Du kannst in CSS alles selektieren und benötigst keine Klassen.

In diesem Tutorial erhalten zip und mp3-Dateien unterschiedliche Icons:

HTML/Tutorials/Links/Gestaltung_mit_CSS#Links_auf_unterschiedliche_Dokumenttypen_kennzeichnen

Da könntest du vor jeden Link, der auf .pdf endet, ein SVG-Icon tun und das würde nicht als Bild im Markdown, bzw. dann im HTML-Markup erscheinen.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

HTML/Tutorials/Links/Gestaltung_mit_CSS#Links_auf_unterschiedliche_Dokumenttypen_kennzeichnen

Mal reingeschaut, ob … oh, es ist mit type-Attribut umgesetzt, nicht mit Klasse. Klasse!

Ist doch schön, wenn man ein Beispiel im Wiki auch mal loben kann. 😉

😷 LLAP

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

HTML/Tutorials/Links/Gestaltung_mit_CSS#Links_auf_unterschiedliche_Dokumenttypen_kennzeichnen

Mal reingeschaut, ob … oh, es ist mit type-Attribut umgesetzt, nicht mit Klasse. Klasse!

Ist doch schön, wenn man ein Beispiel im Wiki auch mal loben kann. 😉

Danke!

Und jetzt machen wir alle die Rechner aus und schauen "unseren" Jungs beim Spielen zu!

Herzliche Grüße

Matthias Scharwies

[Der Martin]

Hallo Matthias,

Und jetzt machen wir alle die Rechner aus und schauen "unseren" Jungs beim Spielen zu!

spielen? Du meinst dieses komische Spiel, bei dem 20 erwachsene Männer hinter einem Ball herrennen und ihn treten? - Ohne mich, danke. Dem konnte ich noch nie einen Reiz abgewinnen. Weder in jungen Jahren als Spieler, noch später als Zuschauer.
Und dabei ist es mir egal, wer spielt - ich kann mich mit "unseren" Jungs weder persönlich noch durch sowas wie Nationalstolz identifizieren, weil ich so etwas nicht kenne.

Wenn Ballspiel, dann eher schon Basketball. Das hat immerhin noch eine gewisse Ästhetik.

Live long and pros healthy,
 Martin

[Tabellenkalk]

Hallo,

Wenn Ballspiel, dann eher schon Basketball.

Du meinst diese angeblich kontaktlose Mannschaftssportart? Dann lieber Volleyball, da kann man wenigstens nur über die eigenen Mannschaftsglieder stolpern…

Gruß
Kalk

[Der Martin]

Hi,

Wenn Ballspiel, dann eher schon Basketball.

Du meinst diese angeblich kontaktlose Mannschaftssportart?

kontaktlos? - Nein, das ist es ganz gewiss nicht. Basketball war eins der drei Schwerpunktthemen im Sport-Grundkurs in der Oberstufe (die anderen beiden waren Leichtathletik und Turnen). Ich war damals kein wirklich guter Basketballspieler, aber für schulische Maßstäbe ganz okay.

Aber kontaktlos? Nö.

Dann lieber Volleyball, da kann man wenigstens nur über die eigenen Mannschaftsglieder stolpern…

Da ist natürlich was dran. Was die Sache aber nicht weniger unfallträchtig macht.

Live long and pros healthy,
 Martin

[Tabellenkalk]

Hallo,

Aber kontaktlos? Nö.

Doch.

Gruß
Kalk

Edith ergänzt: Kontakt ist foul

[Der Martin]

Hi,

Aber kontaktlos? Nö.

Doch.

"Ein Kontakt ist oftmals nicht zu vermeiden und sollte auch nicht geahndet werden, wenn er als zufällig eingestuft wird."

Also alles andere als kontaktlos. Es liegt im Ermessen des Schiedsrichters, ob ein Körperkontakt als Foul gewertet wird osr nicht. Nach meiner laienhaften Erfahrung: Meistens eher nicht. Aber selbst wenn nicht: Der unerwünschte direkte Körperkontakt war dennoch da.

Edith ergänzt: Kontakt ist foul

Ja. Aber der Schiedsrichter hat das letzte Wort.

Live long and pros healthy,
 Martin

[Tabellenkalk]

Hallo,

Also alles andere als kontaktlos.

Na dann ergänze ich einfach ein „angeblich“ und dann passts...

Gruß
Kalk

[Gunnar Bittersmann]

@@Der Martin

Wenn Ballspiel, dann eher schon Basketball. Das hat immerhin noch eine gewisse Ästhetik.

Bei mir anders. Basketball (und ebenso Handball) geht immer hin und her, da spielt sich alles vor dem Korb (Tor) ab. Nichts zum Zuschauen für mich.

Fußball hingegen geht übers ganze Spielfeld. Für die Spieler heißt das auch, nicht nur möglichst schnell über gesamte Feld vor- bzw. zurückzulaufen. Das macht ein gutes Fußballspiel für mich durchaus ansehenswert.

Auch wenn ich – wie du – dem Nationalstolz und Fangehabe wenig abgewinnen kann. Obwohl ich mich heimlich ein kleines bisschen lokalpatriotisch freue, wenn die Berliner gewinnen. Die rot-weißen, nicht die blau-weißen.

Hatte ich eigentlich das schon erwähnt?

😷 LLAP

[Der Martin]

Hi Gunnar,

Wenn Ballspiel, dann eher schon Basketball. Das hat immerhin noch eine gewisse Ästhetik.

Bei mir anders. Basketball (und ebenso Handball) geht immer hin und her, da spielt sich alles vor dem Korb (Tor) ab. Nichts zum Zuschauen für mich.

beim Handball deckt sich das mit meinem Eindruck. Basketball ist dagegen wesentlich ... ähm, was ist der passende deutsche Ausdruck für versatile? - Okay, vielleicht nicht im Profisport, da habe ich dann doch wenig Einblick; ich denke eher an den Schulsport zurück.

Fußball hingegen geht übers ganze Spielfeld. Für die Spieler heißt das auch, nicht nur möglichst schnell über gesamte Feld vor- bzw. zurückzulaufen. Das macht ein gutes Fußballspiel für mich durchaus ansehenswert.

Ja, okay. Aber genau das ist ein Faktor, der es für mich langweilig macht: Die rennen die meiste Zeit nur rum.

Auch wenn ich – wie du – dem Nationalstolz und Fangehabe wenig abgewinnen kann. Obwohl ich mich heimlich ein kleines bisschen lokalpatriotisch freue, wenn die Berliner gewinnen. Die rot-weißen, nicht die blau-weißen.

Sei dir gegönnt. Aber ich kann es nicht nachvollziehen.

Hatte ich eigentlich das schon erwähnt?

Jetzt ja. 😀

Live long and pros healthy,
 Martin

[Auge]

Hallo

Basketball (und ebenso Handball) geht immer hin und her, da spielt sich alles vor dem Korb (Tor) ab. Nichts zum Zuschauen für mich.

Fußball hingegen geht übers ganze Spielfeld.

Ein (mehr oder minder posthumes) Hoch auf das leider mehr oder minder ausgestorbene Spiel Feldhandball. Das spielte sich auf einem fußballfeldgroßen Spielfeld ab (oft war es auch ein Fußballfeld). Viel Platz, um das Spiel „über das ganze Feld“ zu erstrecken ^[1].

Tschö, Auge

---

1. Nicht, dass das auf dem kleineren Hallenspielfeld nicht ebenso wäre. ↩︎

[webeditor]

Servus!

Hallo zusammen,

ich stehe hier vor einem kleinen Problem und habe nicht wirklich eine Idee zu einem Lösungsansatz 🙁.

Rahmenbedingungen: Etliche Leute sollen Beiträge für eine interne Informationsseite schreiben. Die Texte kommen in Markdown daher (schon das ist problematisch genug, den Leuten beizubiegen ...).

Für schwierigeres Layout kannst du im Hugo auch HTML-Markup verwenden!

• https://gohugo.io/content-management/formats/

Was ich kann, das steht leider nicht zur Debatte :( Ich bin schon froh, wenn die Mitstreiter sich auf markdown mit einem WYSIWIG-Editor einlassen und nicht blind ein Wordpress installieren ohne eine Idee, wie die bereits existierenden hunderte Seiten migriert werden können.

Schwierig wird's jetzt, weil in den Texten auch PDF-Dokumente verlinkt werden sollen. Der Transparenz wegen soll den verlinkten Titeln dieser Dokumente jeweils ein pdf-Icon vorangestellt werden.

Irgendwie hab ich keine Idee, wonach ich suchen muß ...

Du kannst in CSS alles selektieren und benötigst keine Klassen.

In diesem Tutorial erhalten zip und mp3-Dateien unterschiedliche Icons:

HTML/Tutorials/Links/Gestaltung_mit_CSS#Links_auf_unterschiedliche_Dokumenttypen_kennzeichnen

Da könntest du vor jeden Link, der auf .pdf endet, ein SVG-Icon tun und das würde nicht als Bild im Markdown, bzw. dann im HTML-Markup erscheinen.

Das ist wirklich ein guter Ansatz, allerdings nicht .pdf am Ende, sondern enthalten als Bedingung (gelegentlich könnte ein dateiname.pdf#page=12 oder sowas auftauchen).

[Der Martin]

Hallo,

Da könntest du vor jeden Link, der auf .pdf endet, ein SVG-Icon tun und das würde nicht als Bild im Markdown, bzw. dann im HTML-Markup erscheinen.

Das ist wirklich ein guter Ansatz, allerdings nicht .pdf am Ende, sondern enthalten als Bedingung (gelegentlich könnte ein dateiname.pdf#page=12 oder sowas auftauchen).

das hatte ich doch kurz nach fünf schon vorgeschlagen.

Live long and pros healthy,
 Martin

[MudGuard]

Hi,

das hatte ich doch [kurz nach fünf schon vorgeschlagen]

Nein. Du wolltest die img formatieren. Matthias braucht für die pdf-Links keine img-Elemente, weil er das PDF-Icon per CSS direkt ins a-Element reinsetzt.

cu,
Andreas a/k/a MudGuard

[webeditor]

ist das nicht dasselbe, was Martin hier geschrieben hatte:

An der Bildgröße kannst du dich nicht orientieren, die ist für CSS nicht zugänglich. Aber ein Icon für einen bestimmten Dateityp hat doch wahrscheinlich immer denselben Dateinamen. Da könntest du eventuell mit dem Attributselektor was anfangen:

img[src*=".pdf"]
 { /* CSS-Regeln für ein PDF-Icon */
 }

sorry - nein ist nicht dasselbe. Denn:

img[src*=".pdf"]
  { /* CSS-Regeln für ein PDF-Icon */
  }

ist nicht dasselbe wie

a[href*=".pdf"] 
  { /* CSS-Regeln für ein PDF-Icon */
  }

und letzteres hab ich tatsächlich eingebaut.

[Gunnar Bittersmann]

@@webeditor

a[href*=".pdf"] 
  { /* CSS-Regeln für ein PDF-Icon */
  }

und letzteres hab ich tatsächlich eingebaut.

Hm, der Selektor matcht auch auf <a href="mein.pdf-erklärvideo.mp4">.

Besser wäre wohl zu kucken, ob .pdf am Ende oder .pdf# irgendwo auftaucht:

a[href$=".pdf"], a[href*=".pdf#"] { … }

😷 LLAP

[kai345]

printf('Hallo %s!', ['Du', 'ihr', 'Welt', 'zusammen'][rand(0, 3)]);

Hm, der Selektor matcht auch auf <a href="mein.pdf-erklärvideo.mp4">.

Besser wäre wohl zu kucken, ob .pdf am Ende oder .pdf# irgendwo auftaucht:

a[href$=".pdf"], a[href*=".pdf#"] { … }

Sollte an dieser Stelle nicht zusätzlich ein Fragezeichen (eventuelle Parameter) einbezogen werden?

/K

[Gunnar Bittersmann]

@@kai345

a[href$=".pdf"], a[href*=".pdf#"] { … }

Sollte an dieser Stelle nicht zusätzlich ein Fragezeichen (eventuelle Parameter) einbezogen werden?

Wenn das auch ein möglicher use case ist, ja.

😷 LLAP

[Der Martin]

Hallo Kai,

a[href$=".pdf"], a[href*=".pdf#"] { … }

Sollte an dieser Stelle nicht zusätzlich ein Fragezeichen (eventuelle Parameter) einbezogen werden?

prinzipiell ein guter Gedanke - aber ist das ein realistischer Use Case? Gibt es PDF-Viewer oder entsprechende Browser-Plugins, die URL-Parameter interpretieren? Da ist mir zumindest nichts bekannt (was aber nichts heißen muss).
EDIT: Ah, ich sehe gerade, dass Gunnar das auch schon bejaht und in Frage gestellt hat.

Live long and pros healthy,
 Martin

[webeditor]

a[href$=".pdf"], a[href*=".pdf#"] { … }

hmm ... .pdf am Ende oder .pdf# irgendwo ... scheint mir eine gute Kombi zu sein und besser als das, was ich gestern eingebaut hatte.

prinzipiell ein guter Gedanke - aber ist das ein realistischer Use Case? Gibt es PDF-Viewer oder entsprechende Browser-Plugins, die URL-Parameter interpretieren? Da ist mir zumindest nichts bekannt (was aber nichts heißen muss).

In Firefox und Chrome (Standard-Browser in der Firma) funzt das jedenfalls sehr zuverlässig. Ist Klasse, wenn man den Leser gleich auf die richtige Seite schubsen kann, ohne langen Text dazu schreiben zu müssen, wo er was findet.

[webeditor]

👍 und genau so hab ich das ja auch gemacht ... Danke!!