Wie kann ich die Bildgröße in Artikel und in Blogansicht ändern bzw. anpassen

moellerchen · 30. April 2020

Hallo liebe Joomla Community,

ich habe eine Frage zu einem Thema, dass mich als etwas unerfahrenen Joomla User schon seit einiger Zeit beschäftigt und ich bekomme es nicht wirklich gelöst.

Ich habe eine Seite: http://www.conzoomrecords.com und ich möchte gerne, dass alle Bilder in den Artikeln 300 Pixel breite haben und die Höhe dazu relativ dargestellt wird.

Zudem möchte ich gerne, dass das Bild im Artikel linksbündig mit einem Abstand von ca. 10 Pixeln nach rechts zu sehen ist und der Text dann rechtsseitig vom Text beginnt und unter dem Bild dann die gesamte Breite einnimmt.

Für die Blogansicht der Artikel möchte ich gerne, dass alle Bilder in der Blogansicht 200 Pixel breite haben und die Höhe dazu relativ dargestellt wird. Auch hier sollen die Bilder linksbündig und der Text dann rechts bzw. unten das Bild umgeben.

Es wäre super, könnte mir jemand mit einer einfachen Erklärung helfen, damit ich das umsetzen kann.

Ganz lieben Dank für Eure Hilfe. Bleibt gesund.

Viele Grüße

Ingo

Indigo66 · 30. April 2020

Wenn Du die Bilder im Blog über Einleitungsbild und Beitragsbild eingepflegt hast, kannst Du Feld darunter einstellen ob sie rechts- oder linksbündig ausgerichtet sein sollen.
In den globalen Optionen für Beiträge, kannst Du einen Standard definieren der dann als Voreinstellung fungiert.

Für die andere Sache benötigst Du CSS Wissen. Wie sieht es da bei Dir aus?

moellerchen · 30. April 2020

Hallo Indigo,

vielen Dank schon mal für deine Hilfe. Das mit den Einstellungen und dem Textumfluss klappt schon mal (bis auf den Abstand des Textes vom Bild) - aber jetzt habe ich noch das Größenproblem und leider habe ich nur ganz geringe css Kenntnisse - also eigentlich nicht wirklich Ahnung wo ich was finde, bzw. ergänzen und einbinden muss.

https://conzoomrecords.com/de/…ous-artists-electropop-13

Vielleicht kannst du mir da auch behilflich sein, das wäre super.

Viele Grüße
Ingo

Birger · 30. April 2020

Binde die Bilder doch mit dem JCE direkt in den Beitrag ein - dort kannst Du die gewünschten Einstellungen vornehmen - ohne CSS-Kenntnisse

Wenn die Bilder nur 300px breit sein sollen, lade sie auch nur in dieser Größe hoch - spart alles Ladezeit.

Indigo66 · 30. April 2020

Füge das Deine custom.css hinzu:

CSS

.pull-left.item-image {
    max-width: 300px;
    padding: 10px;
}

Wenn für das Einleitungsbild und Beitragsbild einmal die Einstellung per CSS gemacht ist, ist das Srbeiten damit seht viel angenehmer und vor allem für neue Redaktuere intuitiver zu verstehen.

Und um Bilder die in einem Beitrag eingebettet sind auf mobilen Geräten sauber darzustellen (floating entfernen) muss sowieso die CSS angepasst werden. Das machen nämlich die Bootstrap-Klassen für die Beitragbilder automatisch.

moellerchen · 30. April 2020

Vielen Dank für die Hilfe. Ich habe mir jetzt den JCE runtergeladen und mit deutschem Sprachpaket installiert - hatte aktuell noch den TinyMCE genutzt...

Und der Eintrag in der costum.css bezieht sich dann auf die Artikelbilder, richtig? Denn habe ich auch dazu gefügt

Wie bekomme ich denn dann die Bilder in der Blogübersicht auf 200px Weite :)?

Indigo66 · 30. April 2020

