Fotogram - poradnik

Skoro na blogu mamy już komunikator, czas na coś większego: Fotogram, czyli nasz riftowy odpowiednik Instagrama. Nowalijka, nasz kodowy ultrakoksu, napisała do tego cały piękny kodzik, więc możesz teraz zrobić swojej postaci pełnoprawny profil – z awatarem, liczbą obserwujących, rolkami i siatką postów.

Jedno trzeba zapamiętać na sztywno: wyłącz komentarze w opcjach posta, żeby stopka nie psuła ramki. I tyle wymogów – zdjęcia mogą mieć dowolne proporcje, bo same dopasują się do kwadratowych kratek (przy mocno wydłużonych obrazkach kadr może lekko przyciąć brzegi, ale nic nie musisz przycinać z wyprzedzeniem).

Jak w ogóle się to edytuje – jeśli nie czujesz się pewnie z kodem, spokojnie, robisz tak naprawdę tylko dwie rzeczy:

• podmieniasz zdjęcia – to adres w cudzysłowie zaraz po src=; wklejasz tam link do swojego obrazka;
• podmieniasz teksty – to, co stoi pomiędzy znacznikami, np. słowo nickname albo Imię Nazwisko.

Całej reszty (tych wszystkich <div>) możesz w ogóle nie ruszać – to szkielet, który trzyma wszystko w kupie. W kodzie poniżej dopisałam podpowiedzi – to te zielone linijki z <!-- ... -->. One się nie wyświetlają na blogu, są wyłącznie dla Ciebie.

Przejdź w edycji posta do widoku HTML i wklej całość:

fotogram.html HTML

<!-- ============================================= -->
<!-- FOTOGRAM - profil postaci                     -->
<!-- WAŻNE: w opcjach posta WYŁĄCZ KOMENTARZE      -->
<!-- bo inaczej będzie brzydka stopka              -->
<!-- ============================================= -->

<!-- Opakowanie całości. Nie ruszaj. -->
<div class="fotogram">

  <!-- GÓRNY PASEK (logo + ikonki) - tu nie ruszaj -->
  <div class="header-fotogram">
    <div class="logo-f">
      <i class="ph-duotone ph-instagram-logo"></i>
      <div class="kp2_divider"></div>
      <div class="h-f">Fotogram</div>
    </div>
    <div class="menu-f">
      <i class="ph-duotone ph-compass"></i>
      <i class="ph-duotone ph-heart-straight"></i>
      <i class="ph-duotone ph-user"></i>
    </div>
  </div>

  <!-- PROFIL: awatar + informacje o postaci -->
  <div class="profile-fotogram">

    <!-- AWATAR - podmień adres w cudzysłowie na link do zdjęcia -->
    <div class="pfp-f"><img src="https://dummyimage.com/120x120/ddd/000000.png" width="120"/></div>

    <div class="info-f">
      <div class="username-f">
        <!-- NICK - zamień słowo nickname na nick postaci -->
        <span>nickname</span>
        <!-- Niebieski ptaszek (weryfikacja) - nie chcesz go? usuń tę jedną linijkę z check-circle -->
        <i class="ph-duotone ph-check-circle"></i>
        <i class="ph-duotone ph-dots-three"></i>
      </div>

      <!-- IMIĘ I NAZWISKO - zamień na dane postaci -->
      <div class="name-f">Imię Nazwisko</div>

      <!-- LICZBY - zamień zera na posty / obserwujących / obserwowanych -->
      <div class="numbers-f">
        <div class="posts-f">Posty: <b>000</b></div>
        <div class="followers-f"><b>000 </b> obserwujących</div>
        <div class="followed-f">Obserwowani: <b>00</b></div>
      </div>

      <!-- OPIS profilu (bio) - zamień tekst Lorem ipsum na swój -->
      <div class="desc-f">Lorem ipsum dolor sit amet.</div>

      <!-- LINK - zamień www.mojastrona.com na swój adres (jak zrobić klikalny, patrz opis pod kodem) -->
      <div class="link-f">
        <i class="ph-duotone ph-link"></i>
        <span>www.mojastrona.com</span>
      </div>
    </div>
  </div>

  <!-- PRZYCISKI - tu nic nie musisz robić -->
  <div class="buttons-f">
    <div class="follow-f">Obserwuj</div>
    <div class="message-f">Wyślij wiadomość</div>
  </div>

  <!-- ROLKI (opcjonalne, maksymalnie 6) -->
  <!-- Nie chcesz rolek? Usuń wszystko od <center> do </center> włącznie. -->
  <center>
  <div class="reels-f">
    <!-- rolka 1 - podmień adres oraz napis krótki opis -->
    <div class="reel-f">
      <div class="reel-img-f"><img src="https://dummyimage.com/60x60/ddd/000000.png" width="60"/></div>
      krótki opis
    </div>
    <!-- rolka 2 -->
    <div class="reel-f">
      <div class="reel-img-f"><img src="https://dummyimage.com/60x60/ddd/000000.png" width="60"/></div>
      krótki opis
    </div>
    <!-- rolka 3 -->
    <div class="reel-f">
      <div class="reel-img-f"><img src="https://dummyimage.com/60x60/ddd/000000.png" width="60"/></div>
      krótki opis
    </div>
    <!-- rolka 4 -->
    <div class="reel-f">
      <div class="reel-img-f"><img src="https://dummyimage.com/60x60/ddd/000000.png" width="60"/></div>
      krótki opis
    </div>
    <!-- rolka 5 -->
    <div class="reel-f">
      <div class="reel-img-f"><img src="https://dummyimage.com/60x60/ddd/000000.png" width="60"/></div>
      krótki opis
    </div>
    <!-- rolka 6 -->
    <div class="reel-f">
      <div class="reel-img-f"><img src="https://dummyimage.com/60x60/ddd/000000.png" width="60"/></div>
      krótki opis
    </div>
  </div>
  </center>

  <!-- ZAKŁADKI (ikonki nad siatką) - tu nie ruszaj -->
  <div class="icons-post-f">
    <i class="ph-duotone ph-squares-four -selected"></i>
    <i class="ph-duotone ph-bookmark-simple"></i>
    <i class="ph-duotone ph-identification-badge"></i>
  </div>

  <!-- SIATKA POSTÓW - każdy wiersz (post-grid-f) to 3 zdjęcia -->
  <!-- Chcesz więcej postów? Skopiuj cały wiersz od <div class="post-grid-f"> do </div> -->
  <div class="posts-grid-f">

    <!-- wiersz 1 -->
    <div class="post-grid-f">
      <div class="post-img"><img src="https://dummyimage.com/191x191/ddd/000000.png" width="191"/></div>
      <div class="post-img"><img src="https://dummyimage.com/191x191/ddd/000000.png" width="191"/></div>
      <div class="post-img"><img src="https://dummyimage.com/191x191/ddd/000000.png" width="191"/></div>
    </div>

    <!-- wiersz 2 -->
    <div class="post-grid-f">
      <div class="post-img"><img src="https://dummyimage.com/191x191/ddd/000000.png" width="191"/></div>
      <div class="post-img"><img src="https://dummyimage.com/191x191/ddd/000000.png" width="191"/></div>
      <div class="post-img"><img src="https://dummyimage.com/191x191/ddd/000000.png" width="191"/></div>
    </div>

    <!-- wiersz 3 -->
    <div class="post-grid-f">
      <div class="post-img"><img src="https://dummyimage.com/191x191/ddd/000000.png" width="191"/></div>
      <div class="post-img"><img src="https://dummyimage.com/191x191/ddd/000000.png" width="191"/></div>
      <div class="post-img"><img src="https://dummyimage.com/191x191/ddd/000000.png" width="191"/></div>
    </div>

  </div>

