„A on mu dalej wstawiał obrazki…” – o ilustrowaniu artykułów

Raz skoczka co z rana tu wskoczył
Podszedł z tyłu Niecny i zajrzał mu w oczy
Skoczek powiedział: „wyłączcie obrazki”
A Niecny mu na to bez łaski, bez łaski
I Niecny mu dalej wstawiał obrazki…

Taki kuplecik powstał już kilkanaście lat temu na czacie Aksamitna Spelunka – pierwszym polskim komunikatorze graficznym. Od tego czasu technika posunęła się nieco do przodu. Dziś mało kto narzeka, że przez ilustracje na stronach przeglądanie serwisów internetowych jest powolne czy niewygodne.

Rzecz będzie o ilustrowaniu artykułów i dołączaniu rozmaitych plików multimedialnych na RockSzanty.pl

Wstawianie zwykłych ilustracji z własnego komputera
Kiedy wstawiasz ilustracje z własnego komputera, plik ilustracji (zdjęcia, grafiki) zostaje przekopiowany na RockSzanty.pl. Ma to tę zaletę, że wstawione zdjęcie nigdy nie zniknie z artykułu. (Można także wstawiać zdjęcia przez wskazanie adresu zdjęcia na innej stronie internetowej. Niestety, kiedy z dowolnego powodu ilustracja na innej stronie stanie się niedostępna, nie będzie także wyświetlana na RockSzanty.pl).

Przygotuj sobie pliki grafiki w dowolnym formacie rozumianym przez przeglądarki jako, np. JPG, GIF, PNG, a nawet BMP. Dla Twojej własnej wygody lepiej będzie, kiedy zgromadzisz wszystkie potrzebne ilustracje w jednym folderze swego komputera. Obrazki można wstawiać do artykułu po kolei (kiedy są potrzebne), albo jedną operacją wrzucić do prywatnej Galerii, którą każdy artykuł posiada. To ważne – artykuł dysponuje swoją własną unikatową galerią ilustracji. Nie musisz przeszukiwać jakiejś ogromnej galerii z tysiącami zdjęć – w Galerii znajdzie się tylko to co samodzielnie wstawisz. Wielka prośba: Spróbuj zmniejszyć zdjęcia z aparatu do rozmiaru nie większego niż 800 pikseli na dłuższym boku. Takie zdjęcia są „lubiane” przez system. Natomiast ogromne zdjęcia prosto z aparatu cyfrowego będą się bardzo długo ładować, a w trudniejszych przypadkach nie władują się w ogóle.

Sposób 1: Po jednym zdjęciu

