Cassiopeia: Welchen Code für die user.css-Datei um die 1. Beitragsbilder zu verkleinern?

Layoutverschiebungen bekommt man meist dann, wenn man beispielsweise ein <div> nicht abschließt oder Ähnliches, egal ob in einem Modul oder einem Beitrag. Das ist dann ein Syntaxfehler.
Da man über css-Dateien die Optik einer Seite festlegt, führt ein Syntaxfehler hier auch zu optischen Problemen. Suboptimale Einstellungen bewirken Selbiges.
Das kann einem Laien als auch einem Profi passieren. Einen Vorschlag wie man css-Code gestaltet gibt es in diesem Sinne nicht. Die Syntax muss zumindest stimmen. Du kannst über F12 im Browser und den Analysetools hier schon viel rumprobieren. Und schreibe in die user.css nur die Änderungen rein. Manch einer kopiert die gesamte template.css und macht dort dann seine Änderungen. Manchmal muss man den Werten auch noch ein !important mitgeben, damit die Änderungen wirksam werden. Auch kannst du von einer user.css eine Kopie machen, z.B. user-alt.css, wenn du am Basteln bist. Dann kannst du durch Zurückbenennen die alte Optik wieder herstellen, solltest du da beim Basteln mal einen dicken Fehler einbauen.
Ich verwende auch gerne Kommentare in der user.css, damit ich auch noch nach Monaten weiß, warum ich hier die Werte angepasst oder ergänzt habe.

Bzgl. Ladezeit: Lade die Bilder immer in der optimalen Größe hoch, keinesfalls größer. Ein Bild mit 1200*600, welches auf der Seite dann auf 600*300 runtergerechnet wird, ist zu vermeiden. Optimiere auch die Kompression bzgl. der Qualität. Und achte darauf, dass LazyLoad funktioniert.
Denn Bilder, die sich ganz unten auf einer Webseite befinden, sollten erst zum Schluss geladen werden bzw. erst dann, wenn man auch wirklich nach unten scrollt. Dadurch wird die Ladezeit erheblich verringert.

Hallo Tom,

du könntest in die user.css folgende Anweisung einfügen:

.blog-item img {
max-width: 480 px;
}

Das sorgt dafür, dass alle Bilder in Blogansicht eine maximale Breite von 480px haben. Die Höhe wird dann sowie proportional angepasst.
VG Luzi

Besser 480px; ! Also ohne Leerzeichen. Da ist er wieder, der Syntaxfehler,

Zitat von JoomlaWunder

Besser 480px; ! Also ohne Leerzeichen. Da ist er wieder, der Syntaxfehler,

ja, klar. Vertippt

TomGardener
Etwas verstehe ich nicht. Du eröffnest mehrere Threads, ohne die Lösungen umzusetzen.
In diesem Thread fragst du nach einem CSS-Code, hast aber gemäss diesem Thread hier, noch immer keine user.css angelegt.

Versuche es doch mal.

Hast du jetzt deine user.css angelegt?

Mit CSS änderst Du nur die Anzeige der Bilder auf dem Gerät, denn das wird vom Browser ausgeführt. Der Server liefert jedoch das Bild so aus, wie es dort abgespeichert ist. Je größer das Bild, also desto länger die Ladezeit.

Damit es nicht zu dem unschönen Textumfluß rechts vom führenden Bild im Blog-view und Beitrags-view kommt z.B. noch nachfolgendes CSS ergänzen:

.item-image figcaption.caption {
  float: left;
}

Bin aber nur CSS-Laie und es sind möglicherweise weitere oder andere Ergänzungen sinnvoll oder notwendig.

Besser anstatt meines CSS-Codes in #14 wäre es wohl dem Bild gleich eine entsprechende Bootstrap-Klasse mitzugeben wie z.B.: float-none

Siehe diesbezüglich z.B. auch die Links in #6 dort:

Darstellungsfehler bei ...

Global lassen sich übrigens gewünschte Klassen dem "ersten Beitragsbild"(Komplettes Beitragsbild) unter

/administrator/index.php?option=com_config&view=component&component=com_content

im Tab "Bearbeitungslayout" bei CSS-Klasse Beitragsbild eintragen und speichern.

Diese werden dann genommen wenn im Beitrag keine eigenen Klassen dafür eingetragen werden.

Nun hast du dies aber wohl selbst schon mit der "Brechstangenmethode" in der user.css erreicht derzeit per:

/* Nur das erste Bild im Beitrag zentrieren */
.item-image:first-of-type {
    display: flex;        /* Flexbox für einfaches Zentrieren */
    flex-direction: column; /* Stapelt Bild und Bildunterschrift */
    align-items: center;  /* Zentriert Bild + Bildunterschrift */
    text-align: center;   /* Falls das für die Bildunterschrift nötig ist */
    width: 100%;          /* Volle Breite für zentriertes Layout */
}

/* Das erste Bild innerhalb der umgebenden Struktur */
.item-image:first-of-type img {
    max-width: 600px;     /* Maximale Breite */
    height: auto;         /* Automatische Höhe */
    display: block;       /* Entfernt eventuelle Inline-Layouts */
}

/* Falls das erste Bild eine Bildunterschrift hat, diese ebenfalls zentrieren */
.item-image:first-of-type figcaption {
    text-align: center;   /* Bildunterschrift mittig */
    margin-top: 5px;      /* Abstand zum Bild */
}

/* Sicherstellen, dass der Text erst unter dem Bild beginnt */
.item-image:first-of-type + p {
    clear: both;          /* Verhindert Umfluss */
    margin-top: 10px;     /* Abstand zwischen Bild und Text */
}



/* Anpassung der Spaltenbreite für Cassiopeia-Template */

@media (min-width: 992px) { /* Gilt nur für große Bildschirme */
    .container .row > .col-lg-8 { 
        width: 66%;  /* Hauptinhalt auf 60% setzen */
    }
    .container .row > .col-lg-4 {
        width: 34%; /* Sidebar auf 40% setzen */
    }
}

/* Zentrierung der h1-Überschrift im Hauptinhalt von Joomla */
.item-page h1 {
    text-align: center;
}

Wenn du z.B. die beiden folgenden Bootstrap-CSS-Klassen: float-none  tbody-icon wie in #16 bereits beschrieben im Tab "Bearbeitungslayout" bei "CSS-Klasse Beitragsbild" und auch bei "CSS-Klasse Einleitungsbild" eingetragen hättest, dann würde wohl bereits nachfolgendes in der user.css genügen:

/* Textumfluß rechts vom Bild verhindern und Bild mit abgerundeten Ecken */
figure.item-image img {     
     float: none ;
     border-radius: 1rem;
}

/* Zentrierung der h1-Überschrift im Hauptinhalt von Joomla */
.item-page h1 {
    text-align: center;
}

um die gewünschte Darstellung zu erhalten. Der ganze Rest in der user.css könnte dann wohl entfallen.

Das geht sicherlich auch per user.css es sollte dazu aber wohl das von Joomla verwendete Grid entsprechend abgeändert werden in der user.css per:

.site-grid {
  grid-template-columns: [full-start] minmax(0,auto)[main-start] repeat(3, 1fr)  30%   [ main-end]  minmax(0,auto)[full-end];
  }

Die 30% für die rechte Spalte nach Wunsch abändern.

Für weitere Info siehe auch z.B.:

Breite der sidebar...

Bin aber nur CSS-Laie und es sind möglicherweise weitere oder andere Ergänzungen sinnvoll oder notwendig.