Support » Allgemeine Fragen » Grafik welche nicht quadratisch ist

  • Gelöst alberts66

    (@alberts66)


    Hallo zusammen,

    ist es möglich Grafiken einzubinden, welche nicht quadratisch sind?

    Plan:
    Ich will eine USA-Landkarte einbinden, bei der jeder Bundesstaat auswählbar ist. Wenn man darauf klickt, öffnen sich Informationen zum jeweiligen Bundesstaat.
    Die Grafik (USA-Landkarte inkl. Unterteilung Bundesstaaten) hab ich bereits als SVG-Grafik erstellt. Frage ist nur ob/wie ich das einbinden kann.

    Vielen Dank für eure Hilfe!

Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)
  • ist es möglich Grafiken einzubinden, welche nicht quadratisch sind?

    In HTML werden Bilder als Block-Element verwendet und damit immer erst einmal als Rechteck eingebunden. Bilder können aber transparente Bereiche haben, womit die Form des Bildes geändert werden kann. Per Cascading Style Sheet besteht die Möglichkeit, Ecken einzeln oder gesamt abzurunden und ein Bild mit vier vollständig abgerundeten Ecken wird als Kreis ausgegeben. Mit CSS-Regeln (Eigenschaft shape) kann der Textumfluss auch an die Form einer Grafik angepasst werden. Aber das wolltest du wahrscheinlich alles gar nicht wissen (selbst wenn du danach gefragt hast). 🙂

    WordPress verweigert zunächst die Verwendung von svg-Grafiken, weil es sich um eine Skript-Datei handelt, die Schadcode enthalten könnte. Möchtest du trotzdem svg-Dateien verwenden, kannst du in der Konfigurationsdatei wp-config.php folgende Zeile einfügen:
    define('ALLOW_UNFILTERED_UPLOADS', true);

    Alternativ kannst du mit dem Plugin Code Snippets auch eine Funktion verwenden, um den Dateityp svg zu erlauben:

    function pix_mime_types( $mimes ) {
      $mimes['svg'] = 'image/svg+xml';
      return $mimes;
    }
    add_filter( 'upload_mimes', 'pix_mime_types' );

    oder du verwendest eines der Plugins, die angeboten werden, z.B. SVG Support.
    (vgl. Was ist eine SVG-Datei

    Eine Anleitung, um aus svg-Grafiken eine Imagemap zu erzeugen und diese einzubinden, würde hier den Rahmen sprengen. Ich verweise deshalb lieber auf ein Tutorial, in dem die Arbeitsschritte recht ausführlich beschrieben werden: Highlighted Areas With Links on Responsive Image for Free (SVG, WP)

    Thread-Starter alberts66

    (@alberts66)

    Wow, erstmal vielen Dank für die ausführliche und kompetente Antwort!

    Ich denke die Umwandlung der Grafik bekomm ich hin. Allerdings hab ich den ersten Teil leider nicht ganz verstanden, wie man Grafiken einbinden kann, welche nicht quadratisch sind und diese dann im Gesamtbild auch noch eine vollständige Landkarte der USA ergeben.
    Kenn mich mit CSS leider nicht wirklich aus.
    Wenn ich das richtig verstehe funktioniert das also nicht mit den Standard-Boardmitteln von WP bzw. einem bestimmten Widget.
    Vermutlich wird das dann für mich leider eher ein Ding der Unmöglichkeit.

    Ich formuliere es nochmal anders:

    • normalerweise werden Bilder als Rechteck (oder Hintergrund) eingebunden
    • wenn du einen Kreis auf transparentem Hintergrund zeichnest und als png-Datei speicherst, wird der in deiner Website auch als Kreis ausgegeben
    • mit eigenen CSS-Regeln kannst du die Ecken abrunden und den Text um Formen fließen lassen
    • svg-Grafiken können in WordPress nur verwendet werden, wenn du die Dateiart ausdrücklich erlaubst
    • eine Imagemap (svg-Grafik mit verlinkten Bereichen) ist zwar möglich, erfordert aber recht viele Anpassungen

    Wenn du im Plugin-Verzeichnis nach Imagemap suchst, bekommst du vier Plugins angeboten. Das Plugin mit den meisten Installationen (4.000) wurde zuletzt vor 6 Jahren aktualisiert. Das dürfte auch damit zu tun haben, dass der Hover-Effekt einer Imagemap auf mobilen Endgeräten (Smartphone, Tablet) nicht funktioniert.

    Ich will eine USA-Landkarte einbinden, bei der jeder Bundesstaat auswählbar ist. Wenn man darauf klickt, öffnen sich Informationen zum jeweiligen Bundesstaat.

    Bei diesen Zeilen dachte ich sofort an Leaflet Map und dessen Erweiterungen 😉 .
    Allerdings hast Du eine SVG-Grafik. Die kann das Plugin laden, aber mit dem Anklicken wird es schwierig. Falls Du mit „Imagemap“ nicht weiter kommst, überlege, ob Du nicht auf geojson umsteigen kannst.

    Hallo,
    Ich bin der Entwickler von SVG Support. Genau aus diesem Grund habe ich mein Plugin entwickelt, um SVG-Grafiken mit eingebetteten URLs in seltsamen Formen zu ermöglichen.
    Ich hoffe, Sie versuchen es.

    @benbodhi
    Danke für die Werbung für das Plugin. Das hilft uns hier allerdings nicht weiter, weil dadurch noch keine Imagemap umgesetzt wird.

    Thread-Starter alberts66

    (@alberts66)

    Die Idee von der Imagemap gefällt mir gut. Hab mir das jetzt mal angesehen und hab das soweit verstanden.
    Bei meiner Recherche bin ich jetzt noch auf das Plugin „Draw Attention“ gestoßen. Eigentlich kostenpflichtig, aber ein Bild kann man kostenlos verwenden.
    Da kann man eigentlich alles bis ins Detail einstellen und ganz einfach per Klick die einzelnen Gebiete auf dem Bild abgrenzen. Das ist eigentlich perfekt für mein Vorhaben.

    Für mobile Endgeräte ist das aber natürlich nicht ganz optimal.

    Sie können die Links in Ihr SVG programmieren und inline rendern, um es in WordPress zu verwenden. Wenn Ihre SVG-Datei wie erwartet funktioniert, wenn Sie sie in Ihrem Browser öffnen, können Sie sie mit meinem Plugin inline rendern. Tut mir leid, wenn ich nicht verstehe, was sie zu tun versuchen.

Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)
  • Das Thema „Grafik welche nicht quadratisch ist“ ist für neue Antworten geschlossen.