MediaWiki w obrazkach/Wstawianie obrazków

Obrazki są istotnym elementem stron w MediaWiki. Oprogramowanie to umożliwia w dość prosty sposób ładowanie obrazków na serwer i łączenie ich na różne sposoby z tekstem i tabelami na tworzonej stronie.

Aby lepiej zrozumieć ten rozdział warto wcześniej przeczytać rozdziały: Korzystanie z obrazków oraz Linki.

Uwaga: Większość serwisów opartych na MediaWiki ma ścisłe reguły jakie obrazki wolno, a jakich nie wolno ładować na serwer. Np: w projektach Wikimedia Commons wolno ładować tylko takie obrazki, które można objąć jedną z wolnych licencji. Ponadto dozwolone są tylko niektóre typy plików: PNG, JPG i SVG. Zanim załadujesz plik na serwer sprawdź jakie obowiązują na nim zasady. Ponadto, na wielu projektach przesyłanie plików możliwe jest dopiero po zalogowaniu się.

Przesyłanie plików na serwer

**Rys. 29**:Umiejscowienie linku "Prześlij plik" w Wikimedia Commons

Przesyłanie plików na serwer zostanie omówione na przykładzie Wikimedia Commons, repozytorium plików multimedialnych Fundacji Wikimedia.

Przed rozpoczęciem przesyłania warto umieścić swój plik na znanym sobie miejscu i sprawdzić jego jakość. W przypadku Wikimedia Commons, które ma niemal nieograniczone zasoby miejsca, warto ładować pliki o jak największej rozdzielczości. Później, będzie można je w szerszym zakresie skalować na stronie.

Wikimedia Commons wymaga, aby przed przesyłem zalogować się na swoje konto. Procedura przesyłu pliku rozpoczyna się od kliknięcia na link Prześlij plik' w menu po lewej stronie (patrz rys. 29). Oprogramowanie otworzy specjalną stronę z formularzem do ładowania plików (patrz rys. 30)

Obsługa formularza wygląda następująco (rys. 30):

klikamy na klawisz przeglądaj (2) i wyszukujemy na naszym twardym dysku plik, który chcemy przesłać, a następnie przyciskamy "OK" lub jakiś inny klawisz potwierdzający wybór
w polu Oryginalna nazwa (1) powinna się pojawić nazwa wybranego pliku wraz z jego ścieżką dostępu
jeśli nasz oryginalny plik ma niewiele mówiącą nazwę (np: IMG12345678.PNG) - w okienku docelowa nazwa (3) wpisujemy jakąś bardziej opisową nazwę odnoszącą się do tego, co na obrazku jest (np: "kosciol_w_Kamiennej_Gorze.png")
dodajemy opis pliku w polu (4), w którym musimy w skrócie wyjaśnić co on przedstawia, kto i kiedy go wykonał i dlaczego mamy prawo objąć go wybraną przez nas licencją - powinniśmy też dodać do opisu link do odpowiedniej kategorii.
wybieramy z listy (5) jedną z licencji, na której chcemy udostępnić nasz plik - dla prac własnych polecaną licencją jest "Own work, attribution required (multilicensed GNU FDL and CC-BY 2.5)"
klikamy na prześlij plik (6)
po pewnym czasie, zależnym od rozmiaru pliku i szybkości łącza pokaże nam się strona z obrazkiem i jego opisem, co oznacza, że jest on załadowany poprawnie na serwer.

Na koniec, aby nie zapomnieć dokładnej nazwy tego pliku warto zostawić sobie otwartą stronę z jego opisem, do czasu umiejscowienia obrazka na odpowiedniej strony docelowej.

Wikikod grafiki

Wikikod służący do wstawiania grafiki przypomina swoją strukturą kod linków wewnętrznych. Tworzy się go za pomocą podwójnych, kwadratowych nawiasów. Jednak zamiast tworzyć link tekstowy, wyświetlają one obrazki w tekście strony.

Ogólna postać kodu

Kod ten ma ogólną postać:

[[Plik:Nazwa_pliku|opcje|Opis]]

gdzie

