Jak dodać pojedyncze zdjęcie do wpisu/strony?

  • Poziom trudności:

Treści opatrzone zdjęciami lepiej się czyta. Z tej zasady korzystają gazety, prasa kolorowa, a także internet. Blogerzy umieszczają na swoich platformach tylko teksty, które są opatrzone zdjęciem. Portale kuszą kolorowymi fotografiami w walce o każdą minutę spędzoną na witrynie. Warto w tej sytuacji nauczyć się jak dodawać zdjęcia do wpisu oraz strony.

Aby dodać nowe zdjęcie do tekstu kliknij na przycisk „Dodaj medium”.

dodaj-medium

Teraz musisz tylko wybrać zdjęcie z dysku lub z biblioteki mediów i gotowe:

jak-dodac-zdjecie

Pamiętaj aby przed sprawdzeniem jak wygląda zdjęcie zapisać edytowaną stronę/wpis.

W opcjach dodawania zdjęcia możesz ustalić czy zdjęcie powinno się wyświetlać z lewej lub prawej strony albo na środku. Jeśli odnośnikiem do zdjęcia będzie plik multimedialny, wtedy po kliknięciu będzie otwierać się duża fotografia (o ile zostało to wcześniej poprawnie skonfigurowane). Zdjęcie może również kierować do innej podstrony w Twoim serwisie albo do strony zewnętrznej. Wtedy powinieneś skorzystać z opcji Odnośnik do własny adres URL i w dodatkowym polu wprowadzić linka.

Co zrobić kiedy dodane zdjęcie jest zbyt duże?

Zdarzyło się wam kiedyś wrzucić poprzez edytor zdjęcie, które nie dość że wykracza poza kolumnę z treścią ale jeszcze zasłania prawą kolumnę i jest tak duże, że nie sposób obejrzeć go w całości? To właśnie problem z umieszczaniem dużych zdjęć i wyświetlaniem ich w treści.

Zobacz jak może wyglądać dodawanie źle dobranego zdjęcia do treści:

zdjecie-za-duze

Fotografia 1800 x 1200 pikseli jest zdecydowanie za duża, szczególnie że nasza lewa kolumna ma szerokość 629px.

Pośrednim rozwiązaniem jest wprowadzenie w części Wygląd -> Edytor w pliku style.css następującego zapisu:

img {
	max-width: 100%;
	height: auto;
}

.alignleft, .alignright {
	max-width: 50%;
}

Pierwsze 4 linijki sprawią, że zdjęcia dodawane na stronie (w dowolnym miejscu) nie będą miały szerokości większej niż kontener w którym się znajdują. Z polskiego na nasze – znaczy to, że jeśli dodasz większe zdjęcie w lewej kolumnie to dostosuje się ono do szerokości kolumny. Identycznie z lewą kolumną, kontenerem stopki czy nagłówka. Jeśli zdjęcie nie będzie w żadnym kontenerze ograniczającym jego szerokość to będzie wyświetlać się od lewej do prawej krawędzi ekranu.

No dobra, a co robią linijka 6-8? To reguła sprawiająca, że zdjęcia które mają ustawione wyrównanie do lewej lub prawej (do takich zdjęć dodawana jest klasa alignleft lub alignright). Wszystkie zdjęcia wyrównywane do którejkolwiek ze strony będą miały szerokość 50% kolumny z treścią. Dzięki temu jeśli zależy Ci na dodaniu zdjęć, które będą oblewane przez tekst, wtedy możesz skorzystać z tego rozwiązania aby dokonać automatyzacji umieszczania fotografii.

Pisałem kilka akapitów wcześniej, że jest to rozwiązanie pośrednie. Dlaczego? W momencie wrzucania dużych zdjęć i ich zmniejszania przy pomocy kodu CSS fotografie są ładowane w całości, a dopiero później zmniejszane. Znaczy to, że aby wyświetlić miniaturowe zdjęcie w treści przeglądarka musi wczytać całe duże zdjęcie co mocno spowalnia jej działanie. Jeśli spotkaliście się kiedyś z powolnym wczytywaniem miniaturowych fotografii (od góry do dołu, milimetr po milimetrze) to najprawdopodobniej problemem jest za duże zdjęcie umieszczone w tym miejscu.

Jak zmniejszyć zdjęcie przy pomocy wbudowanego edytora?

Wchodząc do edycji zdjęcia (klikając na ikonę ołówka) znajdziesz dwie opcje:

  • zmiana rozmiaru na własny
  • edycję oryginału i skalowanie/przycinanie obrazka
prawidlowe-zmniejszanie-zdjecia

Pierwszy sposób nie rozwiązuje Twojego problemu. Zamiast zmniejszyć zdjęcie i przyspieszyć ładowanie strony w dalszym ciągu wymuszasz na przeglądarce ładowanie ciężkiego zdjęcia i zmniejszanie go po załadowaniu. Różnica jest taka, że poprzednio podawałeś procentowo jak mały ma być obraz, a teraz podajesz szerokość w pikselach.

Najlepszym wyjściem jest edycja oryginału i skalowanie zdjęcia. Wtedy zdjęcie umieszczone na serwerze zostaje zmniejszone i znacznie skraca się proces jego ładowania.

Nie znalazłeś odpowiedzi na swoje pytania? Zobacz inne zastosowania funkcji Dodaj medium:

  • Jak wstawić kilka dużych zdjęć jedno pod drugim?
  • Jak wstawić galerię?
  • Jak wstawić galerię składającą się z mozaiki zdjęć?
  • Jak utworzyć listę odtwarzania plików dźwiękowych?
  • Jak dodać obrazek wyróżniający?
  • Jak dodać odnośnik w tekście?

Jeśli masz jakieś pytanie wpisz je w komentarzu. Mam nadzieję, że ta instrukcja przyda Ci się przy dodawaniu kolejnych fotografii przez edytor WordPressa.

fot. Natalia Sławek z jestrudo.pl

UDOSTĘPNIJ
WordPress dla początkujących