5. Januar 2024

PDF in JPG konvertieren – so kannst du in WordPress ein Thumbnail eines PDFs generieren

Mit folgendem Code, kannst du aus der ersten Seite eines PDFs ein JPG generieren. Z.B. um eine Vorschau des PDFs darzustellen und das PDF zu verlinken. Dieser Code kann z.B. in WordPress in einem LazyBlock-Block verwendet werden. Auch in Kombination mit dem WordPress-Plugin „DearFlip“ lässt sich das Script nutzen. Um die URL des PDFs zu […]

• LazyBlocks
• PHP
• WordPress

30. Dezember 2023

Bootstrap-Layout Text und Bild 50/50

Ein beliebtes Gestaltungselement auf Websites ist die Kombination aus Text und Bild, wobei das Bild die Hälfte der Bildschirmbreite einnehmen soll, der Text aber wiederum innerhalb des Containers bleiben soll. Demo: www.fbnfrtg.de/demo/text-und-bild-50-50.html Hier ist das perfekte Snippet für diesen Zweck: Mobil werden die Elemente gestapelt, wobei das Bild immer vor dem Text dargestellt wird, unabhängig […]

• Bootstrap
• CSS
• Design

30. Dezember 2023

CSS 100vw und das Problem mit der Scrollbar

Die Einheit „vw“ („Viewport Width“) ist sehr praktisch, wenn man ein Element mit CSS bildschirmfüllend darstellen möchte. Das Problem hierbei ist, dass die Scrollbars im Browser, je nach Einstellung und Betriebssystem, automatisch ein- und ausgelblendet werden oder die ganze Zeit sichtbar sind. Dieser Umstand ist im dynamischen Wert „vw“ leider nicht berücksichtigt. Und so kommt […]

• CSS
• JavaScript

29. Dezember 2023

So können Blocks aus dem WordPress-Block-Editor im Code eingefügt werden

Mit der WordPress-Funktion „do_blocks()“ kannst du Blocks aus dem Block-Editor auch im Code, also im Template oder z.B. im Footer einfügen. Dafür benötigst du zuerst den Code des Blocks. Wechsle hierzu im Block-Editor in den Design-Modus und kopiere den Code des gewünschten Blocks in die Zwischenablage. Nachdem du den Code in die Funktion eingefügt hast, […]

• PHP
• WordPress

27. Dezember 2023

So kannst du das Laden von gecachtem JavaScript und CSS verhindern

Dass JavaScript und CSS-Dateien nach einer Änderung im Browser nicht neu geladen, sondern aus dem Cache geladen werden, kann eine nervige Angelegenheit sein. Insbesondere auch auf dem iPhone, auf dem kein „Hard Refresh“ möglich ist. Um den Browser anzuweisen, immer die aktuelle JS uns CSS vom Server zu laden, reicht es einen sich ändernden Parameter […]

• CSS
• JavaScript
• PHP

26. Dezember 2023

Internal Server Error (500) bei der Verwendung von file_get_contents()

Bei vielen Hostern ist „allow_url_fopen“ standardmäßig deaktiviert, weshalb die Verwendung von „file_get_contents()“ einen „Internal Server Error (500)“ erzeugt. Das macht das Crawlen externer Websites, z.B. auch mit simplehtmldom, unmöglich. Die Alternative hierzu lautet: cURL.

• PHP

16. Dezember 2023

WordPress-Plug-in „Shortcodes for Bootstrap Icons“

Mit folgendem WordPress-Plug-in können Bootstrap-Icons via Shortcode im Block-Editor verwendet werden. So wird z.B. aus Optional kann auch noch eine Farbe angegeben werden. Eine Liste aller Icons findet sich auf icons.getbootstrap.com. Das Plug-in setzt voraus, dass Bootstrap-Icons bereits lokal oder per CDN eingebunden sind.

• Download
• WordPress
• WordPress-Plug-in

14. Dezember 2023

Text-Fade-in-Effekt mit CSS und JavaScript

Mit folgendem Snippet lässt sich ein subtiler, schicker Text-Eingangs-Effekt erzielen, der sich insbesondere für große Headlines eignet. Lorem ipsum dolor sit amet constructor Noch mal

• CSS
• HTML
• JavaScript

12. Dezember 2023

Synchronisierte Vorlagen – So kannst du in WordPress Block-Templates erstellen, die automatisch auf jeder Seite geändert werden

Seit noch gar nicht allzu langer Zeit gibt es WordPress das Feature „synchronisierte Vorlagen“. Und dieses Feature ist aus meiner Sicht ein echter Game-Changer. Im Prinzip ist eine „synchronisierte Vorlage“ nicht anderes als eine Zusammenstellung beliebiger Elemente, die im Block-Editor erstellt worden sind. Einmal erstellt, kann ich diese Vorlage auf beliebig vielen Seiten einfügen. Das […]

• WordPress

12. November 2023

So kannst du Logos auf einer Website gleichmäßig darstellen

Endlich habe ich die ultimative Lösung gefunden um Logos auf einer Website darzustellen. Viele Jahre habe ich mit „float“, „margin“, Spacern & Background-Images gearbeitet und das Ergebnis war nicht immer zufriedenstellend. Die CSS-Eigenschaften „display: grid“, „gap“ & „aspect-ratio“ sind hier echte Game-Changer. Mit folgendem Code kannst verschiedenste Logo – egal hoch Hoch oder Querformat – […]

• CSS
• Design
• HTML