Spez. HTML-Block für Startseite

[innosmith]

Die Kundin wünscht auf der Startseite einen HTML-Block, welcher in ungefähr wie dieses Mockup aussieht.

Idee: Auf deinklima werden Projekte in Projektgruppen gegliedert. Die verfügbaren Projektgruppen sollen auf der Startseite prominent nebeneinander dargestellt werden. Aktuell sind es 2 Projektgruppen. Ein User sieht jeweils den Projektgruppennamen (clickbar), das Hauptbild der Projektgruppe (clickbar) und auf dem Hauptbild ein call2action Button, um auf die entsprechende Startseite der Projektgruppe zu gelangen.

Technisch wäre der Wunsch, eine HTML-Tabelle zu haben, in welcher manuell die verschiedenen Projektgruppen per Text und Link eingefügt werden können, inkl. call2action Buttons. Die Bilder sollen in den Ecken mit einem 10px Radius abgerundet sein. Die Tabelle sollte sich grafisch gut in die Startseite einfügen. Ev. wäre es gut, eine leicht andere Hintergrundfarbe zu haben anstelle der aktuellen Trennlinien; oder die Trennlinien beibehalten.

[innosmith]

@carlobeltrame : könntest du mir hierfür bitte eine Aufwandschätzung und Empfehlung machen? Merci.

[larsUE]

Kleiner Synergien-Tipp: In Zürich hatten wir mal was ähnliches im Einsatz, der Code findet ihr auf der mitwirken Prod in HTML Block 2

Und als Nebenbemerkung: Im Zuge des Redesigns wird es möglich sein, beliebig viele Blöcke auf der Startseite zu konfigurieren (und auch bei den Prozessen/Orgas)

[carlobeltrame]

@innosmith ich habe das mal in einer ersten Version umgesetzt auf INT. Bitte anschauen und Bescheid geben, was noch geändert werden soll. (Der Link zu Thun war vorher schon auf Wikipedia, den kannst du mir ja noch mitteilen oder selber einfügen).

[innosmith]

Bestens @carlobeltrame . Ich warte auf Feedback der Kundin bez. möglicher weiterer Anpassungen an der Tabelle.

[carlobeltrame]

Habe noch die Breite auf dieselbe Breite der restlichen Inhalte limitiert. Die Projekte werden jetzt auf grossen Bildschirmen nicht mehr beliebig weit auseinandergezogen.

[innosmith]

@carlobeltrame : Ist es mögllich, dass der sichtbare Bereich der Tabelle links- und rechtsbündig mit dem Block darunter und darüber ausgerichtet wird?

Und ist es möglich, die Tabelle analog https://dialogluzern.ch/ mit den neuesten Blogbeiträgen in hellgrau oder anderer Farbe (die Farbe können wir selbst im HTML-Block hinterlegen) einzufärben? So könnten die Abschnitte auf der Startseite anstelle der Trennlinien ev. besser unterschieden werden.

[carlobeltrame]

Ist gemacht.

[innosmith]

Danke @carlobeltrame . Sobald der Content auf PROD bereit ist, kopieren wir den HTML-Block auf PROD.

[innosmith]

Hat einer von euch @carlobeltrame oder @Kagemaru eine Idee, weshalb der hellblaue Hintergrund der Projekttabelle auf der Startseite deinklima plötzlich nicht mehr über die ganze Breite geht? Sowohl auf INT und PROD. Merci.

[carlobeltrame]

@innosmith das liegt an ungültigem HTML-Code, den du oder jemand anderes noch eingefügt hast, mit dem Text "Im Laufe der Zeit wird es noch weitere Mitwirkprojekte geben!" Das <div>-Tag wurde dort nur geöffnet aber nicht geschlossen. Dasselbe Problem war auch bei eurer Vorlage für diesen speziellen HTML-Block vielfach präsent. Ich würde euch empfehlen, das HTML nicht einfach freihand zu schreiben, sondern einen HTML-Editor mit Syntax Highlighting zu verwenden. Und insbesondere immer zuerst auf INT speichern und nachschauen ob alles noch gut aussieht (und zwar auf verschiedenen Bildschirmgrössen), bevor ihr etwas auf die PROD aufschaltet.

(Ausserdem ist <h1> an dieser Stelle das falsche Tag aus Accessibility-Sicht, was für staatliche oder ev. auch kantonale Organisationen ein Problem sein kann, wegen dem Behindertengleichstellungsgesetz.)

Ich habe das jetzt auf INT und PROD gefixt.

[innosmith]

Besten Dank @carlobeltrame . Ich kläre ab, wer das eingefügt hat. Bei einem anderen HTML-Block habe ich auch noch ungültige HTML-Tags gefunden.