okfde / jh-lauch-theme

Das neue Wordpress Theme für Jugend hackt

Lauch Theme

based on _s.

Ein erfolgeiches Aktivieren des Themes setzt die Installation des Plugins Advanced Custom Fields voraus. JSON-Repräsentationen der Felder liegen in acf-json-backup. Diese können nach acf-json kopiert werden. ACF wird sie dort auslesen. Ansonsten werden neue Felder von ACF direkt in acf-json abgelegt.

Statische Seite

Prototyp liegt unter /static-prototype

Technische Doku

Im Wiki liegen einige Informationen für Entwickler*innen und Interessierte.

jh-lauch-theme's Issues

Suche

• Suchformular
• Suchergebnisse

Über JH Frontend

• static
• wp-template

FAQ Frontent

• static
• wp-template

Blog post excerpt

oder truncate post.
Tuncate length tbd

Posts

• Link to event machen wir vom Event aus

---

Post Template

• pick 2 post close to the date

Event type

Type

• URL ist /rueckblick/stadt-jahr, eg /rueckblick/berlin-2018
• Stadtname -> Aus Location Taxonomie
• Bild -> Cover image

Ausblick

• Anmeldelink zu Pretix anmeldungslink
• Facts -> Freitextfeld event_facts, Beispielformat vorbereiten
• Event Beschreibung event_description
• Programm für 3 Tage als fancy Liste
• Kontaktperson -> Linked Type Person (Image, Name, Rolle, Email)
• Partner (Image, Name, link)
• Sponsoren (Image, Name, link)
• Blog posts -> Linked Type Post
• hat einen HEXCODE
• hat ein Alpacalogo

Rückblick

• Rückblicktext
• Rückblickvideo
• VideoPlayer mit location und year taxonomie (im Template)
• Link zu Flickr
• Bildupload
• Mentorinnen -> Linked Type Person (Image, Name?)

---

Event Pages:

• URL ist /event/stadt, eg /event/berlin
• Stadtname aus Titel Location Taxonomie
• location Taxonomie
• holt sich Eventrückblicke über Location Taxonomie und events type (Template)
• nächstes Event kann ausgewählt werden
• weiss ob ein Event ansteht oder nicht
• hat einen HEXCODE
• hat ein Alpacalogo

video type needs cover image

Import projects from CSV

need to write a script that imports all the projects from csv

Revolving Claims

Auf der Startseite

• Theme-Variable mit allen Möglichkeiten, Komma-separiert.
• Vue app für Effekte

Mitmachen

n/a

Projektfilter

Vermutlich ergibt eine JS app hier am meisten Sinn mit Fallback aller Projekte als Liste.

REST API für Project Type

https://github.com/David-Desmaisons/Vue.Isotope

Dokumentations-Dumpliste

• Erklärung wie die URLs für Anmeldeseiten aufgebaut sind und wie diese zu benennen sind

Für Events:
/events/berlin/
/anmeldung/berlin/2019/
/rueckblick/berlin/2019/

Für Austauschprogramme
/aufreisen/tokiobusan-2019/
/anmeldung/aufreisen/tokiobusan-2019/

Image sizes

Blog

• 715x
• 320x

• @2 for each

Favicons

project : video, 1:n

Footer menus definierten

die dei Footer menus als WP menus anlegen

Kontakt

• Bildslider

Projekte Seite

Sortierung:

• Akutelles Jahr zuest
• Innerhalb des Jahres zufällig
• dann alle chronologisch?

Umlaute in slugs richtig umschreiben

"Köln" in einem Titel wird zu "koln" in der URL, nicht "koeln".

In meiner Erinnerung kann Wordpress das aber – ich weiß leider nicht, ob das von der eingestellten Lokalisationsdatei erledigt wird oder ob ich in der Vergangenheit immer "vorgepatchte" deutsche WP-Installationen benutzt habe. Unsere bisherige JH-Seite kann es, offenbar ohne Plugin.

hier ein codeschnipsel

Über Jugend hackt

• styles
• Title
• Excerpt Body
• Body custom field
• Publikation -> Repeater (Titel, link, file)
• Video -> YT for now
• Beschreibungstext Video
• Prices/ Awards -> Repeater (Logo, titel, link)
• 2 followup blog post -> linked data posts

Resourcenseite Mentorinnen

urgh
Evtl bekomme ich das mit Klassen im Freitextfeld, das würde Arbeit ersparen

Mentorin werden

• Blogteaser

CoC

• Bilderslider
• Kontaktperson

Startseite

• Banner und Claim #4
• Kalender #5
• Blog teaser \
• Event Rückblick teaser / WAS IST DIE LOGIK?
• VideoPlayer, Taxonomien über theme variablen

