Najnowsze


Jak ustawić automatyczną jednakową wielkość zdjęć równą szerokości posta na blogu blogspot

Wstawianie zdjeć na bloga
Dzisiaj o tym, jak ustawić jednakową szerokość zdjęć na całą szerokość posta (szpaltę posta). Wszystko o tym jak wstawiać zdjęcia oraz zmienić ich rozmiary na blogu blogger. Interesują nas obrazy wstawiane do postów. Chcemy ustawić zdjęcia tak, aby automatycznie dopasowały się do szerokości obszaru posta. Czyli mówiąc inaczej, aby wypełniły całą jego szerokość.


Jak zatem to zmienić i ustawić szerokość zdjęcia by była równa szerokości posta? ... wystarczy trochę kodu. Zobacz jakie to proste!


Blog ze zdjęciami, które mają szerokość równą szerokości obszaru  posta


Jak zmienić wielkość/rozmiar obrazka/zdjęcia?


Wstawione zdjęcie otrzymuje domyślny rozmiar "Średni", a więc szerokość 320px. Wystarczy kliknąć na wstawionym obrazku, by otworzyć opcje wielkości i pozycji obrazu.



Możesz ustawić by zdjęcie było: "Małe", "Średnie", "duże", "Bardzo duży" lub "Oryginalny rozmiar". Możesz również ustawić jego pozycję (położenie): "Do lewej", "Do środka", "Do prawej". W większości przypadków najlepiej ustawić zdjęcie na środku, a wielkość ustawić na "Bardzo duże".

Parametr "Bardzo duże" ustawia szerokość zdjęcia na 640px. Jeśli jednak nasz obszar posta jest szerszy (ma np 800px) to z obu stron zdjęcia pozostanie jeszcze puste miejsce i zdjęcie nadal moe wyglądać  na małe.

A ... i jeszcze jedno. Być może kusi Cię ostatni parametr, czyli ustawienie rozmiaru zdjęcia na "Oryginalny rozmiar". W tym momencie odradzam jednak takie rozwiązanie. Dlaczego? Ponieważ najprawdopodobniej nie zwracałeś wcześniej uwagi na to jakie rozmiary ma twój obraz, ani też jaką wielkość ma plik z tym obrazem (ile KB).

Może więc prowadzić to do takich sytuacji jak poniżej. Zdjęcie o szerokości 2000px ustawione jako "Oryginalny rozmiar" wyświetlone jest na blogu dokładnie z rozmiarem oryginalnym czyli 2000px, a szerokość obszaru posta to 546px (szablon Prosty bloggera). Zdjęcie nie zmieściło się i pokrywa również pasek boczny bloga:
Wykorzystanie opcji Oryginalny rozmiar dla zbyt duzych zdjec
Wstawiony obraz z parametrem "Oryginalny rozmiar"
Tak wygląda blog po wstawieniu zdjęcia i wybraniu opcji "Oryginalny rozmiar" na blogu mającym szablon bloggera (a dokładniej szablon Prosty).

1. Zmiana rozmiaru zdjęć

Zmiana rozmiaru zdjęć przed umieszczeniem na blogu to bardzo ważny krok, niezależnie od tego czy chcesz wykorzystać moje dalsze wskazówki (odnośnie ustawienia automatycznej wielkości zdjęć).
Zanim prześlesz (wstawisz) zdjęcie na bloga sprawdź jakiej jest wielkości. Nie używaj bardzo dużych zdjęć. Nie jest to wskazane, gdyż spowolni to działanie twojego bloga. Im większy rozmiar zdjęcia, tym wolniej się ono ładuje (wczytuje).
Pamiętaj, że nawet jeśli Ty masz szybie łącze internetowe i widzisz zdjęcie praktycznie od razu, to twoi czytelnicy niekoniecznie. Inną kwestią może być również koszt "zobaczenia" dużych zdjęć na blogu: część czytelników przegląda bloga korzystając np. z telefonu,  i po prostu większe zdjęcia to dla nich większy koszt przesyłu danych.

