Jak dodać krawędzie (obramowanie) do obrazów ? cz.1

Użytkownicy, którzy już dawno korzystają z WordPressa, na pewno znają stwierdzenie „Im więcej wtyczek posiada strona, tym gorsza jest wydajność strony”. Ale popularność tego systemu wiążę się przede wszystkim z tym, ze mamy do dyspozycji wiele rozszerzeń, które ułatwiają prace nad stroną. A więc praktycznie nie ma takiego problemu, który nie udałoby się rozwiązać za pomocą wtyczek. Ale czy zawsze opłać się ich używać? Na ten temat możecie znaleźć Państwo dużo ciekawych artykułów, dlatego nie będziemy ich powtarzać. Jedynie na co, chcielibyśmy zwrócić uwagę to fakt, że wiele rzeczy można rozwiązać bez konieczności instalacji kolejnych wtyczek wordPress, można po prostu ZMODYFIKOWAĆ KOD!

Dlatego powstał ten artykuł, aby pokazać że większość prostych rzeczy można zrobić poprzez modyfikację kodu, a nie instalacji kolejnej wtyczki. Pokażemy Państwu jak można rozwiązać dojść popularny problem za pomocą wtyczki wordPress i korzystając z „czystego” CSS. Dodamy krawędź (obramowanie) do obrazów we wpisie, aby wyróżnić je wśród zawartości strony.

Na początek, sprawdzimy czy istnieją wtyczki, które rozwiążą nasz problem.

Dodanie krawędzi (obramowania) do obrazów za pomocą wtyczki WP Image Borders

Dla dodania krawędź do obrazów skorzystamy się z darmowej wtyczki WP Image Borders, która znajduje się na stronie serwisu wordpress.org. Można ją zainstalować bezpośrednio z repozytorium WordPress. Dlatego przejdziemy do sekcji Wtyczki – Zainstalowanie wtyczki – Dodaj nową i w oknie wyszukiwarki wpiszemy nazwę wtyczki (rys. 1). Po wyszukaniu wtyczki WP Image Borders, instalujemy ją i włączamy wtyczkę.

Rysunek 1. Instalacja wtyczki WP Image Borders

Po dokonaniu powyższych kroków możemy przejść do ustawień wtyczki. Dlatego należy wybrać sekcję Ustawienia – WP Image Borders, która pojawiła się po instalacji rozszerzenia (rys. 2). W niej umieszczone są wszystkie opcji pozwalające dopasować wtyczkę do naszych potrzeb.

Rysunek 2. Ustawienia wtyczki WP Image Borders

Sekcja Target Images (Obrazy docelowe) pozwala ustawić, do jakich obrazów będzie dodawana krawędź. To mogą być wszystkie obrazy we wpisach na stronie oraz osobne zdęcia. W tym przypadku należy stworzyć własną klasę CSS.

Sekcja Customize Image Borders (Dostosuj krawędzie obrazu) zawiera opcja dla ustawienia krawędzi: wyboru typu linii, jej szerokości, zaokrąglanie kątów oraz kolor linii.

Sekcja Add Drop Shadows to Images (Dodaj cienie do obrazów) zawiera odpowiednie opcji do dodania cieni do obrazków.

Wychodząc z opisanych powyżej opcji, widać, że wtyczka zawiera tylko podstawowe rzeczy. I chociaż nie posiada ona polskojęzycznej wersji, jej użycie nie będzie stanowiło żadnego problemu dla osób początkujących.

Pokażemy teraz jak dodać krawędź do obrazu za pomocą tej wtyczki. Jak pisaliśmy powyżej w ustawieniach WP Image Borders jest opcja, która dodaje wybraną przez nas krawędź do wszystkich obrazów we wpisach na stronie. Jeśli włączymy jej można od razu przejść do sekcji Customize Image Borders (Dostosuj krawędzie obrazu) i zarządzać wyglądem krawędzi.

Ale pójdziemy inną ścieżką i pokażemy Państwu jak stworzyć nową klasę CSS, którą będziemy stosować tylko do wybranych obrazów. Dlatego w pole Additional CSS classes (Dodatkowe klasy CSS) wpiszemy nazwę klasy, np. .border-image (rys.3). W tym przypadku wszystkie zmiany w sekcji Customize Image Borders (Dostosuj krawędzie obrazu) będą dotyczyły tej klasy.

Rysunek 3. Ustawienia opcji dla klasy .border-image

Teraz przejdziemy do ustawienia opcji krawędzi. Ponieważ używamy wtyczkę do celów przykładowych, nie będziemy sprawdzać różne kombinacji opcji. Ustawimy jakieś dowolne znaczenia (rys.3) i zapiszemy wprowadzone zmiany za pomocą odpowiedniego przycisku.

Następny krok polega na dodaniu krawędzi do obrazku. Dlatego stworzymy nowy wpis, który będę zawierał kilka zdjęć. W jakości przykładu weźmiemy temat „Polskie krajobrazy” (rys. 4):

Rysunek 4. Artykuł z obrazkami bez krawędzi

Dodamy do pierwszego obrazku krawędź stworzoną za pomocą wtyczki WP Image Borders. Dlatego w wizualnym edytorze przejdziemy do opcji obrazu, klikając przycisk Edytuj. Otworzy się nowe okno, w którym należy znaleźć linijkę Klasa CSS obrazka i wstawić nazwę stworzonej przez nas klasy – border-image (rys.5).