Weniger verwischte primäre Beitragsbilder

Um die Fal­le ver­zerr­ter Bil­dern zu umge­hen, hat­te ich vor­ge­schla­gen, Word­Press auto­ma­tisch auch qua­dra­ti­sche bootS­core-spe­zi­fi­sche Vor­schau­bil­der der Grö­ße 600x600 gene­rie­ren zu las­sen. Die bootS­core-Tem­pla­tes index.php und archive.php soll­ten mit get_the_post_thumbnail(null, 'bsTeaser') nach die­sen fra­gen, statt nach der Grö­ße medi­um. So wür­den die Bil­der sel­te­ner hoch­ge­rech­net wer­den müs­sen — wir sähen weni­ger ver­wisch­te pri­mä­re Bei­trags­bil­der.

bootScore selbst bie­tet für gro­ße Screens ja nur eine ‘Lösung’ an, bei der 100% aller Bil­der ver­zerrt wer­den. Es fragt bei Word­Press die medi­um-Bil­der¹ an und lässt sie vom Brow­ser in einen qua­dra­ti­schen Platz ein­pas­sen. Nur ist bei den gene­rier­ten Vor­schau­bil­dern der Grö­ße medi­um das Sei­ten­ver­hält­nis des Ori­gi­nals bewahrt wor­den. So wer­den dann recht­ecki­ge Bil­der als Qua­dra­te ange­zeigt. Die Ver­zer­rung ist garan­tiert.

Diskussion

Ich hat­te den Weg auch dem bootS­core-Team ange­bo­ten, über einen Pull­re­quest und eine aus­führ­li­che Begrün­dung. Die Ant­wor­ten waren inter­es­sant. Einig war man sich dar­in, dass der Umgang mit Bil­dern im All­ge­mei­nen eine Auf­ga­be der pro­gram­mie­ren­den bootS­core-Anwen­de­rin sei. Das gel­te ins­be­son­de­re auch die Berei­ni­gung ver­wisch­ter Pho­tos. Auf jeden Fall wür­de die Ein­bin­dung grö­ße­rer Vor­schau­bil­der, wie ich sie vor­ge­schla­gen hät­te, dann auch für Smart­phones gel­ten, deren Per­for­mance beein­träch­ti­gen und damit die SEO her­ab­set­zen.

Der SEO-Hin­weis ist sicher rich­tig. Des­halb hat­te ich ja gera­de nicht vor­ge­schla­gen, die Grö­ße lar­ge zu ver­wen­den. Was ich aber nach wie vor nicht ver­ste­he, war­um eine so wert­vol­le Arbeit wir bootS­core sich auf den ers­ten prak­ti­schen Blick hin schlech­ter dar­stellt, als es müss­te. Ja, wenn man — mit dem ori­gi­na­len bootS­core index.php — die mög­li­chen Fäl­le mit einem Mobi­le Simu­la­tor durch­geht, zeigt sich durch­weg ein gutes Erschei­nungs­bild. Nur eben nicht auf einem Desk­top-Screen der Grö­ße 2560x1440. Genau da wird das mit­tel­gro­ße Bild ‘300x169’ in ein von bootS­core vor­ge­se­he­nes Qua­drat ein­ge­passt — mit grau­en­vol­len Ergeb­nis­sen.² Und wie der Teu­fel es so will: bootS­core selbst demons­triert den Effekt, in sei­ner 5.2.3.1‑Ankündigung

Konsequenz

Also müs­sen wir bootS­core-Anwen­de­rin­nen gera­de bei den ‘Fea­tured Images’ sorg­fäl­tig nach­den­ken und nach­ar­bei­ten. Einen Weg habe ich auf­ge­zeigt. Einen ande­ren hat mir das bootS­core-Team gewie­sen: Ich sol­le doch aus https://github.com/bootscore/bs-loop-templates ein­fach eines als home.php akti­vie­ren, das kei­ne Umrech­nung in ein Qua­drat bewirkt, etwa https://bootscore.me/archives/equal-height-sidebar-right/.³

Und was kann ich sagen: Das sieht gut aus. Noch bes­ser wird es aus­se­hen, wenn ich die nun unpas­sen­den Titel im Tem­p­la­te geän­dert haben wer­de . Und ganz toll sähe das Tem­p­la­te https://bootscore.me/archives/masonry/ aus, wenn — ja wenn — es die­ses auch mit Side­bar gäbe und wenn ich dar­in von the_excerpt() auf the_content() umge­stellt hät­te.

---

Und in welchem Zusammenhang …

… steht das mit unse­rer Migra­ti­on zu bootS­core? Nun, ein­mal ange­fan­gen mit Ver­bes­se­run­gen der Bild­be­hand­lung, wer­den der Web-Desi­gne­rin auch die ver­wisch­ten ‘pri­mä­ren Bei­trags­gil­der’ auf­fal­len. Sie wird Lösun­gen aus­pro­bie­ren und ver­fei­nern. Und sie wird sie u.U. auch mit neu­en HTML‑5 Tech­ni­ken ange­hen. Denn damit wird eine aus­ge­fal­le­ne­re Bild­stra­te­gie samt inte­grier­ter Lizenz­er­fül­lung und das eige­ne Logo erst rich­tig sinn­voll. Wie auch immer: Bil­der brin­gen Far­be ins Lese­le­ben. Zuletzt soll­te all das also auch in ein eige­nes Farb­kon­zept ein­ge­bun­den sein. Zu die­ser The­ma­tik trägt auch die­ser Post etwas bei.

---

Im Übri­gen: Män­ner sind mit­ge­meint.

1. der Grö­ße 300x?? — die Fra­ge­zei­chen ste­hen für den Wert, der bei einer Brei­te von 300 das ori­gi­na­le Sei­ten­ver­hält­nis bewahrt. [↩]
2. Nach Mur­phy wird sich unse­re Kun­din ihre neue Site auf genau so einem Gerät anse­hen. [↩]
3. Die Tem­p­la­te-Alter­na­ti­ven wer­den im bootS­core Down­load-Bereich bereit­ge­stellt. [↩]