Galeria prac kreatywnych na blogu w 3 krokach.

16 mar 2015

galeria zdjęć blogger na stronie statycznej
Zapewne każda blogerka kreatywna, która tworzy i chce sprzedawać swoje wyroby, chciałaby mieć miejsce na swoim blogu w którym w przejrzysty sposób zaprezentuje to co robi. Testowałam różne zewnętrzne rozwiązania implementacji galerii na stronę statyczną bloggera. Z żadnej nie byłam w pełni zadowolona. Postanowiłam stworzyć na własne potrzeby galerię, która miała spełniać poniższe wymagania:
  • łatwa aktualizacja zdjęć
  • minimalistyczny wygląd
  • powiększenie zdjęcia po najechaniu kursorem
  • proste wdrożenie (wiedziałam, że będę chciał się tym z Wami podzielić, więc rozwiązanie musiało być proste do zainstalowania dla osoby, które nie zna HTML, CSS i innych bzdur)
W ten sposób powstała galeria projektów banerów blogowych mojego autorstwa. Oczywiście rozwiązanie to jest dostosowanie do moich potrzeb i wyobrażam sobie, że część z Was może mieć też inne potrzeby, dlatego śmiało pytajcie, piszcie jak powinna wyglądać Wasza idealna galeria. Jeśli okaże się, że jest takie zapotrzebowanie to chętnie przygotuję dla Was również inne galerie. 


Galeria prac kreatywnych na blogu




galeria

aKROK 1: Przygotowanie zdjęć.

Możliwe jest pomniejszanie zdjęć za pomocą kodów CSS, żeby nie trzeba było martwić się ich obróbką. Ma to jednak jeden poważny minus - wydłuży ładowanie się strony i w ekstremalnych sytuacjach może sprawić, że czytelnik/potencjalny klient zrezygnuje z obejrzenia naszych prac, a tego nie chcemy. Dlatego warto poświęcić kilka dodatkowych minut i pomniejszyć zdjęcia. Jeżeli galeria ma dobrze wyglądać zdecyduj się na jedną ich orientacje (pionowe lub poziome) i zadbaj o identyczne proporcje długości krawędzi. Ja swoje pomniejszyłam tak, że szerokość wszystkich to 500px, a wyskość 333px. Na stronie galerii są one wyświetlane nieco mniejsze, ale zostawiłam pewien zapas, gdybym w przyszłości chciała zmienić koncepcję.
Wielkość zdjęć zmienisz we wszystkich programach do obróbki zdjęć. Mając już wszystkie zdjęcia musimy je umieścić w Internecie. Możecie do tego użyć np. albumów Google.


KROK 2: Zawartość galerii.

Galerię umieścimy na stronie statycznej bloggera, czyli takiej, której treść pozostaje cały czas taka sama (w przeciwieństwie do strony głównej bloga). W celu utworzenia strony statycznej logujemy się do bloggera i wybieramy STRONY. Tam klikamy NOWA STRONA. Jeśli chcemy oprócz zdjęć zamieścić tam jakąś treść to jest to dobry moment. Wpisujemy i formatujemy tekst tak jak przy tworzeniu posta.

Następnie w górnym lewym rogu klikamy na HTML i pod treścią, która tam jest (jeśli coś napisałyśmy) zamieszczamy poniższy kod galerii. Zastępując # kolejnymi adresami URL zdjęć, które mają się w galerii znaleźć. Jeśli nie wiesz skąd wziąć adres URL zdjęcia załadowanego do albumu google kliknij TU.

<div id="galeria"> 
<div class="sekcjagalerii">
<img src="#" /></div>
<div class="sekcjagalerii">
<img src="#" /></div>
</div>
Powyższy kod przewiduje 2 zdjęcia w galerii. Możecie dodać ich oczywiście więcej. Wystarczy dla każdego kolejnego zdjęcia dodać przed ostatnim
</div>
kod:
<div class="sekcjagalerii">
<img src="#" /></div>
Wskazówki: W trybie edycji wizualnej nie przestawiaj w żaden sposób zdjęć bo spowoduje to dodanie znaczników HTML, które mogą nam popsuć galerię. Dodatkowo radzę kod galerii przygotować w pliku tekstowym i go zapisać, a później dopiero wklejać na stronę statyczną. Jeśli blogger spłata nam psikusa i coś pokręci to nie będziemy musiały szukać błędów, bądź zaczynać pracy od początku. Jeśli wiemy, że zawartość galerii będziemy cyklicznie zmieniać warto zadbać o nazewnictwo zdjęć, aby łatwo odnaleźć je później w kodzie.

Gdy cała strona jest gotowa kliknij OPUBLIKUJ.


KROK 3: Wygląd galerii.