Większość blogów ma obszar postów gdzieś pomiędzy 600-750px. Dla przykładu wszystkie szablony dostępne na blogerze (czyli te, które możesz normalnie wybierać/zmieniać po prostu klikając na nich) domyślnie mają dostępny obszar posta o szerokości 546px (wielkość tą możesz potem oczywiście zmieniać). Można więc przyjąć, że szerokość zdjęć 800px będzie dla większości blogów odpowiednia.
Wyjątkiem mogą być tylko blogi jednokolumnowe, czyli nie posiadające paska bocznego, czy jakieś specyficzne szablony ustawiające zdjęcia na całą szerokość ekranu. Myślę, że obecnie wstawianie na bloga zdjęć o szerokości większej niż 1000px naprawdę nie ma uzasadnienia
Dobrze jest używać obrazów nieco szerszych niż szerokość posta. Łatwiej jest zmniejszyć obraz już na blogu niż powiększać. Powiększanie małego obrazka spowoduje utratę jego jakości.

Do zmiany rozmiaru zdjęcia możesz użyć dowolnego programu. Ja obecnie najczęściej używam Photoshop'a, ale bardzo dobry jest też bezpłatny GIMP. Możesz też wykorzystać choćby Paint'a, czy programy online typu Pixlr.

Zmiana wymiarów zdjęcia: program Paint

Oto jak łatwo zmienić rozmiar zdjęcia w programie Paint (Windows 10).

1. Otwórz wybrane zdjęcie w programie Paint, a następnie kliknij "Zmień rozmiar".
Zmiana wymiarów zdjęcia. Wymiar obrazu i rozmiar pliku przed modyfikacją

2. Zaznacz opcję "Piksele" i wpisz rozmiar w "W poziomie" 800px. Pamiętaj, by opcja "Zachowaj współczynnik proporcji" była zaznaczona. Kliknij Ok:
 3. Zapisz zmieniony obraz wybierając Plik, a następnie Zapisz.


W ten sposób postępuj z każdym zdjęciem dodawanym na bloga. Zwróć uwagę, że wraz ze zmniejszeniem wymiarów zdjęcia, zmniejszeniu ulega też rozmiar pliku.


2. Dodaj kod CSS

Zakładam, że zdjęcia na blogu mają już właściwą wielkość. Dodamy teraz trochę kodu do szablonu, by zdjęcia automatycznie dostosowywały się do szerokości posta.

1. Przejdź do swojego bloga. Kliknij "Szablon", a następnie "Dostosuj".


2. Kliknij "Zaawansowane", przewiń listę i na samym dole kliknij "Dodaj arkusz CSS". Następnie skopiuj/wklej kod:

/* kod 1: zmiana wielkości zdjęć w postach o ustawionym parametrze "Oryginalny rozmiar" */
.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
}


Uwaga!
Powyższy kod zmienia tylko obrazki, dla których ustawiono parametr "Oryginalny rozmiar". Jeżeli chcesz zmienić wszystkie zdjęcia w postach użyj zamiast niego kodu poniżej:

/* kod 2: zmiana wielkości wszystkich zdjęć w postach */
.post-body img {
width:100%;
height:100%;
display: block;
}

Kod ten spowoduje rozszerzenie zdjęć do całej szerokości posta. Należy jednak pamiętać, że jeśli w postach znajduje się zdjęcie z ustawionym parametrem np "Małe" to zostanie ono sztucznie powiększone. Czyli stracimy na jakości, zdjęcie będzie wydawać się nieostre, "rozmyte", mogą być widoczne pojedyncze piksele.


Po wklejeniu wybranego kodu wystarczy kliknąć przycisk "Zastosuj do bloga".


3. Dodawanie zdjęć do postów

Dodaj teraz obrazy do postów tak jak opisano to w tym poście. Przygotuj zdjęcia przed publikacją zmieniając im wymiary w wybranym programie graficznym np Paint (Krok 1: Zmiana rozmiaru zdjęć). Następnie wstaw zdjęcia do postów ustawiając im parametr "Oryginalny rozmiar".
Wystarczy teraz opublikować posta, by zdjęcia ładnie wypełniły cały obszar posta.

Jeśli masz pytania śmiało pisz poniżej, postaram się na nie odpowiedzieć. A jeśli nie masz pytań ... gratuluję, możesz się teraz cieszyć pięknie wyglądającymi zdjęciami ;)