Nazwa_pliku to dokładny tytuł pliku w którym zapisany jest obrazek na serwerze
dozowolone opcje to: thumb, frame, left, right, center i rozmiar obrazka w pikselach - przy czym można podać kilka niesprzecznych z sobą opcji na raz, jedna za drugą w dowolnej kolejności; kolejne opcje oddziela się znakiem "|" (pipe),
Opis to dowolny tekst, który będzie dołączony do obrazka, może on także zawierać linki wewnętrzne i zewnętrzne.

Podanie opcji i opisu nie jest wymagane przez oprogramowanie, choć zwykle jest zalecane. W obcojęzycznych projektach Wiki zamiast Plik: należy użyć Image:.

Skalowanie obrazków

Najprostszy sposób wstawienia obrazka, np:

[[Plik:Grand Coat of Arms of Grand Duchy of Poznań.svg]]

nie daje zwykle zadowalających efektów, zwłaszcza gdy obrazek jest duży:

Aby zmniejszyć obrazek należy użyć opcji skalowania, czyli podać jego rozmiar w pikselach. Liczba ta oznacza maksymalną szerokość obrazka.

Przykład:

[[Plik:Grand Coat of Arms of Grand Duchy of Poznań.svg|150 px]]

[[Plik:Grand Coat of Arms of Grand Duchy of Poznań.svg|100 px]]

[[Plik:Grand Coat of Arms of Grand Duchy of Poznań.svg|50 px]]

co da taki efekt: 150 px: 100 px: 50 px:

Pozycjonowanie obrazków

Jak widać, standardowo obrazek jest umieszczany w dość przypadkowym miejscu ekranu i trudno jest przewidzieć jak będzie opływany przez tekst. Opływanie tekstu i jednocześnie umiejscowienie obrazka kontroluje się przy pomocy opcji:

left - obrazek będzie się znajdował z lewej strony ekranu i będzie opływany przez tekst z prawej
right - obrazek będzie się znajdował z prawej strony ekranu i będzie opływany przez tekst z lewej
center - obrazek będzie wycentrowany i nie będzie opływany przez tekst

Przykłady:

[[Plik:Felicidade A very happy boy.jpg|200 px|left]]

[[Plik:Felicidade A very happy boy.jpg|200 px|right]]

[[Plik:Felicidade A very happy boy.jpg|200 px|center]]

I rezultat:

To jest testowy tekst, który opływa obrazek z opcją left - czyli dosunięty do lewej strony i opływany z prawej.

To jest testowy tekst, który opływa obrazek z opcją right - czyli dosunięty do prawej strony i opływany z lewej.

To jest testowy tekst, który nie opływa obrazka z opcją center

lecz znajduje się pod nim lub nad nim.

Thumb i frame

Opcje thumb i frame powodują otoczenie obrazka szarą ramką z możliwością dodania tekstu pod zdjęciem w ramce. Thumb dodatkowo powoduje zmniejszenie obrazka do ustalonego z góry rozmiaru, który w większości serwisów MediaWiki wynosi standardowo 180 pikseli. Zarówno z thumb jak i z frame można ustalić dowolny rozmiar obrazka, podając jego rozmiar w pikselach. Obrazki z opcją thumb i frame domyślnie są umieszczane z opcją right - czyli są dosuwane do prawej strony ekranu i opływane z lewej. To jednak również można zmienić stosując opcję center i left.

Przykłady:

[[Plik:Cyanocitta-cristata-004.jpg|thumb|Modrosójka błękitna]]

[[Plik:Cyanocitta-cristata-004.jpg|thumb|left|250 px|Modrosójka błękitna]]

I rezultat:

To jest testowy tekst, który opływa obrazek z opcją thumb - bez zmienionego rozmiaru i opływania.

To jest testowy tekst, który opływa obrazek z opcją thumb z opcją opływania left i rozmiarem zmienionym na 250 px.

To jest testowy tekst, który nie opływa obrazka z opcją thumb, center i rozmiarem ustalonym na 400 pikseli.

Dodatkowo pokazano tu możliwość wstawienia do opisu obrazka linku do strony w Wikipedii.

Media i dwukropek

Dwukropek na początku kodu obrazka powoduje przekształcenie go w zwykły link. Przydaje się to, gdy nie chce się wyświetlać obrazka na stronie, ale chce się do niego skierować czytelnika, aby mógł go sobie obejrzeć po kliknięciu w link.

Przykład:

[[:Plik:Fortepian - schemat.svg|Schemat konstrukcji fortepianu]]

i efekt:

