Hilfe beim Einrichten von Kategoriebildern

Hallo!

Ich möchte Kategoriebilder in der Kategorienliste ähnlich wie Benutzerbilder in der Ansicht „Zuletzt angesehen“ anzeigen lassen Catégories - Discourse Meta.

Ich habe durch herumprobieren im Inspektionsmodus von Chrome bereits annähernd das gewünschte Ergebnis erzielt.

Glauben Sie, dass dies nur mit CSS möglich ist, oder muss ich HTML-Vorlagen bearbeiten?

Die Website ist unter APF - Auberge du Pixel Fringant (apfcommu.ga) live, falls Sie sie sich ansehen möchten.

Vielen Dank für Ihre Zeit :slight_smile:

Hallo!

Ich würde sagen, das ist sehr wahrscheinlich, und es scheint, du hast den Weg bereits durch Experimentieren mit Chrome gefunden. Wenn deine Frage eher lautet: „Wo wende ich meine Änderungen an?“, findest du dort ein Beispiel:

und viele weitere hier: Search results for 'category-list' - Discourse Meta

Nicht wirklich, ich habe geschummelt, indem ich einige HTML-Elemente verschoben habe.

Im Beispiel haben sie es geschafft, indem sie die Kategoriebeschreibungen entfernt und die Beschreibungen direkt zu den Bildern hinzugefügt haben. Ich würde dies lieber vermeiden.

Ah, ich verstehe, mein Fehler :sweat_smile:
Da ich wirklich nicht gut in CSS bin, bin ich mir nicht sicher, ob du den Weg mit position: relative gehen solltest. Falls du dich für das Umsortieren im HTML entscheidest, ist dies vielleicht hilfreicher:

Und hier ist https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/navigation/category.hbs. Um jedoch Änderungen an discourse/app/views/categories/index.html.erb at main · discourse/discourse · GitHub vorzunehmen, wirst du wahrscheinlich ein Plugin benötigen.

Ich bin selbst auch nicht wirklich gut in CSS.

Danke für die Ressourcen, ich werde mich da mal reinschauen, wenn ich etwas mehr Zeit habe.

Ich werde wahrscheinlich den Weg über Plugins gehen müssen…

Ich würde diese neue Komponente verwenden:

Sie bietet dir ein saubereres Markup für das CSS-Styling und sorgt für ein konsistentes Erscheinungsbild auf Desktop und Mobilgeräten, wobei die Klassen-Selektoren fast identisch sind.