Mamy tutaj trochę makiety programu Photoshop do pracy, ponieważ kontynuujemy tworzenie szablonu dla indywidualnej strony galerii.
Najpierw nadaliśmy styl linkom Następny i Poprzedni. Znajdują się one w absolutnie ustawionym polu na pasku galerii, dzięki czemu możemy je wyśrodkować na stronie pomimo innych przycisków i rzeczy już na pasku. Przyjmują tę samą klasę, co przycisk Prześlij jeden, więc jest tam stałość.
Następnie mamy tę bardzo wąską lewą kolumnę, w której można pobrać tekst. Zaczynamy od siatki 1/8 7/8, ale 1/8 jest trochę za wąska. Zmieniamy to na 1/4 3/4, ale to za dużo. Podobnie jak legendarny niedźwiadek, 1/6 5/6 była w sam raz.
Wykonujemy pewne prace typograficzne w tej wąskiej kolumnie, dodając w tytule (w pliku
tag oczywiście, bo to najważniejszy tytuł na stronie), opis i inne sekcje. Większość typografii po prostu układa się na swoim miejscu w oparciu o naszą prostą i solidną konfigurację typografii.
Siatka 5/6 jest cała dla obrazu. Ładny i duży, co jest świetne. Ma jasnoszare tło, podobnie jak obrazy w postach na blogu (np
Zastanawiamy się nad tym, jak stylizujemy tagi. Rozglądamy się po CodePen (tutaj jest link do tagu „tags”, META ALERT). W końcu myślimy, że to przesada i zostawiamy je jako normalne linki.
Sprawiamy, że przycisk „pełny rozmiar” działa w jeden z najprostszych możliwych sposobów, otwieramy nowe okno zawierające wymiary obrazu w pełnym rozmiarze i pokazując w nim obraz. To jak modalne pudełko z początku 2000 roku! Ale to lubię. To proste, nie wymaga dużej ilości kodu (jak w przypadku lightbox) i jest oczywiste, że można z nim wchodzić. Nawet lepiej, jeśli o mnie chodzi.