Zanim wykonasz ten krok, zdjęcia w galerii będą się wyświetlać jedno pod drugim, w oryginalnym rozmiarze, bez powiększenia i ramki. Zajmiemy się teraz wyglądem. Jeśli chcesz, aby Twoja galeria wyglądała tak jak u mnie, a główna kolumna Twojego bloga ma przynajmniej 800px to wystarczy, że zamieścisz poniższy kod w odpowiednim miejscu. W bloggerze przejdź do SZABLON. Pobierz kopię szablonu (jeśli nie wiesz jak to zrobić kliknij TU). Następnie kliknij EDYTUJ KOD HTML. Kliknij w dowolny fragment kodu i wciśnij jednocześnie CTRL i F. W okienku, które się pojawi wpisz

]]></b:skin>

i wciśnij ENTER.

Bezpośrednio nad odnalezionym fragmentem wklej poniższy kod i zapisz zmiany:

/* creative gallery by zyj-kochaj-tworz.pl */
#galeria
{float: left;
margin: 0;
padding: 0px;
width:780px;
background-color: #fff; }
.sekcjagalerii {
float: left;
 margin:20px;
border: 10px
solid #f1f1f2;
padding: 0;
width: 325px;
margin:22px;
.sekcjagalerii img {
width: 100%;
float: left; margin:0; padding: 0;
.sekcjagalerii img:hover {
margin:0; padding: 0;
opacity : 1.00;
}
.sekcjagalerii:hover {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);
opacity : 1.00;}
Jeśli w powyższej instrukcji opisałam coś niejasno bądź użyłam skrótu myślowego i masz wrażenie, że czegoś w niej brakuje to pisz śmiało. Mam nadzieję, że powyższa instrukcja pomoże Wam w stworzeniu przejrzystej galerii prac kreatywnych. Piszcie również jak powinna wyglądać Wasza idealna galeria.

Twój głos jest dla mnie ważny

Na koniec mam małą prośbę. Zajrzyj na boczny pasek i zaznacz w mini-ankiecie jakiego rodzaju wpisy najbardziej chcesz widzieć na Żyj Kochaj Twórz.


10 komentarzy:

  1. Prosta i efektowna galeria i instrukcja też świetna! :) a ankietę dotyczącą wpisów chyba zrobię i u siebie... ;) dziękuję za inspirację!

    OdpowiedzUsuń
  2. Fajny i pomocny wpis pozdrawiam serdecznie beata

    OdpowiedzUsuń
  3. Mam kolejne wyzwanie przed sobą ;) Tylko najpierw muszę obmyślić gdzie tę galerię ulokować.
    Kurs wydaje się przejrzysty. Jak napotkam problemy, to będę cię "męczyć" ;)

    OdpowiedzUsuń
  4. Robiłam taką galerię jakiś czas temu, ale obeszłam to w trochę inny sposób: najpierw dodałam wszystkie zdjęcia jedno pod drugim, wybrałam format ten mniejszy, potem zmieniłam widok na HTML i pokasowałam część kodu, która odpowiadała za wyświetlanie zdjęć pod sobą. Co trzecie zdjęcie dodałam znacznik przejścia do nowej linii i usunęłam formatowanie, które było przy każdym ze zdjęć domyślnie. Wyszło to tak:
    http://www.rock-and-doll.pl/p/miot-arctica-galeria.html

    OdpowiedzUsuń
  5. Bardzo fajnie wyszła ta galeria. Aż mi szczęka opadła, że bez CSS da się wszystko sensownie poukładać na stronie statycznej. Z doświadczenia wiem, że wszystko lubi się tam rozjeżdżać:)

    OdpowiedzUsuń
  6. Męcz bo u mnie działa, ale przy robieniu instrukcji łatwo coś opisać nie precyzyjnie bądź u kogoś innego pojawiają się jakieś inne, nie przewidziane okoliczności:)

    OdpowiedzUsuń
  7. Bloggerowa mini ankieta to fajna sprawa, szczególnie jeśli człowiek potrzebuje szybkiej i konkretnej informacji,

    OdpowiedzUsuń
  8. Dziękuję :-). Też dość długo dumałam, jak tu sprawę ugryźć, bo na wordpress są chyba specjalne wtyczki, a blogger żadnych gotowych rozwiązań nie proponuje. Nawet miałam zamiar umieścić same galerie na osobnym serwerze i utworzyć je za pomocą modułu WEB z Lightrooma i jako zewnętrzne linki podpiąć pod bloga. Na szczęście udało się coś wykombinować bezpośrednio na bloggerze :-).

    OdpowiedzUsuń
  9. Zdjęcia na bloggerze można kadrować i wyświetlać w różnych rozmiarach bez angażowania programów graficznych. Muszę znaleźć chwilę o napisać poradnik na ten temat.
    Bawiłem się kiedyś galeriami z facebooka i picasa web albums: http://prophotoblogs.blogspot.com/p/album-picasa.html ale chwilowo nie mam czasu na dopracowanie kwestii lightboxa (na przykładzie jest zewnętrzny a wolałbym korzystać z bloggerowego).

    OdpowiedzUsuń

Zostaw po sobie ślad. Każdy komentarz napędza do działania i dodaje skrzydeł. Właśnie Twój głos chcę usłyszeć!