Wir haben hier ein Photoshop-Mockup, das uns als Vorlage für die Erstellung des Templates für die individuelle Galerie-Seite dient.
Zuerst haben wir die "Weiter" und "Zurück" Links gestaltet. Sie befinden sich in einer absolut positionierten Box in der Galerie-Leiste, damit wir sie auf der Seite zentrieren können, trotz der anderen Buttons und Elemente, die sich bereits in der Leiste befinden. Sie erhalten die gleiche Klasse wie der "Submit One" Button, um Konsistenz zu gewährleisten.
Als Nächstes haben wir diese sehr schmale linke Spalte, in die wir Text einfügen. Wir beginnen mit einem 1/8 7/8 Raster, aber 1/8 ist einfach zu schmal. Wir ändern es zu 1/4 3/4, aber das ist zu viel. So wie bei dem Fabelwesen Goldlöckchen war 1/6 5/6 genau richtig.
Wir machen einige Typografie-Arbeiten in dieser schmalen Spalte und fügen den Titel (natürlich in einem <h1> Tag, da es der wichtigste Titel auf der Seite ist), die Beschreibung und andere Abschnitte hinzu. Die meiste Typografie ergibt sich aus unserer einfachen und robusten Typografie-Einrichtung.
Das 5/6 Raster ist ganz für das Bild reserviert. Schön und groß, was großartig ist. Es hat einen hellgrauen Hintergrund, genau wie Bilder in Blog-Posts (z. B. <figure>).
Wir überlegen, wie wir die Tags etwas ausgefallener gestalten können. Wir schauen uns auf CodePen um (hier ist ein Link zum "Tags" Tag, META-WARNUNG). Am Ende denken wir, das ist übertrieben und belassen sie als normale Links.
Wir lassen den "Vollbild"-Button auf eine der einfachsten möglichen Weisen funktionieren: Er öffnet ein neues Fenster, das die Abmessungen des Vollbild-Bildes hat und das Bild darin anzeigt. Es ist wie eine Modal-Box aus den frühen 2000ern! Aber ich mag es. Es ist einfach, braucht nicht viel Code (wie ein Lightbox), und die Interaktion ist offensichtlich. Es ist sogar noch besser, wenn Sie mich fragen.
Chris, in Ihrem finalen Code und in einigen der nachfolgenden Videos sehe ich eine Klasse namens
.gridswitch, und diese wird nur auf dem Raster für die Galerie-Einzelbildschirmschablonesingle-screenshot.phpverwendet.Können Sie erklären, wofür Sie diese Klasse verwenden?
Alles, was diese Klasse tut, ist, die Spalten nach rechts statt nach links zu verschieben (und den entsprechenden Abstand anzupassen). Ich glaube, der Grund, warum sie da war, ist, dass ich damit experimentiert habe, die Informationsspalte auf diesen einzelnen Galerie-Seiten rechts statt links zu platzieren. Indem ich das Raster umstelle, konnte ich die Informationsspalte (die den Header, die Beschreibung und so weiter enthält) trotzdem ZUERST in der Quellreihenfolge platzieren, wo sie hingehört.