Schemat konstrukcji fortepianu

Zmiana słowa "Plik" na "Media" w kodzie obrazka powoduje, że nie jest on wyświetlany, lecz pojawia się tylko link z jego opisem tak samo, jak w przypadku stosowania dwukropka. Ponadto jednak, po kliknięciu na tak utworzony link wyświetli się nie strona obrazka z opisem, lecz sam "goły" obrazek.

Przykład:

[[Media:Fortepian - schemat.svg|Schemat konstrukcji fortepianu]]

i efekt:

Schemat konstrukcji fortepianu

Oprócz tego link "media" może być stosowany do linkowania wszelkich plików multimedialnych, filmów, muzyki, pokazu slajdów itp.

Przykład:

[[Media:Apollo 15 CSM moving away from LM.ogv|Start lądownika Apollo 15, film w formacie ogg]]

i efekt:

Start lądownika Apollo 15, film w formacie ogg

Uwaga!: Link ten zadziała pod warunkiem, że mamy poprawnie zainstalowany program, który potrafi odtwarzać pliki ogg. W przeciwnym razie najprawdopodobniej rozpocznie się zapisywanie pliku z filmem, gdzieś na twardym dysku użytkownika.

Galerie obrazków

Gdy ma się zamiar wstawić na stronę wiele obrazków warto użyć mechanizmu tworzenia galerii. Przy standardowych ustawieniach MediaWiki galerie automatycznie grupują miniaturki obrazków o rozmiarach 150 pikseli po cztery w rzędzie.

Kod galerii ma ogólną postać:

<gallery> Plik:Nazwa_pliku1|opis1 Plik:Nazwa_pliku2|opis2 Plik:Nazwa_pliku3|opis3 ...itd </gallery>

Przykład:

<gallery> Plik:Formosan sika deer.jpg|[[Jeleń wschodni]] Plik:Bubo bubo winter 1.jpg|[[Puchacz]] Plik:Turdus pilaris2.jpg|[[Kwiczoł]] Plik:Cyanocitta-cristata-004.jpg|[[Modrosójka błękitna]] </gallery>

i efekt działania:

W galeriach nie stosuj kwadratowych nawiasów do linkowania obrazków: częstym błędem początkujących, jest odruchowe dodawanie w kodzie galerii podwójnych, kwadratowych nawiasów przy nazwie poszczególnych plików, na wzór "normalnego" sposobu umieszczania obrazków, co powoduje, że galeria nie wyświetla się poprawnie. Nie ma natomiast przeciwwskazań, aby stosować linki do stron w opisach obrazków w galeriach.

Uwagi

Jakkolwiek pozornie wstawianie obrazków w MediaWiki wydaje się proste, przy braku wprawy prowadzi ono czasem do dziwnych, niespodziewanych efektów i problemów.

Problemy z nazwą obrazka

Częstym problemem jaki mają początkujący użytkownicy jest wpisanie poprawnej nazwy pliku, w którym jest obrazek. MediaWiki wymaga stuprocentowo ścisłego odnoszenia się do nazw plików. Oprogramowanie rozróżnia wielkość liter w nazwach oraz wszelkie znaki specjalne, takie jak spacje, myślniki, podkreślenia itd.

Przykład: Plik nazywa się: Fitz Roy framed trees (colour balans).jpg

[[Grafika:fitz roy framed trees (colour balans).JPG|thumb|Zła nazwa - różni się wielkością liter]]

