zdjęcia

WordPress #2 • Zdjęcia – dodawanie/edycja

11 października 2016

Kategorie: CMS , Poradnik , WordPress

Autor: Rachela Markwica

Artykuł bez zdjęć lub innych multimediów może być nudny i mało zachęcający do przeczytania przez odbiorcę. Nikt przecież nie lubi czytać bloku tekstu, który może się ciągnąć, ciągnąć i ciągnąć. Musimy zadbać o to, aby zdjęcia były dodane w prawidłowy sposób, co nie zawsze jest łatwe do zrobienia.

Dodawanie zdjęć do WordPress

Zacznijmy od najprostszej, a zarazem najważniejszej rzeczy: jak dodać zdjęcie w WordPress? Istnieją co najmniej dwa sposoby:

Sposób 1 :

Nie ważne, czy właśnie tworzymy wpis (zobacz nasz artykuł: WordPress #1 Jak dodać nowy wpis?), czy tworzymy nową stronę w Panelu Administracyjnym (zwanym dalej PA) dodawanie multimediów (w tym zdjęć) jest takie samo. Na samej górze, pod polem do wpisania tytułu jest przycisk „Dodaj medium

dodaj-medium

Po kliknięciu tego przycisku jesteśmy przenoszeni do widoku biblioteki multimediów(1) lub mamy możliwość dodania nowego pliku (2)

biblioteka-multimedia

Jeżeli zdjęcie, które chcemy dodać znajduje się w bibliotece wystarczy na je zaznaczyć i nacisnąć przycisk Dodaj do wpisu, który znajduje się w prawym, dolnym rogu. Możemy zaznaczyć więcej, niż jedno zdjęcie.

Sposób 2:

mediaW bocznym pasku znajduje się przycisk Media.

Po jego kliknięciu jesteśmy przenoszeni do biblioteki mediów, gdzie możemy zobaczyć wszystkie zdjęcia, filmy i inne multimedia jakie są na naszej stronie. Możemy je sortować według rodzaju.

Podobnie jak w przypadku sposobu pierwszego po kliknięciu przycisku „Dodaj nowe” jesteśmy przeniesieni do widoku Biblioteki Mediów lub do dodawania nowego pliku.

 „Personalizacja” zdjęcia

Samo wstawienie zdjęcia nie zawsze jest tym, czego potrzebujemy. Bardzo często chcemy, aby nasze zdjęcie:

  • było wycentrowane,
  • było ustawione do lewego marginesu,
  • było ustawione do prawego marginesu,
  • posiadało wymiary 200px na 100px.

Nasze zdjęcie możemy personalizować na dwa sposoby.

Sposób 1 – Kiedy zdjęcie jest już dodane do wpisu:

Jeżeli nasze zdjęcie jest dodane do wpisu musimy na nie kliknąć. Pojawią się nad nim różne opcje:
edycjaPierwsza opcja ustawi zdjęcie do lewego marginesu.

Druga opcja wycentruje zdjęcie.

Trzecia opcja ustawi zdjęcie do prawego marginesu.

Czwarta opcja usunie całe formatowanie (obrazek nie jest ustawiony do żadnej krawędzi, ani wycentrowany)

Piąta opcja (ikona ołówka) pozwoli na przejście do pola edycji zdjęcia.

Szósta opcja (ikona krzyżyka) usunie nasze zdjęcie z wpisu (nie jest to równoznaczne z usunięciem pliku z serwera).

Edycja zdjęcia

Po kliknięcia ikony ołówka przechodzimy do Szczegółów obrazka (kliknij na zdjęcie, aby zobaczyć je w większej rozdzielczości)

szczegoly

  1. Czasami zdjęcia mogą się nie załadować. W takim przypadku obrazek powinien mieć ustawiony tekst alternatywny, który wyświetli się w przypadku nie załadowania zdjęcia. Pamiętaj, aby był związany z zdjęciem.
  2. W widoku szczegółów obrazka możemy również ustalić, czy obrazek ma być wyrównany do lewego/prawego marginesu, do środka lub bez wyrównania.
  3. Opcja rozmiar pozwala ustawić nam wymiary zdjęcia. Możemy skorzystać z czterech opcji:
    1. Pełny rozmiar
    2. Duży
    3. Średni
    4. Miniatura

    lub ustalić własne wymiary.

  4. Nasze zdjęcie może być odnośnikiem np. do innego artykułu na naszej stronie.
  5. Możemy nadać naszemu obrazkowi tytuł.
  6. Jeżeli programistaustawił kilka klas CSS dla różnych obrazków możemy ją dodać za pomocą tej opcji. Np. możemy mieć klasę round jeśli nasz obrazek ma być okrągły, klasę blur jeśli nasz obrazek ma być rozmazany itd.
  7. Jeżeli nasz obrazek jest odnośnikiem możemy ustawić, aby link, do którego przenosi otwierał się w nowej karcie przeglądarki

Sposób 2 – Kiedy zdjęcie nie znajduje się w wpisie:

Jeżeli nasze zdjęcie nie znajduje się w wpisie możemy nacisnąć przycisk Dodaj medium lub udać się do zakładki Media. Następnie klikamy na wybrane przez nas zdjęcie. Pokazują nam się szczegóły obrazka i możemy ustawić prawie wszystkie opcje, które opisałam w sposobie pierwszym (kliknij na zdjęcie, aby je powiększyć).

edycja-media

Pozycja zdjęcia

Wróćmy jeszcze na chwilę do ustalania pozycji obrazka. Jak wspomniałam wcześniej zdjęcie może:

  • być ustawione do lewego marginesu,
  • być ustawione do prawego marginesu,
  • być wyśrodkowane,
  • nie być ustawione.

Bardzo ważne są w tym przypadku style CSS. Zdjęcia nie będą się ustawiały tak jak chcemy jeżeli nie będzie dodanego poniższego kodu:

img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

Jest to domyślny kod od WordPress, który umożliwia ustalanie pozycji zdjęcia.

*Jeżeli mają Państwo problem z zdjęciami, które dodajesz lub nie wyświetlają się one prawidłowo, zachęcamy do kontaktu z nami. Chętnie pomożemy w rozwiązaniu tego lub innego problemu związanego z stronami WWW.

Skontaktować się z nami mogą Państwo za pomocą strony Kontakt lub korzystając z poniższych danych kontaktowych:

E-mail: [email protected]

Numer telefonu: 690 013 595 lub 793 166 181