kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Bilder & Grafiken


Automatisches CSS-Styling von WordPress-Bildergalerien deaktivieren

Wordpress Bildergalerie

Wenn ihr in WordPress eine Bildergalerie einfügt, erzeugt das System automatisch einen <style>-Abschnitt im <head> der Seite und fügt einige CSS-Gestaltungsangaben hinzu. Unter anderem wird die Breite der Bilder berechnet und per CSS angegeben, je nachdem wie viele Spalten ihr beim Anlegen der Bildergalerie für die Bilddarstellung festgelegt habt. Wenn ihr im Backend drei Spalten gewählt habt, berechnet WordPress beispielsweise circa 33% Spaltenbreite. Da dieses automatische Styling häufig nicht gewünscht ist, lässt es sich über die functions.php deaktivieren.

Beitrag zu Ende lesen

SVG mit PNG-Fallback

Das Dateiformat SVG (Scalable Vector Graphic) ist die Zukunft der Grafikformate im Web. Sofern sich SVG gestalterisch anbietet, überzeugt das Vektor-Format mit brillanter Bildqualität auf allen Displaytechnologien (z. B. Retina/HiDPI), stufenloser Skalierbarkeit und verhältnismäßig geringer Dateigröße.
Leider wird SVG in älteren Browsern (< IE8) nicht unterstützt. Bis diese Browser an Relevanz verloren haben, muss also eine Übergangslösung her. Mit Hilfe von Modernizr lässt sich ohne Schwierigkeiten ein sehr wartungsfreundlicher PNG-Fallback herstellen.

Beitrag zu Ende lesen

SVG-Dateien in die WordPress-Mediathek hochladen

Das Grafikformat SVG (Scalable Vector Graphics) erfreut sich dank hochauflösender Displays und einem zunehmend flexiblen, Performance optimiertem Webdesign größter Beliebtheit. SVG-Dateien lassen sich verlustfrei skalieren und haben eine verhältnismäßig geringe Dateigröße. Schade nur, dass die WordPress-Mediathek den Upload dieses Dateiformats bisher verbietet. Mit einer kleinen Anpassung an der functions.php behebt ihr dieses Problem.

Beitrag zu Ende lesen

Schnellerer PNG-, JPG- und Base64-Export aus Photoshop – Enigma64

Moderne Websites nutzen unterschiedliche Lösungen um grafische Elemente darzustellen. Neben klassischen Bildformaten wie JPG und PNG werden auch Grafiken auf Basis von CSS3-Code und Base64-Code immer populärer. Welche Variante sich am ehesten anbietet muss je nach Motiv entschieden werden.
Im heutigen Workflow arbeiten wir parallel an Design und Code einer Website und springen regelmäßig zwischen Photoshop und Code-Editor hin und her. Mit Enigma64 haben die Macher von CSS Hat nun ein weiteres Photoshop-Plugin veröffentlicht, dass unsere Arbeit spürbar beschleunigt. Ich habe eine Lizenz zur Verfügung gestellt bekommen und möchte euch das Tool gerne vorstellen.

Beitrag zu Ende lesen