[[Grafika:Fitz Roy framed trees(colour balans).jpg|thumb|Zła nazwa "- różnica polega tylko na braku spacji między "trees" i nawiasem]]

[[Grafika:Fitz Roy framed trees (colour balans).jpg|thumb|Wreszcie dobrze !]]

i efekt:

Plik:Fitz roy framed trees (colour balans).JPG

Zła nazwa - różni się wielkością liter

Plik:Fitz Roy framed trees(colour balans).jpg

Zła nazwa "- różnica polega tylko na braku spacji między "trees" i nawiasem

Najprostszym sposobem aby uniknąć kłoptów z nazwą pliku jest wyświetlić w osobnym oknie stronę opisu obrazka i skopiować jego nazwę z tytułu strony wprost do kodu pisanej strony.

"Kiszkowaty tekst"

Tzw. kiszkowaty tekst powstaje wtedy, kiedy stłoczy się zbyt wiele obrazków o zbyt dużych rozmiarach w jednym miejscu. Efekt "kiszkowatości" może być niedostrzegalny dla autora strony, jeśli pracuje on z ekranem ustawionym w wysokiej rozdzielczości, natomiast może on się pojawić na ekranie czytelnika, która używa mniejszą od autora rozdzielczość ekranu. Z tego względu warto po napisaniu strony sprawdzić jak ona wygląda przy mniejszych rozdzielczościach ekranu.

Przykład kiszkowatego tekstu:

Zaraz pojawi się kiszkowaty tekst, który wygląda szczególnie brzydko, gdy wcześniej jest tekst normalny.

To jest przykładowy tekst, który się robi kiszkowaty przy rozdzielczości poniżej 1280 px. To jest przykładowy tekst, który się robi kiszkowaty przy rozdzielczości poniżej 1280 px. To jest przykładowy tekst, który się robi kiszkowaty przy rozdzielczości poniżej 1280 px.

Aby uniknąć tego rodzaju efektów należy:

nie mieszać obrazków opływanych na lewo i prawo zbyt blisko siebie
nie stosować większej rozdzielczości obrazków niż 350-400 px

Nachodzenie list

Opływanie tekstu przez grafikę wygląda szczególnie nieładnie w przypadku stosowania opływania z prawej strony i wyliczanek tworzonych kodem "*" lub "#". gdyż wtedy znaki kolejnych podpunktów wchodzą na grafikę.

Np kod:

[[Grafika:SF Golden Gate Bridge splash CA.jpg|left|100 px]] * tekst 1 * tekst 2 * tekst 3 * tekst 4 # lista 1 # lista 2 # lista 3

Wygląda tak:

tekst 1
tekst 2
tekst 3
tekst 4
tekst 6

lista 1
lista 2
lista 3

Prostym rozwiązaniem tego problemu jest użycie obrazka z opcją thumb:

tekst 1
tekst 2
tekst 3
tekst 4
tekst 6

lista 1
lista 2
lista 3

Jak uniknąć wchodzenia obrazków na dwie sekcje

Kolejnym, często spotykanym problemem jest wchodzenie obrazków na dwie lub więcej sekcji tekstu. Zdarza się to, gdy tekst w sekcji jest za krótki, a obrazek jest "za długi". Możliwość zaobserwowania tego efektu również jest zależna od rozdzielczości ekranu. W odróżnieniu jednak od poprzedniego przypadku, zdarza się on częściej przy większej rozdzielczości ekranu. W większej rozdzielczości ekranu tekst ma "więcej miejsca", a wysokość obrazka się nie zmienia.

Przykładowy kod:

==== Przykład 1 ==== [[Grafika:Oil well scheme.svg|thumb|150 px]] To jest, testowy, krótki tekst. ==== Przykład wchodzenia obrazka na tytuł sekcji od prawej strony ==== [[Grafika:Oil well scheme.svg|thumb|left|150 px]] To jest, testowy, krótki tekst. ==== To jest tytuł "zaatakowany" obrazkiem z lewej strony ==== To jest testowy, krótki tekst.

i rezultat:

Przykład 1

To jest, testowy, krótki tekst.

Przykład wchodzenia obrazka na tytuł sekcji od prawej strony

To jest, testowy, krótki tekst.

To jest tytuł "zaatakowany" obrazkiem z lewej strony

To jest testowy, krótki tekst.

Na ten problem nie ma prostego rozwiązania. Należy po prostu unikać krótkich sekcji z obrazkami. Pewnym rozwiązaniem jest tu używanie tagu XHTML o postaci:

<br clear="all"/>

który powoduje, że tytuł kolejnej sekcji pojawi się dopiero poniżej obrazka. Rozwiązanie to pozostawia jednak duże, puste pola na ekranie.

Przykładowy kod:

==== Przykład 2 ==== [[Grafika:Oil well scheme.svg|thumb|150 px]] To jest, testowy, krótki tekst. <br clear="all"/> ==== Teraz nie nachodzi z prawej ==== [[Grafika:Oil well scheme.svg|thumb|left|150 px]] To jest, testowy, krótki tekst. <br clear="all"/> ==== Teraz nie nachodzi z lewej ==== To jest testowy, krótki tekst.

i rezultat: