Grav - łączenie obrazów
W tym rozdziale zrozumiemy łączenie obrazów w Grav. Grav pozwala łączyć obrazy z jednej strony na drugą, a nawet do stron zdalnych. Jeśli połączyłeś pliki za pomocą HTML, byłoby to bardzo łatwe do zrozumienia łączenie obrazów w Grav.
Korzystając z tej struktury, zobaczymy, jak wyświetlać pliki multimedialne na stronie przy użyciu różnych typów linków. Każdy folder w tej strukturze zawiera obrazy, a pod nim znajduje się specjalny katalog/02.green/img01 który działa jak strona, ale zawiera tylko pliki multimedialne.
Przyjrzyjmy się niektórym typowym elementom tagu graficznego opartego na Markdown Grav.
![Alt Text](../path/image.ext)
! - Wskazuje tag obrazu po umieszczeniu go na początku tagu linku przeceny.
[] - Określa opcjonalny tekst alternatywny dla obrazu.
() - Jest umieszczany bezpośrednio po nawiasie kwadratowym zawierającym ścieżkę do pliku.
../ - Wskazuje na przejście w górę katalogu.
Grav używa pięciu typów linków do obrazów wymienionych poniżej -
Slug Relative
Directory Relative
Absolute
Remote
Media Actions on Images
Ślimak względny
Ustawia względne łącza obrazu do bieżącej strony i łączy inny plik w tym samym katalogu. Podczas korzystania z linków względnych lokalizacja pliku źródłowego jest tak samo ważna jak lokalizacja docelowa. Jeśli zmienisz ścieżkę do pliku podczas przenoszenia, łącze może zostać zerwane. Zaletą korzystania z tej struktury łączenia obrazów jest to, że można przełączać się między lokalnym serwerem programistycznym a serwerem działającym z inną nazwą domeny, o ile struktura pliku pozostaje stała.
Przykład
![link](../water/img01/img.jpg)
Tutaj ../ wskazuje, że łącze przenosi się o jeden folder w górę, a następnie w dół o jeden folder, a miejscem docelowym jest plik img.jpg.
Korzystając z powyższej ścieżki, otrzymasz następujące dane wyjściowe -
Grav obsługuje informacje o pracy w nagłówku głównego pliku znaczników strony, które zastępują nazwę folderu danej strony.
Gdyby 01.sky folder ma informację o pracy ustawioną w pliku .md plik, czyli /pages/01.blue/01.sky/text.md, to nagłówek pliku miałby postać -
---
title: Sky
slug: test-slug
taxonomy:
category: blog
---
W powyższym kodzie ustawiliśmy slug test-slugco jest opcjonalne. Po ustawieniu informacji o pracy możesz połączyć się z plikiem multimedialnym, który będzie miałSlug Relative lub Absolute URL ustawiony dla linku.
Względny katalog
W tym typie łącza można ustawić łącza do obrazów względnych katalogu do bieżącej strony. Zamiast używać informacji o błędach adresu URL, można odwołać się do pełnej ścieżki z nazwami folderów w odsyłaczach do obrazów względnych katalogu.
Przykład
![My image](../../blue/img01/img.jpg)
Kiedy użyjesz powyższej ścieżki, wyświetli dane wyjściowe, jak pokazano poniżej -
Absolutny
Linki bezwzględne są takie same jak linki względne, ale jedyna różnica polega na tym, że są one względne w stosunku do katalogu głównego witryny i znajdują się w /user/pages/ informator.
Możesz używać linków bezwzględnych na dwa różne sposoby -
Możesz użyć Slug Relative styl, który zawiera nazwy plików lub katalogów w ścieżce i jest powszechnie używany w łączeniu bezwzględnym.
Możesz użyć Absolute Link który otwiera link z a/.
![My image](/blue/img01/img.jpg)
Korzystając z powyższej ścieżki, otrzymasz następujące dane wyjściowe -
Zdalny
Zdalne łącza do obrazów umożliwiają wyświetlanie dowolnego pliku multimedialnego bezpośrednio przez jego adres URL. Te linki nie obejmują treści Twojej własnej witryny. Poniższy przykład pokazuje, jak wyświetlić obraz przy użyciu zdalnego adresu URL -
![Remote Image 1](http://www.freedomwallpaper.com/nature-wallpaper/spring_nature-wide.jpg)
Po kliknięciu linku, jak pokazano na poniższym obrazku, wyświetli się obraz z podanego adresu URL.
Działania mediów na obrazach
Obrazy powiązane ze stronami pozwalają nam wykorzystać przewagę działań medialnych Grav-a . Możesz wyświetlać niektóre pliki multimedialne, takie jak obrazy, filmy i inne pliki podczas tworzenia treści w Grav.
Przykład
Możesz załadować obraz, używając formatu podanego poniżej -
![Styling Example](../img01/img.jpg?cropResize = 400, 200)
Korzystając z powyższej ścieżki, otrzymasz dane wyjściowe, jak pokazano poniżej -