1. Po pierwsze, postaw kursor myszy w artykule w miejscu gdzie spodziewasz się wstawić obrazek.
2. Tuż nad oknem edytora artykułu, nad paskami narzędziowymi, z lewej strony z góry odnajdziesz takie pole: . Kliknij prostokącik w tym polu (kiedy przesuniesz nań mysz, wyświetli się napis „Dodaj obrazek”.  Pojawi się takie okno:
   
3. Kliknij przycisk „Wybierz pliki”. Pojawi się typowe okno wyboru plików. Odszukaj swoją ilustrację na dysku, wskaż ją myszą i zatwierdź operację. Mniej więcej tak:
   
4. System pracuje chwilę, po czym pokazuje informacje o ilustracji. W tym momencie twój obrazek znajduje się już w Galerii artykułu. Oto jak może wyglądać okno informacji o obrazku:
   
   Wygodnie jest wpisać dobry tytuł obrazka. Np. oryginał nazywa się DSC_070, a my możemy zamiast tego wpisać „Dziewczyny” i później łatwo odnaleźć fotkę w razie potrzeby.

   Ważne: Wpisanie tekstu w pole „Etykieta” spowoduje automatycznie dodanie podpisu do ilustracji. Wpisana etykieta jest zapamiętywana w Galerii. Na początek nie śpiesz się ze stosowaniem automatycznych podpisów. Osobie niedoświadczonej mogą sprawić kłopoty.

   Bardzo ważne: Sposób prezentacji obrazka. Spójrz tutaj:
   
   Jeżeli klikniesz w przycisk „Adres URL pliku” to kliknięcie w zdjęcie później w gotowym artykule przedstawi je w atrakcyjnej formie przeglądu obrazków w oryginalnej wielkości. Zalecamy zawsze wybrać tę opcję.

   Kluczowy jest rozmiar i wyrównanie obrazka. Spójrz tutaj:
   
   Jeżeli podasz rozmiar oryginalny, to do artykułu wstawi się — w tym przypadku — wielkie zdjęcie. Będzie miało szerokość 800 pikseli, a największa akceptowalna szerokość artykułu to tylko 600 pikseli. Żeby Twój obrazek zmieścił się, wybierzesz w tym przypadku rozmiar Średni. (Wielkość obrazka można precyzyjnie regulować przy pomocy „edytora HTML”. Będzie o tym na samym końcu tego artykułu).

   Teraz o Wyrównaniu. W większości przypadków użyjesz opcji „Brak”. Oznacza to, że zdjęcie jest traktowane jak część tekstu – najczęściej wstawisz takie zdjęcie w wolnym, pustym wierszu tekstu. Jest to także najbezpieczniejsze podejście. Jeżeli wybierzesz Wyrównanie do Lewej, to tekst zacznie oblewać fotkę z prawej strony. Jeśli Wyrównanie do Środka, to tekst nie będzie oblewał obrazka – zdjęcie wycentrowane, a jeśli Wyrównanie do Prawej, to tekst obleje ilustrację z lewej strony. Zobacz jak to będzie wyglądało w praktyce:
   
   Wstawianie obrazka z Wyrównaniem innym niż „Brak” potrafi czasem frustrować. Ważne jest na przykład gdzie w artykule znajduje się kursor myszy (zalecamy postawienie go na początku akapitu do którego się odnosi). Możesz przeciągać fotkę myszką w tekście. Jeżeli sposób wstawienia fotki, a szczególnie jej rozmiar Ci się nie podoba, kliknij jeden raz w obrazek i naciśnij klawisz Delete na klawiaturze. Możesz teraz wstawić obrazek z Galerii.

5. Przesuń zawartość okna tak, by widzieć dolną część okienka i kliknij przycisk . Zdjęcie pojawi się w artykule.

Wstawianie obrazka z Galerii
Jeśli obrazek został już wstawiony z twego komputera do Galerii i chcesz powtórzyć operację wstawiania, to:

1. Postaw kursor myszy tam gdzie uważasz powinno znaleźć się zdjęcie w tekście
2. Kliknij „Dodaj obrazek” w menu Add media:
3. W oknie „Dodaj media  ze swojego komputera” kliknij w zakładkę „Galeria” w górnej części okna:
   
   Pojawi się zawartość Galerii. Na poniższym obrazku chwilowa zawartość Galerii artykułu który właśnie czytasz:
   
   W Galerii jest dokładnie tyle obrazków ile zostało wstawione z komputera.
4. Przy zdjęciu które chcesz wstawić znajduje się po prawej stronie napis „Pokaż”. Kliknij go. Pojawią się szczegóły obrazka.
   
5. Przesuń zawartość okna tak by widzieć dolna część informacji o zdjeciu. Wybierz Wyrównanie i Rozmiar po czym kliknij .

Sposób 2: Wstawianie wielu obrazków do Galerii jednym ruchem
A jeśli chcesz wczytać do Galerii od razu całą kolekcję obrazków?

1. Tuż nad oknem edytora artykułu, nad paskami narzędziowymi, z lewej strony z góry odnajdziesz takie pole: . Kliknij prostokącik w tym polu (kiedy przesuniesz nań mysz, wyświetli się napis „Dodaj obrazek”.  Pojawi się takie okno:
   
2. Kliknij przycisk „Wybierz pliki”. Pojawi się typowe okno wyboru plików. Obecnie wskaż wiele plików myszą. Kliknij jeden plik. Następnie przytrzymaj klawisz Ctrl na klawiaturze i klikaj w kolejne nazwy plików:
   
   Następnie zatwierdź przyciskiem Otwórz.
3. System pracuje chwilę, po czym pokazuje listę wczytanych w danej chwili obrazków:
   
   Zdjęcia są już w tym momencie w Galerii. Możesz kliknąć Pokaż przy nazwie wybranego obrazka i go wstawić. Możesz też wracać do Galerii i wstawiać do artykułu kolejne obrazki jak opisano w punkcie „Wstawianie obrazka z Galerii” powyżej.

Jak wstawić zdjęcie tytułowe i zarazem ikonę artykułu?
Ikona artykułu jest to piękny duży obrazek który przyciąga oko czytelnika do twego artykułu na stronie głównej.

1. Wstaw do Galerii obrazek nie węższy niż 640 pikseli i nie niższy niż 250 pikseli. W dolnej części informacji o obrazku w Galerii zobaczysz napis „Użyj jako ikony”. (Jeżeli tej opcji nie ma, oznacza to że twój obrazek jest za mały).  Kliknij „Użyj jako ikony”.
2. W tym momencie artykuł ma ikonę, zobacz na dole z prawej w oknie edycji artykułu:
   
3. Jeżeli dodatkowo chcesz wstawić ten sam obrazek do samego artykułu, na jego początek i ładnie, to:
   a. Postaw kursor na samym początku artykułu
   b. Wróć do Galerii (czyli rozpocznij dodawanie obrazka, dodawaj z Galerii)
   c. Ustaw rozsądny Wymiar oraz Wyrównanie do Lewej (ważne)
   d. Wstaw do wpisu
   e. Upewnij się, że pierwsze zdania artykułu ładnie oblewają zdjęcie tytułowe z prawej strony.
   f. W niniejszym artykule zdjęcie szachownicy jest zdjęciem tytułowym i ikoną wpisu

Jak wstawić nagranie z YouTube?
Jest to najprostsza z możliwych czynności.

1. Będąc przy interesującym cię filmie na YouTube, skopiuj adres filmu z paska adresu: . Wciśnij Ctrl-C na klawiaturze.
2. Postaw kursor w artykule w edytorze RockSzanty.pl i wciśnij Ctrl-V na klawiaturze:
3. W Podglądzie artykułu przekonasz się, że twój wklejony link jest automatycznie zamieniany na film z YouTube!
4. W naszym systemie istnieje jeszcze potężniejsze narzędzie do video – WordTube. O nim w osobnym artykule.

Jak wstawić plik multimedialny, MP3, MID?
Jeżeli chcesz wstawić jakiś plik multimedialny (np. niewielkie MP3, plik melodii zapisany jako MID), możesz to również uczynić. Różnica ze wstawianiem zdjęć jest taka, że zamiast „Dodaj obrazek” klikniesz „Dodaj medium” w tym menu:
(jest to ikonka z gwiazdą). Pamiętaj koniecznie o wyborze opcji  w czasie wstawiania medium. Tu wstawiliśmy plik MID. Jeśli go klikniesz, zagra melodyjka.

port_royal_metal ? wstawiony plik melodii MID.

O czym pamiętać?
Pamiętaj o częstym sprawdzaniu efektów twoje pracy przyciskiem „Podejrzyj” w sekcji „Opublikuj” i zapisywaniu szkiców przyciskiem „Zapisz szkic”.

Dzielenie się artykułem ze światem
Kiedy artykuł zostanie już opublikowany, każdy czytelnik  może poinformować światowe serwisy społecznościowe takie jak Facebook czy Twitter o artykule. Pod każdym gotowym artykułem znajdziesz rząd ikonek serwisów. Wybierz pożądaną ikonkę i podziel się informacją z innymi.

Dla hardkorów
Poniższe informacje podaliśmy tytułem uzupełnienia. Pomogą osobom ambitnym na tworzenie jeszcze ładniejszych wpisów.

• Jeżeli potrzebujesz bardzo precyzyjnie zdefiniować wielkość obrazka, użyj edytora HTML. Normalnie pracujesz w Edytorze Wizualnym. Kliknięcie zakładki HTML w prawej części nad edytorem pokazuje zapis strony w formacie HTML. . Zauważysz, że każde wstawione zdjęcie zaczyna się kodem <a i kończy się kodem /a>. W definicji zdjęcia ważne są pola „width” (szerokość) oraz „height” (wysokość). Powiedzmy, że twoje wstawione zdjęcie jest jednak troszeczkę za szerokie i chcesz to zmienić. Przykład fragmentu kodu zdjęcia:
  width=”281″ height=”206″. Jak widzisz, system podaje oba wymiary obrazka. Powiedzmy, że zależy ci, aby szerokość obrazka była dokładnie 250 pikseli, a wysokość dobrała się automatycznie. Zmień ten fragment kodu na: width=”250″ (skasuj całość pola height i zmień wartość dla width). A może potrzebujesz dokładnie 200 pikseli wysokości, a szerokość ma się dobrać sama? Zmień kod na: width=”200″ (skasuj całość pola width, zmień wartość dla height). A na koniec wróć do Edytora Wizualnego.
• Jeśli używasz automatycznego podpisu (na podstawie Etykiety obrazka), musisz zmienić nie tylko wielkość samego obrazka (konkretnie szerokość), ale także szerokość podpisu w polu w edytorze HTML.