Grav - Связывание изображений
В этой главе мы поймем связывание изображений в Grav. Grav позволяет связывать изображения с одной страницы на другую и даже на удаленные страницы. Если вы связали файлы с помощью HTML, вам будет очень легко понять связывание изображений в Grav.
Используя эту структуру, мы увидим, как отображать медиафайлы на странице с использованием различных типов ссылок. Каждая папка в этой структуре содержит изображения, и есть специальный каталог в/02.green/img01 который действует как страница, но содержит только медиафайлы.
Давайте рассмотрим некоторые общие элементы тега изображения на основе Grav markdown.
![Alt Text](../path/image.ext)
! - Он указывает на тег изображения, когда вы помещаете его в начало тега ссылки уценки.
[] - Указывает необязательный альтернативный текст для изображения.
() - Ставится сразу после квадратной скобки, в которой указан путь к файлу.
../ - Указывает на перемещение вверх по каталогу.
Grav использует пять типов ссылок на изображения, перечисленных ниже:
Slug Relative
Directory Relative
Absolute
Remote
Media Actions on Images
Относительный слизняк
Он устанавливает относительные ссылки изображения на текущую страницу и связывает другой файл в том же каталоге. При использовании относительных ссылок расположение исходного файла так же важно, как и место назначения. Если при перемещении изменить путь в файле, то ссылка может быть разорвана. Преимущество использования этой структуры связывания изображений заключается в том, что вы можете переключаться между локальным сервером разработки и активным сервером с другим доменным именем, пока файловая структура остается постоянной.
пример
![link](../water/img01/img.jpg)
Вот ../ указывает, что ваша ссылка перемещается на одну папку вверх, а затем вниз на одну папку, а img.jpg является местом назначения.
Когда вы используете указанный выше путь, вы получите следующий вывод -
Grav поддерживает ярлыки в заголовке основного файла разметки страницы, и этот ярлык занимает место имени папки для данной страницы.
Если 01.sky папка имеет ярлык, установленный через ее .md файл, т.е. /pages/01.blue/01.sky/text.md, тогда заголовок файла будет таким -
---
title: Sky
slug: test-slug
taxonomy:
category: blog
---
В приведенном выше коде мы установили слаг test-slugкоторый является необязательным. После того, как вы установите ярлык, вы можете связать его с медиафайлом, который будет иметьSlug Relative или же Absolute URL установлен для ссылки.
Относительный каталог
В этом типе ссылки вы можете установить относительные ссылки на изображения каталога для текущей страницы. Вместо использования кратких URL-адресов вы можете указать полный путь с именами папок в относительных ссылках на изображения.
пример
![My image](../../blue/img01/img.jpg)
Когда вы используете указанный выше путь, он будет отображать вывод, как показано ниже -
Абсолютное
Абсолютные ссылки аналогичны относительным ссылкам, но с той лишь разницей, что они относятся к корню сайта и присутствуют в /user/pages/ каталог.
Вы можете использовать абсолютные ссылки двумя способами:
Вы можете использовать Slug Relative стиль, который включает в себя имена ярлыков или каталогов в пути и обычно используется при абсолютных ссылках.
Вы можете использовать Absolute Link который открывает ссылку с a/.
![My image](/blue/img01/img.jpg)
Когда вы используете указанный выше путь, вы получите следующий вывод -
Удаленный
Ссылки на удаленные изображения позволяют отображать любой медиа-файл напрямую через его URL-адрес. Эти ссылки не включают содержание вашего собственного сайта. В следующем примере показано, как отображать изображение с помощью удаленного URL-адреса -
![Remote Image 1](http://www.freedomwallpaper.com/nature-wallpaper/spring_nature-wide.jpg)
Когда вы нажимаете на ссылку, как показано на изображении ниже, будет отображаться изображение с заданного URL-адреса.
Действия мультимедиа с изображениями
Изображения, связанные со страницами, позволяют нам использовать преимущества медиа-действий Grav . Вы можете отображать некоторые мультимедийные файлы, такие как изображения, видео и другие файлы, при создании контента в Grav.
пример
Вы можете загрузить изображение, используя формат, указанный ниже -
![Styling Example](../img01/img.jpg?cropResize = 400, 200)
Когда вы используете указанный выше путь, вы получите вывод, как показано ниже -