Support » Allgemeine Fragen » Beitragsbilder verkleinert darstellen

  • Gelöst rsieling

    (@rsieling)


    Moin zusammen,

    ich spiele gerade mit den Einstellungen für meine Blog-Seite herum.
    Zu jedem Beitrag habbe ich ein Beitragsbild, welches ich auch scalliert habe auf 150×150.

    Trotzdem wird das Bild mir gefühlt zu groß angezeigt.
    Dann habe ich es mit CSS versucht:

    .snip1550 {
    position: relative;
    overflow: hidden;
    width: 120px;
    font-size: 16px;
    line-height: 1.2em;
    }`

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 16)
  • Moderator Hans-Gerd Gerhards

    (@hage)

    Hallo,
    wenn du dann noch die URL oben einträgst, dann können wir uns das auch ansehen und dir sicher besser helfen. Lies bitte auch noch mal: Bevor du ein neues Thema (Thread) erstellst.
    Viele Grüße
    Hans-Gerd

    Thread-Ersteller rsieling

    (@rsieling)

    Sorry. Ich habe derweilen die Blog-Seite umgebaut.

    Vielleicht könnt ihr mir ja betreffend CSS helfen, dass die Beitrgasbilder zntrisch sitzen.

    Danke

    Blog

    Moderator Hans-Gerd Gerhards

    (@hage)

    Hallo,
    wenn ich mir das von dir genutzte Theme Natural Lite im Repository und in der Demo ansehe, dann vermute ich, dass du die von dir gewünschte Darstellung über Design > Customizer hinbekommen solltest. Das wäre grundsätzlich auch die Option, die man wählen sollte, bevor man mit CSS eingreift.
    Viele Grüße
    Hans-Gerd

    Moderator Angelika Reisiger

    (@la-geek)

    @rsieling

    Wenn du generell alle Beitragsbilder in der Größe 120px x 120px haben willst, dann geh im Backend zu https://www.wildnisteam.de/wp-admin/options-media.php und trag in die Felder Breite und Höhe 120 ein (für Vorschaubilder), dann Änderungen speichern.

    Um anschließend auch die bereits hochgeladenen Bilder entsprechend in dieser Größe anzupassen, hilft dir ein Plugin wie z. B. https://de.wordpress.org/plugins/regenerate-thumbnails/ Vorher solltest du aber ein komplettes Backup der Website erstellen.

    Zum CSS: Wie kommst du auf .snip1550? Und was hat die Schriftgröße mit Bildern zu tun?
    Aber weiter, wenn die Bilder die richtige physische Größe haben, dann wolltest du sie ja noch zentrieren. Trag im Adminbereich unter Design »» Customizer »» Zusätzliches CSS das Folgende ein (ganz ans Ende packen):
     

    .bd-post-image {
        text-align: center;
    }

    Nach dem Abspeichern musst du den Browsercache leeren, drücke dafür CTRL SHIFT Entf gleichzeitig, dadurch wird in den gängigen Browsern ein Fenster zum Löschen geöffnet (weitere Hilfe dazu).

    Solltest du ein Cache-Plugin installiert haben, leere auch diesen Cache. Nun teste auf der Seite, ob du eine Änderung siehst.

    @hage

    Das wäre grundsätzlich auch die Option, die man wählen sollte, bevor man mit CSS eingreift.

    Wieso das? Wenn man etwas mit CSS regeln kann, sprich „mit eigenem CSS steuern kann“, wieso ist der Customizer dann die erste Wahl?

    Moderator Bego Mario Garde

    (@pixolin)

    @la-geek

    Weil eigene CSS-Regeln den Wartungsaufwand erhöhen.
    Wenn du dir die Website nach einen halben Jahr wieder anschaust, musst du erst mal überlegen „wieso habe ich hier eine CSS-Regel verwendet, statt es einfach im Customizer richtig einzustellen?“

    Ich würde die Theme-Einstellungen grundsätzlich bevorzugen, auch weil du bei eigenen CSS-Regeln schnell etwas übersiehst. Da wirkt sich eine Regel, die du wegen einen Anpassung der Startseite eingefügt hast, unbemerkt auch auf die Archive aus oder die Suche wird anders dargestellt … Sowas in der Richtung.

    Moderator Angelika Reisiger

    (@la-geek)

    CSS-Regeln sollte man immer kommentieren und ob sich CSS-Regeln wie auswirken, sieht mal eigentlich sofort, nicht erst nach 6 Monaten.

    Ich persönlich finde eigene CSS-Regeln übersichtlicher (bevor ich da durch etliche sub-sub-Menüpunkte klicken muss) und es hat mir in all den Jahren noch nie Kopfzerbrechen oder Probleme bereitet. Das liegt wohl auch daran, dass ich diese Methode bereits angewandt hatte, bevor der Customizer überhaupt Einzug in WordPress hielt.

    Aber jeder wie er mag, ich würde daraus nur keine Grundsatzregel konstruieren 🙂

    Moderator Bego Mario Garde

    (@pixolin)

    CSS-Regeln sollte man immer kommentieren und ob sich CSS-Regeln wie auswirken, sieht mal eigentlich sofort, nicht erst nach 6 Monaten.

    Wir haben hier oft mit Einsteigern zu tun. Wer selber schon nicht weiß, wie er/sie eine passende CSS-Regel erstellt, um eine gewünschte Änderung umzusetzen, wird das ja nicht auch noch durch einen Kommentar festhalten wollen. 🙂

    Ich persönlich finde eigene CSS-Regeln übersichtlicher

    Dann mach das so.

    ich würde daraus nur keine Grundsatzregel konstruieren

    Musst du auch nicht. Ist trotzdem gängige Praxis.

    Moderator Angelika Reisiger

    (@la-geek)

    Wir haben hier oft mit Einsteigern zu tun. Wer selber schon nicht weiß, wie er eine passende CSS-Regel erstellt, um eine gewünschte Änderung umzusetzen, wird das ja nicht auch noch durch einen Kommentar festhalten wollen. 🙂

    Deswegen war meine Frage ja auch

    Wenn man etwas mit CSS regeln kann, sprich „mit eigenem CSS steuern kann“, wieso ist der Customizer dann die erste Wahl?

    Sollte heißen „Wenn eine CSS-Regel sinnvoll ist“ (eine physische Bildanpassung ist z. B. sinnvoller) und „Wenn man CSS KANN“. Natürlich hast du in dem Punkt recht, dass es (CSS-Regel) für neue User nicht verständlich ist, egal ob mit oder ohne Kommentar.

    Musst du auch nicht. Ist trotzdem gängige Praxis.

    Aber nicht obligatorisch. Neben der „gängigen Praxis“, oder den „persönlichen Präferenzen“ existieren keine technischen Notwendigkeiten oder messbare Performance-Vorteile, denke ich mal.

    Moderator Bego Mario Garde

    (@pixolin)

    Wenn wir Fragen beantworten, richten wir uns üblicherweise nach „Best Practice“. Dazu gehört der Rat, dass eine Einstellungen im Customizer, wenn vorhanden, auch genutzt werden sollte. So habe ich Hans-Gerd verstanden.

    Dass du das anders handhaben kannst, ergibt sich aus den vier Freiheiten der OpenSource-Lizenz: „Du kannst lernen, wie das Programm arbeitet und es so verändern, wie du magst.“ Du möchtest lieber ein eigenes Plugin erstellen und damit ein eigenes Stylesheet einbinden? Kein Problem. Würde ich das hier empfehlen? Eher weniger.

    Aber selbst, wenn es keine technische Notwendigkeit gibt, würde ich doch die Einstellungsoptionen, die ein Theme-Entwickler bereits an die Hand gibt, auch nutzen. Bei einem Multipurpose-Theme, das aus den Customizer-Einstellungen ein eigenes Stylesheet erstellt ergibt sich sogar tatsächlich ein (allerdings kaum messbarer) Performance-Vorteil, weil eine bereits vom Theme erstellte CSS-Regel dann nicht noch extra überschrieben werden muss.


    Übrigens … (Nachtrag)

    Wenn man etwas mit CSS regeln kann, … – Sollte heißen „Wenn man es KANN“.

    Die Betonung war aus deiner Formulierung nicht erkennbar. Etwas mit CSS regeln, kann jeder, der hier eine von uns angegebene CSS-Regel kopiert, einfügt und auf „Veröffentlichen“ klickt. Ob derjenige dann CSS kann, ist eine andere Frage.

    Moderator Angelika Reisiger

    (@la-geek)

    Bei einem Multipurpose-Theme, das aus den Customizer-Einstellungen ein eigenes Stylesheet erstellt ergibt sich sogar tatsächlich ein (allerdings kaum messbarer) Performance-Vorteil, weil eine bereits vom Theme erstellte CSS-Regel dann nicht noch extra überschrieben werden muss.

    Ja, ich sollte mir angewöhnen, exakter zu formulieren „kaum“ messbar, aber das gehört in die Sparte Microbyte-Puristen.

    Allerdings, wenn die Customizer-Einstellung einen eigenen Stylesheet erstellt, dann überschreibt dieser ja selbst wieder etwas oder? Existiert dieser nicht, muss er nicht überschrieben werden (durch eigene Styles). Eigene Styles überschreiben und agieren jedoch exakt wie der Customizer? Ich befürchte, das führt jetzt alles zu weit offtopic.

    Mit den best Practices. Wer sagt, dass der Customizer das unbedingt ist, falls ja, wieso und liegt es nicht eher am Theme oder den Fähigkeiten des Theme-Devs? Aber auch hier befürchte ich, dass wir uns wirklich weit vom Topic entfernen.

    Ich wollte auch nur darauf hinweisen, dass es nicht obligatorisch ist, den Customizer zu nutzen bzw. erfahren, wieso es das sein sollte. Die Meinung, es wäre „Best Practice“ kann ich allerdings akzeptieren (wenn auch nicht unbedingt bejahen) 🙂

    Hallo,
    was nicht alles passiert, wenn man einen Tag unterwegs ist 😁
    Danke, das war eine sehr interessante Diskussion von @la-geek und @pixolin.
    Ich schreibe auch recht häufig eigene CSS-Regeln unter Design > Customizer > Zusätzliches CSS und bin dann manchmal erstaunt, wenn ich dann später feststelle, dass die Einstellung schon im Customizer angeboten wird.
    Daher habe ich mir mittlerweile angewöhnt, tatsächlich erst mal bei den Einstellungen nachzusehen und erst dann falls notwendig eigene CSS-Regeln zu definieren, wenn ich da nichts gefunden habe.
    Um noch mal auf das Ausgangsproblem zurückzukommen: Ich habe das Theme auf einer Testseite installiert und mir die Einstellungen angesehen. Seltsam finde ich bei diesem Theme, dass ich (zumindest auf den ersten Blick) keine Option finden konnte, mit der ich die Gestaltung so wie im Demo bzw. bei dem Beispiel auf der Repository-Seite ersichtlich vornehmen konnte. Das finde ich dann schon etwas seltsam.
    Die CSS-Regeln, die @rsieling genannt hatte, „passen“ in der Tat nicht so zu der Zielvorstellung. Daher habe ich mich dann darum auch erst mal nicht gekümmert, weil CSS ja hier an sich off topic ist.
    Viele Grüße
    Hans-Gerd

    Thread-Ersteller rsieling

    (@rsieling)

    Hier habe ich noch einmal 2 Beispiele.
    Bei dem 1. sind die Bilder in originalgröße.

    Blog-Test_1

    Bei dem 2. sind mir die Bilder zu groß und diese möchtre ich, natürlich wenn möglich, mit einem CSS-Code verkleinern.

    Blog-Test_2

    Ich hoffe, ich konnte es einigermaßen verständlich rüber bringen.

    Versuche es mal im Custom-CSS mit

    #bf_gallery_1 .portfolio_thumbnail {
       width: 50%;
       float: none;
    }
    Moderator Angelika Reisiger

    (@la-geek)

    .bf_thumb_box_1 .snip1550 {
        max-width: 120px;
        margin: 0 auto;
    }

    Bitte beschreib künftig die Problemstellung direkt genauer, damit man nicht an der verkehrten Stelle herumsucht.

    Thread-Ersteller rsieling

    (@rsieling)

    Vielen Dank für die tolle Hilfe.
    Ja, mit dem Beschreiben ist das so eine Sache. Wie erklärt man mit Worten ein Problem ganz genau.
    Jetzt ist es ja dank euch gelöst. Naochmals, vielen Dank.

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 16)