Open-Source Web-Design

Verwischte primäre Beitragsbilder in bootScore

/ von Karsten Reincke | Kommentar schreiben

unscharfe Flocken

bootS­core, das Boot­strap-basier­te Word­Press-Star­ter-The­me, kann nur über CSS‑, PHP- und JS-Pro­gram­mie­rung gestal­tet wer­den: Wenn Sie Ihre Web­site desi­gnen wol­len, müs­sen Sie pro­gram­mie­ren. D.h., bootS­core inte­griert Boot­strap rein tech­nisch. Den opti­schen Fein­schliff über­lässt es der pro­gram­mie­ren­den Web-Desi­gne­rin. Ihr fal­len gewiss bootS­cores ver­wisch­te pri­mä­re Bei­trags­bil­der auf, will sagen: die unschar­fen ‘Fea­tured Images’ in den Arti­kel­teasern:

Sie wer­den in die Media-Biblio­thek hoch­ge­la­den, einem Bei­trag zuge­wie­sen und — auf der Ein­zel­sei­te — auto­ma­tisch über dem Text ange­zeigt. Das sieht schick aus und klappt bei bootS­core gut. Zusätz­lich exis­tiert in einem The­me dann meist auch eine Über­sicht aller Bei­trä­ge. Eine Lis­te mit Exzerp­ten, jeweils auf­ge­hübscht durch das je zuge­hö­ri­ge pri­mä­re Bei­trags­bild. Auch das kriegt bootS­core hin.

Aller­dings wer­den die Bil­der hier ver­schwom­men und ver­zerrt ange­zeigt — obwohl sie in der Ein­zel­sicht per­fekt aus­se­hen. Ich muss­te um drei Ecken den­ken, um zu ver­ste­hen, war­um das so sein muss­te. Und um eine Ecke, um die Lösung zu fin­den:

[ de | en ]

Lösung

  • Tra­ge fol­gen­den Kode in Dei­ne functions.php ein:
// crop the medium size images to the defined values exactly
// as it is done for thumbnails
if(false === get_option("medium_crop")) {
  add_option("medium_crop", "1");
} else {
  update_option("medium_crop", "1");
};

Hintergrund

Was also ist das Pro­blem?

Idea­ler­wei­se — so das Netz — wer­den pri­mä­re Bei­trags­bil­der (= ‘Fea­tured Images’) im 16:9 For­mat hoch­ge­la­den, z.B. in den Grö­ßen 1200x628 oder 1280x720. 2 Word­Press berech­net schon beim Hoch­la­den eines Bil­des die ent­spre­chen­den klei­ne­ren Ver­sio­nen 3. Denn so kann es eine Anfra­ge schnel­ler bedie­nen: Es lie­fert eben nicht immer wie­der das eine gro­ße, initi­al hoch­ge­la­de­ne Bild an den Brow­ser (Über­tra­gungs­zeit), damit der es lokal auf die je gewünsch­ten klei­ne­ren Maße her­un­ter-ren­dert (Rechen­zeit). Statt­des­sen hält Word­Press vor­be­rech­ne­te, klei­ne­re Ver­sio­nen zum Abruf bereit. Und es erlaubt Ent­wick­lern, nach der zu einem Frei­raum am bes­ten pas­sen­de Bild­da­tei zu fra­gen und die­se ein­zu­bau­en.

Will ich also eine Lis­te mit den Titeln mei­ner Posts bebil­dern, kann ich mir von Word­Press zu jedem Titel den Pfad zum kleins­ten zuge­hö­ri­gen Bild lie­fern und es dem Titel vor­an­stel­len las­sen. Will ich hin­ge­gen eine Lis­te mit Arti­kel­an­fän­gen ‘teasern’, kann ich Word­Press nach dem Pfad der mit­tel-gro­ßen Datei fra­gen und die­ses dem Bei­trags­an­fang zur Sei­te stel­len las­sen.

