search

springers54 / reiki

0 stars 0 forks source link

Bildgrößern auf Übersichtsseiten oder skalieren? #201

Closed springers54 closed 5 years ago

springers54 commented 5 years ago

Warum ist es nicht möglich, auf den Übersichtsseiten die anderen Bildgrößen zu laden? Das sind doch komplett eigene Seiten mit eigenem Code? Die 150er Bilder werden doch auch erstellt vom System und haben gegenüber den normalen Bildern eine einheitliche Kennung, so dass man sie auch programmtechnisch einsetzen kann? Große Bilder zu laden und die dann zu halbieren und das mehrfach auf der Seite wird uns von Google bestimmt nicht als Pluspunkt bewertet, was Ladezeit und Code angehen.

joergsteinhauer commented 5 years ago

Das sind NICHT komplett eigene Seiten.

Es gibt Kategorien (diese können auch weitere Unterkategorien haben), z.b. https://zen-reiki.de/themen/bereich/neues/ - die beinhalten Beiträge, z.b https://zen-reiki.de/bereich/meinung/kein-kommentar-ich-bin-geschockt/.

Dabei werden auf Kategorien (= Übersichtsseite) die sogenannten excerpts (Auszüge) angezeigt. Das sind Daten, die aus den Beiträgen kommen. Es werden also Daten aus Beiträgen rangeholt und in die Übersichtsseiten geladen. Alles, was man im Beitrag sieht, landet dann als Auszug auf der Übersichtsseite. Dabei kommt ja auch automatisch der "weiterlesen" Link, die Bilder, Texte usw... Wie sonst sollte diese Verknüpfung funktionieren? Zumindest ist es die default Einstellung bzw. Implementierung in Templates.

Es kann durchaus sein, dass man heir was machen kann und Templates entsprechend aufbohren. Kenne mich da noch nicht aus und werde jetzt mal nachforschen.

joergsteinhauer commented 5 years ago

Nach kurzer Recherche (und wie es aussieht ist es eine saubere Lösung was Vorschaubilder angeht), gibt es die Variante mit dem "Beitragsbild". Allerdings bin ich unsicher, ob das das richtige für diesen Fall ist.

Man kann pro Beitrag ein "Beitragsbild" setzen: image

Dabei erscheint dieses Bild dann aber auch erstmal überall. Im Beitrag selbst an dieser Stelle: image

Und auf der Übersichtsseite an dieser Stelle: image

Also quasi immer zwischen der Überschrift und dem Content. Nun hätte man dann die Möglichkeit, über CSS pro Seitentyp das Aussehen anzupassen. Also auf der Übersichtsseite das Bild lassen, ausrichten usw. Und im Beitrag zu verstecken.

Da stellt sich dann aber die Frage, was mit dem anderen Bild passiert. Zudem müsste man hier also jeden Beitrag anpassen.

springers54 commented 5 years ago

Wir haben nach Plugin-Lösungen geschaut, sind dabei aber auch noch nicht wirklich weiter gekommen.

Also noch einmal zu den Größen, wie wir sie uns vorstellen: Übersichtsseite Handy Hochformat 100 px Breite Detailseite Handy Hochformat 150 Px Breite

Im Moment sind sie auf den Detailseiten 300 px und auf den Übersichtsseiten 150 px

Vorgehen: Im Moment css und dann nach besseren Lösungen suchen.

joergsteinhauer commented 5 years ago

Eure Vorstellungen sind leider nicht ganz durchdacht. Hier ein Bsp, was passieren würde, wenn man mobile auf der Detailseite das Bild auf 150px beschränkt: image

Lange Texte würden große Löcher in den Textfluß reißen.

Wenn ich richtig verstehe, wollt ihr auf Übersichtsseiten generell immer die Bilder kleiner haben, als auf Detailseiten.

Lösung wäre (und das ist eine Lösung, die ich in anderen Projekten schon mehrmals umgesetzt habe):

Mobile (= bis 800px bildschirmbreite, Sidebar ist unten):

Desktop (= ab 800px bildschirmbreite, Sidebar ist rechts):

Somit müssen die Bilder "in Wirklichkeit" auch als 300px Grafiken vorliegen und eingebunden werden. Die wirkliche Größe hängt davon ab, wie groß die Bilder max. dargestellt werden sollen. Die Größe könnt ihr gern festlegen.

Dabei behandeln wir hier nur die Bilder für Geräte mit 1-facher Pixeldichte (das sind meist Desktop-Rechner). Smartphones haben dagegen vielfache Pixeldichte, dafür braucht man theoretisch die jeweils x-Fache Größe der Bilder. Das gane wird dann in Form der sogenannten "responsive images" implementiert.

Z.b. HTC One hat eine Pixeldichte von 4, damit ein 300px Bild hier knack scharf dargestellt werden kann, müsste das Bild an sich 1200px große sein. Aber praktisch reicht auch ein 600px Bild.

Dafür muss man das Markup etwas anpassen:

Ist-Zustand: <img src="300px.jpg">

Soll-Zustand: <img srcset="300px.jpg 1x, 600px.jpg 2x" src="300px.jpg">

Wordpress erstellt nicht umsonst diverse Bildgrößen beim Hochladen von Bildern in die Mediathek. Genau diese unterschiedlichen Größen verwendet WP bereits an einigen Stellen automatisch, er fügt also die "responsive images" ein.

joergsteinhauer commented 5 years ago

Was ist mit diesem Ticket? Scheint mir in einem anderen tickets bereits erledigt zu sein.