Featured Image in WordPress per CSS verstecken

Anknüpfend an den Post “Automatisch, zentriertes Zuschneiden des Featured Image bei WordPress” gibt es natürlich auch die Möglichkeit das Featured Image in WordPress per CSS zu verstecken.

Für das Theme Twenty Sixteen geht das mit folgender CSS zeile

.post-thumbnail { display:none; }

Für die anderen offizielle WordPress Themes findet man die nötigen CSS Einträge auf iiiji.com

Automatisch, zentriertes Zuschneiden des Featured Image bei WordPress

Das original WordPress Theme Twenty Sixteen verwendet ein Featured Image über jedem Blog Eintrag, wenn auch ein Bild gesetzt wurde. Wer nun zu faul ist dieses Bild vorweg zurechtzuschneiden, damit man nicht ewig zum Text scrollen muss, kann sich die Arbeit von etwas CSS abnehmen lassen.

.post-thumbnail {
 max-height: 200px;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 justify-content: center;
}
 
.post-thumbnail img {
 flex-shrink: 0;
}

Dieser CSS Block schneidet das Bild bei der Anzeige auf 200 Pixel zu, zentriert es jedoch zuvor.

Der original Blog Eintrag stimmt von Jan Dembowski.

Ajax Live Search

Wer kennt es nicht – man gibt ein paar Buchstaben in ein Textfeld ein und unter dem Textfeld klappt ein kleines Fenster auf das einem Vorschläge liefert nach was man suchen kann.

Noch schöner ist, wenn man noch genau diese Vorschläge bekommt, für welche man auch wirklich Ergebnisse bekommen kann.

Was braucht man dazu:

Der Artikel von eDevil beschreibt sehr gut wie man vorgehen muss um eine solche Suche aufzubaun und benötigt eigentlich keine weitere Erklärung.

Aufpassen muss man unbedingt wenn man die möglichen Suchwörter direkt aus der Datenbank ausliest.

  • Unbedingt mit LIMIT im SQL Statement arbeiten. Dies bringt für den User zwar nicht alle Möglichkeiten sofort zum Vorschein – erhöht aber die Reaktionszeiten ungemein.
  • DISTINCT sollte man wenn möglich auch im SQL Statement einbauen um nicht doppelte Vorschläge zu bekommen.
  • Wenn man die Anzahl der Suchergebnisse mit LIMIT nicht verringern will, wäre es vielleicht sinnvoll die Suche erst aber zB: dem 3ten eingegeben Zeichen anzufangen.

Beispiel für ein SQL Statement:

SELECT DISTINCT(naam), Id FROM tblName WHERE naam LIKE �??�?�.$_POST[autocomplete].�?�%�?? ORDER BY naam ASC

Technorati Tags: , , , , , , ,

Individuelle Ladeanzeige für Web Applikationen

Wer sich mit Web Applikationen beschäftigt kommt später oder eher früher nicht herum mehr Usability einzubauen. Das heißt neben vielen anderen Dingen auch, dass man die Kommunikation mit seiner Web Applikation und dem User ausbauen muss. Der User muss erfahren was gerade passiert oder warum nichts passiert, wenn er einen Butten klickt.

Hier bringen Ladeanzeigen einen enormen Mehrwert.

Realisieren lässt sich das am einfachsten mit einem animierten GIF oder PNG welches man während des AJAX Calls einblendet und beim Beenden dessen wieder ausblendet. Soweit so simple 😉 aber wo bekommt man solche netten animierten Grafiken her?

Ajaxload – Ajax loading gif generator

Technorati Tags: , , ,

Transparente PNGs auch im IE

Viele kennen vielleicht das Problem das Microsoft es bis jetzt nicht geschafft hat den Alpha Kanal, welcher für die Transparenz von Bildern nötig ist, nativ im Internet Explorer zu verankern. Was Microsoft aber gemacht hat, ist einen Style für CSS einzubauen der nur vom Internet Explorer verstanden wird um so eine stufenlose Transparenz zu erreichen.

Microsoft Style – aber was regt man sich auch darüber auf 😉

Wer wissen will wie das ganze zu machen ist sollt sich einfach dieses Seiten ansehen:

AlphaImageLoader Filter

AlphaimageLoader und relative Pfadangaben

Cross-browser semi-transparent backgrounds

Technorati Tags: , , ,

HTML, CSS, PHP, and More Cheat Sheets [Update]

Wie oft sucht man nicht beim HTML Coden den richtigen Tag oder das richtige Attribut oder fragt sich bei CSS was da nun wie gehört. Man holt dann die dicken Bücher herraus oder sucht im Internet nach einem kleinen Tag. Wär das nicht einfacher wenn man so ein Cheat Sheet hätte?

Lorelle hat uns hier die Arbeit abgenommen. hier klicken

[http://lorelle.wordpress.com/2005/10/10/html-css-php-and-more-cheat-sheets/]

[Update]

Vor mehr als einem halben Jahr hab ich einen netten Link zu Cheat Sheets hier angeführt (s.o.).

Vor einigen Tagen hat auch Dr. Web eine Liste von Cheat Sheets zusammengestellt.