Kalender

Auf der Startseite

Setzt sich zusammen aus Events und Labterminen.
Umsetzung als ????

---

Ausgabe Events:

• Alpaka in der Farbe des Events (Farbe wird in Wordpress auf der Event-Seite festgelegt)
• Stadt
• Zeitraum
• Ort
• der Eintrag verlinkt zur Eventdetailseite

Ausgabe Labs:

• Datum
• Uhrzeit
• Stadt
• Titel der Termins
• Ort
• Beschreibung
• Link extern
• der Eintrag verlinkt zur Labdetailseite

Austausch Type

• Title

• Bild -> Cover Image

• Beschreibung -> body

• Anmeldelink

• Facts -> Freitextfeld

• Kontakt -> Linked Data Person

• Rückblicktext

• Video -> linked data video || url

• Past Austausche => linked data austausch

---

url ???

Lab index

n/a

Lernen Typ

• Title, Name
• Bild
• Link
• Text

Muss irgendwie in Verbindung stehen mit Lightning talk videos. Aber noch sehr ungenau

[Safari] burger menu animation broken

cannot reproduce on browser stack, but Nadine's setup is safari on High sierra

Event index

n/a

Karten Plugin

Es wird vermutlich mehrere Karten auf der Seite geben.
Ein eigenes Plugin mit custom map tiles macht wahrscheinlich Sinn. Anforderungen unklar

Lab type

• Bild -> Cover Image
• Name -> title
• Beschreibung -> body
• Ansprechpartner -> Linked Data People
• Kontakt -> Freiformtext?
• Mentorinnen -> Linked Data People
• Partner (Image, Name, Link)
• Sponsoren (Image, Name, Link)

---

---

Display

• Kalender events
• Videoplayer (Lab Taxonomie?) (Template)

Project Type

• title
• beschreibung -> body text
• Team -> Freitextfeld
• Taxonomies (Location, Year, Topic, Tech)
• video -> Linked Data video
• mediaccc link
• haskdash

Person Type

• Name -> title
• Position -> Job Taxonomie
• Email
• Image

To be used in various places

figrue out why get_theme_mod does not work on every template

Blog post imports

all is too large for the imprter, so we have to go by category

• Events
• Sonstiges
• hello-world
• labs
• lightning-talk
• mentorinnen
• offene-daten
• teilnehmerinnen
• video

Taxonomies

• Create Labs Taxonomie
• Create Austausch Taxonomie
• Create Person Taxonomie

Live

• Live Stream link
• Ausgabe des Programm (von der Event-Detailseite)
• Program?? Event?? event auswählen und von dort lesen?
• customized Videplayer mit Videos/Lightnings Talks aus dem Event (Müssten das direkt auf YT und dann in WP eintragen)

Blog redirects

https://wordpress.org/plugins/redirection/

import all them posts and fix the redirects. yay

[a11y] color combinations break fail AA/ AAA requirements

Problem:

• weiße Schrift auf $softblue bg
• weiße Schrft auf $softgreen bg

Single Page Template

• static
• wp-template

[mobile] search, keyboard pushes search field away

focusing on the search input has the keyboard pop up. Unfortunately this pushes the input out of the viewport.

Fennec/ Android

VueVideo Plugin

• Accept Labs taxonomy
• Accept Exchange taxonomy
• use this iframe hack https://css-tricks.com/lazy-load-embedded-youtube-videos/

Blog redirect

urgh

FAQ TYPE

• Kategorie Eltern/ Jugendliche / Mentorinnen
• Frage -> Title
• Antwort Freitext

Austausch Index

• Titel
• cover Image
• post body
• Teaser Austausche (Bild, title, button)

2nd round feedback list

• Allgemein: layout auf 1920x
• Allgemein: restliche Illustrationen
• FAQ: link styles
• FAQ: summary focus styles
• About: Links zur weiterführenden Posts: Titel als links? Mehr lesen?
• About: Wieviele Kategorien von Partnern, Netzwerk, Sponsoren wird es geben?
• About: Links für Preise?
• About: Video

Plugin Liste

• Open Graph
• Caching
• https://wordpress.org/plugins/safe-svg/
• https://de.wordpress.org/plugins/mailchimp/
• https://de.wordpress.org/plugins/page-links-to/
• redirection
• regenerate thumbnails
• wordpress importer
• css/ js minification, compression, inlining https://wordpress.org/plugins/autoptimize/

Lernen Seite

Zieht sich Lernmaterial, Initiativen und Lightning talk videos. Oder so

event url at/ ch

should be events/at/ redirecting to /events/at/linz