<!-- koniec Fotogramu -->
</div>

<!-- === STYL - wkleja się razem z resztą, na samym końcu === -->
<style>
  :root {
    /* Tu wklej :root z karty postaci (KP), żeby profil grał jej kolorami */
  }

  h3.post-title, .post-footer, h2.date-header {
    display: none;
  }

  .post-outer {
    outline: 1px solid var(--color8);
    border: 5px solid var(--color10);
    border-radius: 10px;
    padding: 0px!important;
    overflow: hidden;
  }
</style>

A teraz spokojnie, sekcja po sekcji, co gdzie podmienić.

Nagłówek (header-fotogram) – górny pasek z logo i ikonkami. Nic nie musisz w nim ruszać.

Profil (profile-fotogram) – serce całości:

• awatar – podmień adres w src obrazka w pfp-f (proporcje nieważne, sam się dopasuje);
• nick – zamień słowo nickname na nick postaci;
• plakietka weryfikacji – ikonka ph-check-circle jest opcjonalna, więc jeśli postać nie ma „niebieskiego ptaszka”, usuń tę jedną linijkę;
• imię i nazwisko – name-f;
• liczby – w numbers-f wpisz posty, obserwujących i obserwowanych;
• opis – bio w desc-f;
• link – w link-f wpisz swój adres (o klikalnym linku za chwilę).

Przyciski (buttons-f) – „Obserwuj” i „Wyślij wiadomość”. Możesz zostawić jak jest.

Rolki (reels-f) – opcjonalne, maksymalnie 6, wyśrodkowane na stronie. Każda to miniaturka i krótki opis pod spodem. Nie chcesz rolek? Usuń cały blok – razem z tagami <center> i </center>.

Zakładki (icons-post-f) – trzy ikonki (siatka, zapisane, oznaczenia). Siatka jest domyślnie podświetlona przez -selected. Też kosmetyka.

Siatka postów (posts-grid-f) – wiersze po 3 kafelki, gdzie każdy kafelek to <div class="post-img"> z jednym zdjęciem. Masz w kodzie od razu 3 gotowe wiersze (9 miejsc). Chcesz więcej? Skopiuj cały wiersz <div class="post-grid-f">…</div> i dodaj kolejny – zawsze po 3 kafelki w rzędzie, żeby ładnie się układało.

Chcesz klikalny link? Domyślnie adres to zwykły tekst. Żeby dało się w niego kliknąć, zamień <span>www.mojastrona.com</span> na
<a href="https://twojastrona.com">twojastrona.com</a>.

Kolory – na samym końcu, w bloku <style>, jest puste :root. Wklej tam paletę z kapejki, a cały Fotogram będzie miał jej kolorki. Ta część chowa też tytuł, stopkę i datę posta i robi z niego zaokrągloną ramkę.

I gotowe – Twoja postać ma własny profil na Fotogramie :3