Obrazki w treści
Obraz w treści umożliwia wstawienie grafiki bezpośrednio do edytowanego tekstu. Funkcja pozwala określić położenie obrazka względem treści, jego rozmiar oraz dodatkowe ustawienia, dzięki czemu można tworzyć bardziej atrakcyjne i czytelne artykuły oraz opisy.
Dobre praktyki
- Korzystaj z obrazków w treści tylko wtedy, gdy standardowe układy tekstowe nie spełniają Twoich potrzeb.
- Zawsze uzupełniaj pole Tekst zastępczy (ALT) dla każdej grafiki.
- Zachowuj proporcje obrazka podczas zmiany jego rozmiaru.
- Stosuj odpowiednie odstępy od tekstu, aby poprawić czytelność.
- Przed publikacją sprawdź, czy obrazki wyświetlają się poprawnie na komputerach i urządzeniach mobilnych.
Wskazówka SEO
Każdy obrazek powinien posiadać unikalny tekst alternatywny (ALT), który opisuje jego zawartość. Ułatwia to indeksowanie grafik przez wyszukiwarki oraz poprawia dostępność strony.
Wskazówka UX
Nie umieszczaj zbyt dużych obrazków wewnątrz tekstu. Grafiki powinny uzupełniać treść, a nie utrudniać jej czytanie.
Jak dodać Obrazki w treści?
Standardowym i zalecanym sposobem dodawania zdjęć w DMScms jest użycie opcji „Wybierz zdjęcie na dysku” w formularzu edycji wiersza, z wykorzystaniem gotowych układów tekstu względem obrazu. Takie rozwiązanie zapewnia poprawne rozmieszczenie grafik oraz spójność układu strony.
Jeżeli jednak zachodzi potrzeba nietypowego umieszczenia obrazka w treści — np. wstawienia ikonki w tabeli, ikon plików PDF lub Word bezpośrednio w tekście — należy skorzystać z edytora tekstu.
Wstawianie obrazka w treści
Aby umieścić obrazek bezpośrednio w treści:
- Ustaw kursor w miejscu, w którym obrazek ma się pojawić.
- Kliknij ikonę
„Obrazek” w przyborniku edytora tekstu. - Wyświetli się okno dialogowe umożliwiające:
- przesłanie obrazka na serwer za pomocą Repozytorium plików,
- bezpośrednie przesłanie pliku z dysku komputera,
- wybór wcześniej dodanego obrazka z listy plików.
Edycja i modyfikowanie obrazków
Modyfikowanie obrazków odbywa się poprzez zmianę parametrów dostępnych w oknie właściwości obrazu.
W treści można umieszczać obrazki w formatach: JPG, PNG oraz GIF.
Informacje o obrazku
- Adres URL – ścieżka do pliku znajdującego się na serwerze.
- Repozytorium plików – baza plików dostępnych w systemie.
- Tekst zastępczy (ALT) – opis zawartości obrazka, wyświetlany w przypadku braku możliwości załadowania grafiki oraz wykorzystywany przez czytniki ekranów.
- Szerokość i wysokość – wymiary obrazka podawane w pikselach.
- Ikona „Kłódka” – zachowanie proporcji obrazu podczas zmiany rozmiaru.
- Ikona „Strzałka” – przywrócenie oryginalnych wymiarów obrazka.
- Obramowanie – grubość obramowania obrazka (w pikselach).
- Odstęp poziomy / pionowy – margines oddzielający obrazek od pozostałej treści.
- Wyrównaj – wyrównanie obrazka względem tekstu (np. do lewej, do prawej, do środka).
Hiperłącze na obrazku
Obrazek może pełnić również funkcję odsyłacza. W tym celu dostępne są następujące opcje:
- Hiperłącze – umożliwia nadanie linku do obrazka,
- Adres URL – ścieżka do strony internetowej lub pliku,
- Link do podstrony – odsyłacz do podstrony wewnętrznej serwisu,
- Obiekt docelowy – określenie sposobu otwierania odsyłacza (np. w nowym oknie).
Dodatkowe opcje
- Wyślij – umożliwia przesłanie pliku bezpośrednio z dysku komputera użytkownika.
- Zaawansowane – zawiera dodatkowe, specjalistyczne ustawienia obrazu.
Stosowanie powyższych zasad pozwala na prawidłowe i bezpieczne dodawanie grafik w treści, bez ryzyka problemów z układem strony lub wyświetlaniem obrazów.
Przykład
Załadowana grafika została umieszczona w obramowaniu o grubości 1 px, z ustawionymi odstępami pionowym i poziomym po 5 px oraz wyrównaniem do lewej strony względem otaczającego tekstu.
Widoczna ścieżka w polu „Adres URL” potwierdza, że plik został poprawnie przesłany i zapisany na serwerze.
Efekt
Najczęstsze problemy
| Problem | Rozwiązanie |
|---|---|
| Obrazek nie wyświetla się w treści. | Sprawdź, czy został poprawnie przesłany na serwer oraz zapisany w treści strony. |
| Obrazek jest rozciągnięty lub zniekształcony. | Zachowaj proporcje podczas zmiany rozmiaru, korzystając z opcji blokady proporcji. |
| Tekst przylega do obrazka i jest trudny do odczytania. | Ustaw odpowiednie odstępy poziome i pionowe w ustawieniach obrazka. |
| Kliknięcie obrazka nie otwiera wskazanej strony. | Zweryfikuj ustawienia hiperłącza i sprawdź, czy adres URL lub wybrana podstrona są poprawne. |
| Obrazek wygląda dobrze na komputerze, ale nie na telefonie. | Sprawdź jego wymiary oraz rozmieszczenie w treści i w razie potrzeby zastosuj mniejszą grafikę lub standardowy układ ze zdjęciem. |