Ilustrowanie tekstów

Cztery kroki

Ilustrowanie tekstów w Joomla! wymaga czterech kroków:

• wczytania pliku z grafiką,
• oznaczenia w tekście miejsca wstawienia obrazka,
• dodanie obrazka,
• określenia parametrów jego prezentacji.

Krok 1: Wczytanie obrazka

Aby wczytać obrazek do zilustrowania artykułu:

1. W edytorze artykułów kliknij w pasku narzędzi przycisk Wczytaj [Upload Image]
   
   
2. W oknie dialogowym kliknij przycisk Przeglądaj [Browse]
   
   
3. W kolejnym oknie dialogowym wskaż plik grafiki, którą chcesz wczytać.
   
   
4. W oknie dialogowym kliknij przycisk Wczytaj [Upload].
   
   
5. W edytorze artykułów kliknij w pasku narzędzi przycisk Zastosuj [Apply]

Obrazki zostanie umieszczony w Bibliotece mediów i od tej chwili będzie można go wykorzystać do zilustrowania dowolnego artykułu. Pliki z grafikami można umieścić w Bibliotece mediów wcześniej, o czym piszemy w dalszej części.

Krok 2: oznaczenie w tekście miejsca wstawienia obrazka

Do oznaczania w tekście miejsca, w którym chcemy umieścić obrazek służy magiczny przycisk Wstaw obraz: [Insert Image]: . Jest on dostępny zawsze, bez względu na to, czy korzystamy ze zwykłego edytora tekstu czy też z edytora typu WYSIWYG. Przycisk ten umieszczany jest przy dolnych krawędziach pól tekstowych.

Przycisk ten wstawia w miejscu obrazka specjalny znacznik {mosimage}, który można także wpisać ręcznie. Skorzystanie z przycisku jest jednak wygodniejsze i chroni przed popełnieniem błędu.

Aby oznaczyć miejsce, w którym ma być wstawiony obrazek:

1. Ustaw kursor myszki w tym miejscu tekstu,
2. Kliknij przycisk Wstaw obraz lub wpisz kod znacznika: {mosimage}

Słowo {mosimage} musi być umieszczone w nawiasach klamrowych, bez żadnych spacji.

Krok 3. Dodanie obrazka

Teraz trzeba wskazać Joomla!, który z obrazków dostępnych w Bibliotece mediów ma wstawić w miejscu znacznika {mosimage}. W tym celu:

1. Kliknij w edytorze artykułu zakładkę Grafiki [Image]
2. Zaznacz na liście rozwijanej: Wybierz plik obrazu z galerii obrazek, który chcesz wstawić do tekstu. Na dole pojawi się jego miniatura.
3. Kliknij przycisk Dodaj [Add]. Nazwa pliku z obrazem zostanie wstawiona do wykazu Dodane grafiki [Content Images].
4. Jeśli dodajesz więcej, niż jeden obrazek, ustal kolejność, w jakiej mają się pojawiać w tekście. Zaznacz w tym celu nazwę obrazka i użyj jednego z przycisków: w górę [up] lub w dół [down].

Uwaga: Obrazki mogą być umieszczone w różnych katalogach Biblioteki mediów. Stąd poniżej listy Wybierz plik obrazu z galerii [Gallery Images] najduje się lista rozwijana Podfolder [Sub-folder] zaznacz katalog, w którym znajduje się plik obrazka. W polu listy powyżej ukaże się wykaz dostępnych obrazów.

Uwaga: Aby powtórzyć jakiś obrazek dwukrotnie, trzeba najpierw ustalić parametry prezentacji pierwszej kopii. Dopiero potem będzie możliwe dodanie kolejnej kopii tego obrazka.

Krok 4: Określenie parametrów prezentacji obrazka

W kolejnym kroku trzeba ustalić parametry prezentacji każdego obrazka:

1. Kliknij w polu Dodane grafiki nazwę pliku z obrazkiem. W polu źródło [Source] poniżej zostanie umieszczona ścieżka dostępu do pliku z obrazkiem.
2. Określ w polu Wyrównanie [Align] położenie obrazka względem tekstu:
   • brak [none] - zaznacz tę opcję, gdy umieszczasz niewielki obrazek wewnątrz akapitu,
   • lewa [Left] - zaznacz tę opcję, gdy chcesz umieścić obrazek w bloku tekstu po jego lewej stronie,
   • środek [Center] - zaznacz tę opcję, gdy chcesz umieścić obrazek między blokami tekstu i wyśrodkować go,
   • prawa [Right] - zaznacz tę opcję, gdy chcesz umieścić obrazek w bloku tekstu po jego prawej stronie.
3. Opisz zwięźle obrazek w polu Tekst zastępczy [Alt Text]. Tekst ten jest wyświetlany w miejscu obrazka, gdy użytkownik wyłączy w swoje przeglądarce wyświetlanie grafiki albo gdy z jakichś powodów obraz nie zostanie prawidłowo odczytany. Tekst zastępczy jest również odczytywany przez mechanizmy wyszukiwarek internetowych.
4. Ustal w polu Obramowanie [Border] grubość ramki wokół obrazka. Rozmiar określamy w pikselach.
5. Kliknij przycisk Zastosuj [Aply].

Aby opatrzyć obrazek podpisem, ustal jego parametry:

1. W polu Podpis [Caption] wpisz tekst podpisu
2. W polu Położenie [Position]: określ miejsce podpisu - nad czy pod obrazkiem.
3. W polu Wyrównanie [Caption Align] ustal sposób justowania podpisu:
   • brak - ustawienie domyślne, podpis będzie wyjustowany zgodnie z właściwościami określonymi w arkuszu stylów dla bloku div, zwykle od lewej,
   • środek [center] - podpis zostanie wyśrodkowany,
   • lewa [left] - podpis zostanie wyrównany do lewej krawędzi bloku z obrazkiem,
   • prawa [right] - podpis zostanie wyrównany do prawej krawędzi bloku z obrazkiem,
4. W polu Szerokość [Width] określ w pikselach szerokość podpisu. Jeśli szerokość będzie większa, niż szerokość obrazka, po lewej i prawej stronie obrazka pojawią się marginesy.
5. Kliknij przycisk Zastosuj [Aply].

Osadzanie grafik i animacji w edytorach tekstów

Edytory typu WYSIWYG dostarczają także własne narzędzia osadzania grafiki (ikona Wstaw obraz lub Wstaw animację Flash w edytorze TinyMCE). Dane obrazka lub animacji można również wpisać w zwykłym edytorze lub w trybie HTML edytora WYSIWYG, wg poniższych wzorów:

Znacznik obrazka lub animacji GIF:

<img src="ścieżka dostępu" alt="tekst alternatywny" 
title="tytuł obrazka" longdesc="opis obrazka" width="szerokość w pikselach" 
heigth="wysokość w pikselach" caption="Podpis" border="0" />

Znacznik animacji Flash:

<object type="application/x-shockwave-flash"
data="ścieżka_dostępu/nazwa.swf"width="100%" height="100%">
   <param name="movie" value="ścieżka_dostępu/nazwa.swf" />
   <param name="wmode" value="transparent" /></object>

Uwaga: Teksty w edytorze TinyMCE (oraz innych) można też ilustrować, korzystając z przycisku (ikony) w pasku narzędzi edytora Wstaw obraz. Niektóre z edytorów - w tym TinyMCE - pozwalają także na wstawianie do tekstu artykułów animacji Flash.