webeditor: Bilder und Icons unterschiedlich plazieren per CSS

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ß ...

  1. 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

    --
    Fische, die bellen, beißen nicht.
    1. Hallo,

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

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

      Gruß
      Kalk

    2. 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

      --
      Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
      1. 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.

    3. 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.

  2. 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!

    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

    --
    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    1. @@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

      --
      “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
      1. 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

        --
        "Wenn wir hier nicht gewinnen, treten wir ihnen wenigstens den Rasen kaputt!"
        1. 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

          --
          Fische, die bellen, beißen nicht.
          1. 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

            1. 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

              --
              Fische, die bellen, beißen nicht.
              1. Hallo,

                Aber kontaktlos? Nö.

                Doch.

                Gruß
                Kalk

                Edith ergänzt: Kontakt ist foul

                1. 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

                  --
                  Fische, die bellen, beißen nicht.
                  1. Hallo,

                    Also alles andere als kontaktlos.

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

                    Gruß
                    Kalk

          2. @@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

            --
            “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
            1. 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

              --
              Fische, die bellen, beißen nicht.
            2. 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

              --
              200 ist das neue 35.

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

    2. 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!

      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).

      1. 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

        --
        Fische, die bellen, beißen nicht.
        1. 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

          1. 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.

            1. @@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

              --
              “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
              1. 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

                1. @@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

                  --
                  “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
                2. 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

                  --
                  Fische, die bellen, beißen nicht.
                  1. 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.

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