13 komentarzy:

  1. Hej!

    Próbuję skorzystać z Twojej rady, ale niestety nie udaje się.
    Zmiana w css wpływa tylko na nowe posty, a na najstarsze już nie.

    Np. dodałem do css-ów linijkę .feed-links {display:none !important;} i rzeczywiście w nowych postach tekst: "Subskrybuj: Komentarze do posta (Atom)" znika, ale na stare posty nie ma to wpływu. O co może chodzić?

    Podobnie, w starych postach zniknęły mi formularze komentarzy.

    OdpowiedzUsuń
  2. Dziś trafiłam na tego posta http://www.blogia.pl/2016/01/zmiany-obserwacje-obserwatorzy-blogger-blogspot.html
    i pomyślałam że może możesz mi pomóc. Otóż mam problem z bloggerem.
    Nie mogę zaobserwować żadnego bloga, a jak próbuję to wyskakuje mi jakiś błąd (bX-n0pmdy). Nie wchodzi w grę dodawanie blogów do listów czytelniczej, ponieważ powyżej 300 blogów nie da się już nic tam dodać. Błąd wyskakuje mi od wczoraj, odkąd jest nowy wygląd dodawania do obserwowanych.

    OdpowiedzUsuń
    Odpowiedzi
    1. Hej, problem został już zgłoszony do ekipy bloggera, więc pozostaje cierpliwie poczekać jeżeli nadal nie możesz dołączać do blogów.

      Usuń
  3. Ciekawy artykuł, fajnie gdybyś zrobiła całą serię artykułów o takich elementach tworzenia bloga z uwzględnieniem każdego z portali jak blogger, wordpress itd

    OdpowiedzUsuń
  4. Cześć,
    Potrzebuję pomocy dotyczącej zakładek. Mam je zrobione itp, ale widziałam na kilku blogach, że można zastąpić napis, np "o mnie" obrazkiem, tak, że kiedy klikniesz na obrazek wyświetla ci się strona, ta sama co po kliknięciu napisu.
    Przykładowy blog: http://starstableonline-mel.blogspot.com/
    Tak naprawdę natknęłam się na to przez przypadek, ale bardziej podoba mi się ta opcja niż mało widoczny napis, gubiący się w reszcie (zwłaszcza kiedy jest na pasku bocznym)

    Jak zastąpić tytuł zakładki obrazkiem?

    OdpowiedzUsuń
  5. Bardzo ciekawy artykuł. Czy mogłabyś mi pomóc? Po zastosowaniu kodu do wszystkich zdjęć, odległości pomiędzy zdjęciami zwiększyły mi się. Jak je zmniejszyć? Jest na to jakiś kod css?

    OdpowiedzUsuń
  6. Bardzo mi pomogłaś! Dziękuję Ci bardzo!

    OdpowiedzUsuń
  7. Cześć, pomocny artykuł - Fajnie, że ktoś pomaga również blogerom właśnie na bloggerze.

    Btw. na podstronie Kontakt wkradł Ci się błąd - link "O Mnie" przekierowuje na stronę http://p/o-mnie.html

    Pozdrawiam i życzę powodzenia w rozwoju bloga!

    OdpowiedzUsuń
  8. A ja mam pytanie. Może ktoś wie czy da się zrobić tak, by w poście zdjęcie było duże, ale na stronie głównej, gdzie są tylko pierwsze akapity postów i odnośnik czytaj dalej, żeby zdjecie było miniaturką?

    OdpowiedzUsuń
  9. Cześć Kasiu!
    Mam pytanie :)
    w moim poprzednim szablonie zdjęcia się same dostosowywały. Teraz zmieniłam szablon i już tak nie jest. W ciągu ostatnich kilku miesięcy wstawiałam zdjęcia o szerokości 1500, we wcześniejszym okresie prowadzenia bloga 785. Ustawiałam oryginalny rozmiar.
    Czy teraz wklejając kod CSS 1 - będą mi się skalowały do konkretnej szerokości, czy muszę ją jeszcze gdzieś dodatkowo ustawić?

    Będę wdzięczna za odpowiedź :)

    OdpowiedzUsuń
  10. Dziękuję za ten artykuł - udało się! :)
    Mam tylko jeden problem - przed i po zdjęciu pojawia się wers odstępu, przerwa, której nie ma zaznaczonej nawet w kodzie html, więc nie mogę jej ręcznie usunąć, a nieco burzy mi odbiór. To zmieniło się po dodaniu powyższego kodu css (tego z artykułu, pierwszego)... Czy da się z tym coś zrobić?

    OdpowiedzUsuń
  11. Ja mam z kolei pytanie jak zrobić by ładowane zdjęcia z picasa od razu w poście przybierały oryginalny rozmiar. W przypadku dodania postu gdzie jest kilka zdjęć nie ma problemu ale jak mam po kolei powiększać ponad sto zdjęć to robi się trochę pracy.

    OdpowiedzUsuń

Popularne