Und nun kommt es: Bei dem kleins­ten Thumb­nail­for­mat schnei­det Word­Press die Datei bei der Vor­ab­be­rech­nung qua­dra­tisch zurecht. Bei denen ande­ren behält es von Haus aus die Sei­ten­ver­hält­nis­se bei. So ent­steht bei einem ori­gi­na­len Bild der Grö­ße 1200x628 eine Vor­schau­da­tei der Grö­ße 150x150 (thumb­nail) und eine der Grö­ße 300 x 157 (medi­um). In der Lis­te mit den Arti­kel­an­fän­gen hat bootS­core aber einen qua­dra­ti­schen Platz von — sagen wir — 300 x 300 vor­ge­se­hen. Dort hin­ein passt der Brow­ser das gelie­fer­te Bild ein: Reicht ihm Word­Press die klei­ne Vor­schau­da­tei, rech­net er das Bild von 150x150 auf 300x300 hoch, was es unscharf macht. Sen­det Word­Press ihm dage­gen die mit­tel­gro­ße Vor­schau­da­tei, rech­net der Brow­ser das Bild von 300x157 auf 300x300 um, was es ver­zerrt. Pest oder Cho­lo­rea also! — selbst wenn ich hän­disch alle pri­mä­ren Bild­da­tei­en qua­dra­tisch ange­legt hät­te: Denn dann wäre ja das gro­ße Bild über dem Bei­trag in der Ein­zel­an­sicht ver­zerrt oder ver­wischt wor­den.

Nun woll­te ich die bootS­core Tem­pla­tes nur im Not­fall umpro­gram­mie­ren oder aus­tau­schen. 4 Also blieb nur, Word­Press selbst dazu zu über­re­den, auch das mitt­le­re For­mat qua­dra­tisch zurecht­zu­schnei­den. Und dazu brauch­te ich tat­säch­lich nur über die functions.php einen Para­me­ter umzu­set­zen. 5

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­ring 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. 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. bootS­core, das Boot­strap-basier­te Word­Press-Star­ter-The­me, kann nur über CSS‑, PHP- und JS-Pro­gram­mie­rung gestal­tet wer­den: Wenn Sie Ihre Web­site desi­gnen wol­len, müs­sen Sie pro­gram­mie­ren. D.h., bootS­core inte­griert Boot­strap rein tech­nisch. Den opti­schen Fein­schliff über­lässt es der pro­gram­mie­ren­den Web-Desi­gne­rin. Ihr fal­len gewiss bootS­cores ver­wisch­te pri­mä­re Bei­trags­bil­der auf, will sagen: die unschar­fen ‘Fea­tured Images’ in den Arti­kel­teasern:

    Sie wer­den in die Media-Biblio­thek hoch­ge­la­den, einem Bei­trag zuge­wie­sen und — auf der Ein­zel­sei­te — auto­ma­tisch über dem Text ange­zeigt. Das sieht schick aus und klappt bei bootS­core gut. Zusätz­lich exis­tiert in einem The­me dann meist auch eine Über­sicht aller Bei­trä­ge. Eine Lis­te mit Exzerp­ten, jeweils auf­ge­hübscht durch das je zuge­hö­ri­ge pri­mä­re Bei­trags­bild. Auch das kriegt bootS­core hin.

    Aller­dings wer­den die Bil­der hier ver­schwom­men und ver­zerrt ange­zeigt — obwohl sie in der Ein­zel­sicht per­fekt aus­se­hen. Ich muss­te um drei Ecken den­ken, um zu ver­ste­hen, war­um das so sein muss­te. Und um eine Ecke, um die Lösung zu fin­den:

    [ de | en ]

    Lösung

    • Tra­ge fol­gen­den Kode in Dei­ne functions.php ein:
    // crop the medium size images to the defined values exactly
// as it is done for thumbnails
if(false === get_option("medium_crop"[↩]
  2. Auch im 4:3 For­mat (1200:800) ent­stün­de aller­dings die hier skiz­zier­te Schwie­rig­keit.[↩]
  3. thumb­nail: 150x150, medi­um: <300x<300 und lar­ge: <1024x<1024[↩]
  4. Die vor­be­rei­te­te Viel­falt von bootS­core ist sei­ne Stär­ke.[↩]
  5. was mich natür­lich das Netz gelehrt hat: vgl. stack­over­flow 3454337 [↩]
To top