Wenn Bilder in einen Artikel oder ähnliches eingefügt werden, haben sie meist maximal dieselbe Breite wie der Fließtext. Wenn die Fotos es hergeben, kann es aber schön aussehen, wenn sie über die Breite des Inhaltsbereiches hinausgehen – in einem einspaltigen Layout beispielsweise bis zu den Rändern des Browserfensters. Hier zeige ich euch, wie ihr das umsetzen könnt – sowohl für Einspalter als auch Websites mit Sidebar.
"Bilder über den Inhaltsbereich hinausgehen lassen" WeiterlesenFür die durch das Plugin German Market erstellten Rechnungen meines Shops nutze ich einen Font den ich nach jedem Plugin-Update erneut integrieren muss, da er nicht standardmäßig in dem Plugin eingebunden ist. Damit ich das nicht (mehr) vergesse, lasse ich mir eine Admin-Notice anzeigen, sobald ein Update für das Plugin verfügbar ist. Das ist nicht besonders schwer und schnell umgesetzt, der komplette Code sieht so aus:
/**
* Display admin notice so I remember uploading the Clavo font after updating German Market
*/
function fbn_german_market_typography_notice() {
$update_plugins_transient = get_site_transient( 'update_plugins' );
if ( $update_plugins_transient->response['woocommerce-german-market/WooCommerce-German-Market.php'] ) {
add_action( 'all_admin_notices', function () { ?>
<div class="notice notice-warning">
<p><strong>Nach dem »German Market«-Update den Clavo-Font für Rechnungen wieder hochladen!</strong></p>
</div>
<?php } );
}
}
add_action( 'admin_init', 'fbn_german_market_typography_notice' );Code-Sprache: PHP (php)Ich übergebe an den admin_init-Hook die Funktion fbn_german_market_typography_notice(). Darin wird zunächst der Wert des Site-Transients update_plugins in einer Variable gespeichert – in diesem Transient sind Infos zu Plugin-Updates gespeichert. Wenn nun $update_plugins_transient->response['woocommerce-german-market/WooCommerce-German-Market.php'] vorhanden ist, dann ist ein Update für das Plugin verfügbar.
In diesem Fall wird eine Admin-Notice ausgegeben (ich nutze hier all_admin_notices, damit es in einer Multisite nicht nur im Netzwerk-Admin angezeigt wird) die mich hoffentlich zukünftig daran erinnert, den Font für die Rechnungs-PDF wieder hochzuladen … 🙂
Für andere Plugins ist der Array-Schlüssel natürlich ein anderer. Ihr könnt euch einfach per var_dump( $update_plugins_transient ); den Inhalt des Transients ausgeben lassen, um den richtigen Schlüssel zu finden.
PS: Mehr zu Admin-Notices gibt es im Beitrag »Admin Notices in Plugin UIs« von Caspar Hübinger.
Lazy Loading wird die Technik genannt, bei der Bilder erst nachträglich geladen werden, wenn sie in den sichtbaren Bereich kommen. So kann die Ladezeit einer Website verringert werden. Wenn diese Technik mit einem Masonry-Grid (Kachel-Layout) zusammentrifft, kann es zu Problemen kommen, da die Bilder bei der Berechnung der Kachelpositionen noch nicht geladen sind. Wie ihr das lösen könnt, zeige ich euch hier.
"Lazy Loading von Bildern in einem Masonry-Grid" Weiterlesen
Initialen (über mehrer Zeilen gehender erster Buchstabe eines Absatzes) sind im Web ein relativ selten genutztes Stilelement, das aber durchaus was hermachen kann. In diesem kurzen Beitrag zeige ich euch, wie ihr sie relativ einfach umsetzen könnt.
"Responsive Initialen erstellen" WeiterlesenSeit WordPress 4.7 können Vorschaubilder für hochgeladene PDF-Dateien erstellt werden. Dafür gibt es allerdings die folgenden drei Voraussetzungen, sonst wird weiterhin nur das PDF-Symbol angezeigt:
Imagick muss bei Uberspace erst installiert werden, ImageMagick und Ghostscript sind vorhanden. Um Imagick nachzurüsten, führt einfach folgenden Befehl in der Shell aus, und ihr könnt euch bei neuen Uploads über PDF-Vorschaubilder freuen:
Code-Sprache: Bash (bash)uberspace-install-pecl imagick
Wenn ihr einen Link oder anderen Text mit einer Unterstreichung versehen möchtet, dann greift ihr vermutlich auf border-bottom zurück, statt text-decoration: underline zu nutzen. Wenn diese Unterstreichung aber zu weit vom Text entfernt angezeigt wird, habt ihr ein Problem (jedenfalls hatte ich das vor Kurzem), denn weiter nach oben lässt sich so ein Rahmen nicht positionieren. Wie ihr das lösen könnt, zeige ich euch in diesem Artikel.
In dem Buch „Adaptive Web Design“ von Aaron Gustafson habe ich kürzlich ein interessantes Beispiel gefunden: Eine Website bekommt ab einem Breakpoint eine zur Schriftgröße relative Breite und gleichzeitig eine zur Viewport-Breite relative Schriftgröße. Das Ergebnis sieht aus, als würde die Site ab diesem Breakpoint gezoomt werden, wenn der Viewport weiter verbreitert wird: Die Elemente werden größer, bleiben aber im Verhältnis genau so, wie sie bei dem Breakpoint waren. Wie ich diese Lösung für meine Website umgesetzt habe, zeige ich euch hier.
"Eine zur Viewport-Breite relative Schriftgröße für meine Website" WeiterlesenGoogle hat vor Kurzem sein neues Logo veröffentlicht und von dieser Neuerung ist auch das Google-Plus-Logo betroffen, das ich hier auf der Website nutze. Im Rahmen des Wechsels habe ich auch gleich den Icon Font durch SVG ersetzt. Hier zeige ich euch kurz, wie ich dabei vorgegangen bin.
"So könnt ihr SVG statt einem Icon Font einsetzen" WeiterlesenEinen Sticky-Footer für eine responsive Website zu erstellen, war für mich bisher immer mit dem Ändern der festen Höhe verbunden, wenn der Inhalt im Footer mehr Höhe braucht. Auf t3n.de habe ich eine Lösung für dieses Problem vorgestellt. Dabei wird mit display:table gearbeitet.
Eine off Canvas Navigation ist normalerweise nicht zu sehen, da sie aus dem sichtbaren Bereich „geschoben“ ist. Sie wird nur nach Klicken einer Schaltfläche sichtbar. Wie du eine solche off Canvas Navigation erstellen kannst, zeige ich hier.
"off Canvas Navigation erstellen" Weiterlesen