Du musst Dich entscheiden ob Du die Bilder im Beitrag einbettest oder über Beitragsbilder einfügst.

Jetzt hast Du beides und dann lässt sich schlecht ein allgemeingültige CSS deklarieren.

moellerchen · 30. April 2020

Hi Tom,

ich habe jetzt im Beitrag ein Bild mit dem JCE eingefügt - in 300 Pixel Größe - so werde ich dann mit allen Beiträgen machen, so dass sich jetzt "nur" noch das Problem für mich ergibt, wie ich die Bilder in den Blogübersichten der Seite mit 200 px Breite anzeigen lassen kann

Viele Grüße

Ingo

Indigo66 · 30. April 2020

Zitat von moellerchen

in den Blogübersichten der Seite mit 200 px Breite anzeigen

CSS

.blog .item img {
    max-width: 200px;
    height: auto;
}

chr-hl · 30. April 2020

Moin,

mein Vorschlag wäre, beim Einfügen des Bildes im JCE "nur" unter "Erweitert" dem Bild eine eigene CSS-Klasse zu verpassen.
Anschließend in einer CSS-Datei Deines Vertrauens (custom.css) das erforderliche CSS für die Darstellung im Beitrag und Blog einmalig zu definieren.

Christian

Elwood · 30. April 2020

Vielleicht noch interessant:

EasyImageReszier

moellerchen · 30. April 2020

Hallo Tom,

muss der css Eintrag

.blog .item img {
max-width: 200px;
height: auto;
}

in die custom.css?

An alle anderen aber auch vielen Dank für die Infos - ich würde es erstmal über die "einfache" css Eintrag Variante probieren wollen

chr-hl · 30. April 2020

Die custom.css sollte der richtige Ort sein, da diese als letzte CSS-Datei geladen wird.

Christian

Sieger66 · 30. April 2020

und steht ja in deinem verwedeten Template auch z.b. dort drin:

https://www.conzoomrecords.com…blank_free/css/custom.css

Zitat

Code

  Use this file to add custom CSS easily

bzw.

Code

view-source:https://www.conzoomrecords.com/en/#line113

Siehe außerdem z.B. auch:

http://openbook.rheinwerk-verl…mla_3/10_005.html#u10.5.2

moellerchen · 30. April 2020

Ich habe die custom.css jetzt um den Eintrag ergänzt. Aber es tut sich leider noch immer nichts - weiterhin sind die Blogbilder 300 px groß. Kann es vielleicht sein, dass diese custom.css noch irgendwo anders mit eingebunden werden muss, damit sie angesprochen wird?

Elwood · 30. April 2020

Also der Eintrag in der custom.css funktioniert, verändere ihn im Inspektor mal, dann siehst du es:

Also in der Blogansicht.

In der Artikelansicht sind sie 300px groß.

chr-hl · 30. April 2020

M.E. wird das ganze durch die direkte Formatierung im JCE "überlagert".

Deshalb lieber alles per CSS,

Christian

anka · 1. Mai 2020

Zitat von moellerchen

Ich habe die custom.css jetzt um den Eintrag ergänzt. Aber es tut sich leider noch immer nichts...

Es passt schon, du musst nur den Browser-Cache löschen (leider wird das immer wieder vergessen).

moellerchen · 1. Mai 2020

Hallo an euch alle,

Anka hatte die Lösung - es war der Browser Cache :).

Und kann mir vielleicht noch jemand erklären, wie ich den Text im Blog rechts vom Bild ausrichten kann - was ich da ändern muss? Das wäre klasse. Und dann habt ihr mir bei den ersten Schritten toll geholfen

Indigo66 · 1. Mai 2020

Erweitere Deinen CSS Eintrag um ein Floating und dem Padding.

CSS

.blog .item img {
    max-width: 200px;
    height: auto;
    float: left;
    padding: 0 10px 10px 0;
}

Namensvetter, Du solltest Dir unbedingt die Grundregeln und Eigenschaften des CSS aneignen.