Obrazki w treści
Obrazki w treści pozwalają wzbogacić zawartość strony o grafiki umieszczane bezpośrednio w edytowanym tekście. Funkcja sprawdza się przede wszystkim przy dodawaniu ikon, ilustracji, schematów oraz innych niewielkich elementów graficznych. W przypadku większych zdjęć zaleca się korzystanie z dedykowanych pól obrazów dostępnych w układach, co zapewnia lepszą responsywność i spójny wygląd strony.
Dobre praktyki
- W przypadku dużych zdjęć korzystaj z pól obrazów dostępnych w układach zamiast osadzania ich bezpośrednio w treści.
- Dodawaj wyłącznie grafiki związane z prezentowaną treścią.
- Optymalizuj rozmiar i wagę obrazów przed przesłaniem do systemu.
- Uzupełniaj tekst alternatywny (ALT) dla każdej grafiki.
- Zachowuj odpowiednie odstępy pomiędzy obrazkami a tekstem, aby zwiększyć czytelność.
Wskazówka SEO
Dodawaj do obrazów opisowe teksty alternatywne (ALT) zawierające naturalny opis grafiki. Ułatwia to wyszukiwarkom interpretację zawartości obrazów i poprawia dostępność strony.
Wskazówka UX
Nie umieszczaj zbyt wielu obrazków w jednym fragmencie tekstu. Grafiki powinny uzupełniać treść, a nie odwracać od niej uwagę.
Jak dodać Obrazki w treści?
Standardowym i rekomendowanym sposobem dodawania grafik w DMSshop jest skorzystanie z opcji „Wybierz zdjęcie na dysku” dostępnej w formularzu edycji wiersza, z użyciem gotowych układów określających relację tekstu do obrazu. Takie podejście gwarantuje prawidłowe rozmieszczenie grafik oraz spójny wygląd strony.
W sytuacjach wymagających niestandardowego umiejscowienia obrazu — na przykład przy wstawianiu ikon w tabelach, symboli plików PDF lub Word bezpośrednio w treści — należy użyć edytora tekstu, który umożliwia ręczne osadzanie grafik w wybranym miejscu.
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 plik został poprawnie przesłany na serwer i wstawiony do edytora. |
| Grafika jest zbyt duża lub rozciągnięta. | Przygotuj obraz w odpowiednich wymiarach przed dodaniem go do treści. |
| Tekst przylega do obrazka. | Ustaw odpowiednie wyrównanie lub odstępy wokół grafiki. |
| Obrazek spowalnia ładowanie strony. | Zmniejsz rozmiar pliku i zoptymalizuj grafikę przed przesłaniem. |
| Grafika nie wygląda poprawnie na telefonie. | Po dodaniu obrazka sprawdź wygląd strony na urządzeniach mobilnych i w razie potrzeby dostosuj jego rozmiar lub sposób umieszczenia. |