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

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!

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:

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 ;)