Über Web, Tech, Games, Art,
Musik, Code & Design

27. Februar 2023

Eigene Vorlagen für den Gutenberg-Editor erstellen

Der Gutenberg-Editor ist heute die wohl beste Art Website-Content zu bearbeiten. Noch besser ist er, seitdem er die Möglichkeit bietet, Vorlagen zu verwenden. Eine Vorlage, oder auch „Block-Pattern“, ist eine Zusammenstellung an Blocks, wie z.B. Headline, Bild, Text und beliebigen anderen Blöcken. So eine Vorlage lässt sich ganz einfach wie folgt erstellen. 1. Erstelle das […]

26. Februar 2023

Bestimmte Wörter NICHT trennen.

Mit der Einführung von CSS3 vor einigen Jahren war es endlich möglich lange Wörter in Texten automatisch trennen zu lassen. Häufig führt diese Funktion jedoch zu unerwünschten Ergebnissen, insbesondere wenn z.B. Markennamen getrennt werden, die nicht getrennt werden sollen. Das lässt sich mit folgendem JavaScript (& CSS) einfach verhindern:

25. Februar 2023

HTML5-Video-Template

Analog zu dem Script, das ich häufig nutze um Fotos bereitzustellen, nutze ich folgenden Code um Videos abszustimmen oder bereitzustellen: Das Snippet gibt es hier auch als Download: Download Videosnippet

25. Februar 2023

4 praktische .htaccess-Snippets

Die .htaccess-Datei kann verwendet werden, um viele verschiedene Aspekte der Website-Verwaltung zu steuern, z.B. die Umleitung von URLs, die Konfiguration von Caching, die Aktivierung von Kompression, die Anzeige von Fehlermeldungen und vieles mehr. Im Folgenden möchte ich ein paar praktische Anwendungsbeispiele zeigen. Den Inhalt folgender htaccess-Datei nutze ich standard-mäßig auf fast allen Websites – inbesondere […]

23. Februar 2023

Quadratische Thumbs in der WordPress-Bildergalerie

Die Gallery-Funktion in WordPress ist wirklich großartig. Alle Fotos auf einmal per Drag&Drop in den Editor und der WordPress-Magic dabei zuschauen, wie sie daraus eine Galerie zaubert ist super. An den Standard-Einstellungen stören mich allerdings 2 Sachen: Außerdem nutze ich in Bildergalerien gerne quadratische, gecroppte Thumbnails. Eine Möglichkeit das in den Gallery-Settings einzustellen gibt es […]

23. Februar 2023

Download-Links mit passenden Icons

Download-Links können ganz einfach automatisch mit passenden Icons gekennzeichnet werden – ganz ohne PHP oder JavaScript, sondern nur mit CSS. In diesem Beispiel mit Hilfe von Font Awesome.

21. Februar 2023

Icon-Fonts und SVG-Icons

Font AwesomeVor über 10 Jahren wurde Font Awesome veröffentlicht und ist seitdem für die Icons auf Millionen von Websites verantwortlich. Im Jahr 2020 wurde Font Awesome von immerhin auf 38 %(!) der Websites verwendet, die Schriftskripte von Drittanbietern verwenden. Seit fast 7 Jahren (Okt 2017) gibt es jetzt die Version 4.7, die nach wie vor […]

19. Februar 2023

Externe Links in neuem Fenster öffnen

Mit folgendem JavaScript werden alle Links einer Website, die auf einer externe Seite führen, in einem neuen Fenster geöffnet. Fun Fact: Irgendwo habe ich einen ähnlichen Code schon mal eingesetzt. Statt ihn zu suchen, habe ich Chat GPT erneut auf die Probe gestellt. Meine Anfrage lautete: „Erstelle ein Javascript, das bewirkt, dass alle externen Links […]

18. Februar 2023

Bild mit 100% Breite im Bootstrap-Container

Jeder, der mit Bootstrap arbeitet stand bestimmt schon mal vor diesem Problem: Die Breite der Inhalte ist durch den Bootstrap-Container begrenzt, jetzt soll aber ein Bild über die ganze Breite des Bildschirms laufen. Das naheliegende „width: 100%“ bezieht sich auf die Breite des Containers und funktioniert somit natürlich nicht. Und wenn der Image-Container absolut positioniert […]

18. Februar 2023

WordPress-PlugIn „Lazy Blocks“

„Lazy Blocks“ ist ein Gamechanger und ein echtes Must-Have in jedem WordPress-Backend! Klar, der Gutenberg-Editor hat das Bearbeiten von Websites revolutioniert – aber Lazy Blocks ist genau das, was noch gefehlt hat. Mit Lazy Blocks kannst du eigene Blöcke bauen. Und so ein Block kann im Prinzip alles sein: Slider, Kontakt-Box, Accordion, Downloads… also alles, […]

Datenschutz Impressum