Grav - Görüntü Bağlama

Bu bölümde, Grav'da görüntü bağlamayı anlayacağız. Grav, görüntüleri bir sayfadan diğerine ve hatta uzak sayfalara bağlamanıza izin verir. Dosyaları HTML kullanarak bağladıysanız, Grav'da görüntü bağlamayı anlamak çok kolay olacaktır.

Bu yapıyı kullanarak, medya dosyalarının sayfada farklı bağlantı türlerini kullanarak nasıl görüntüleneceğini göreceğiz. Bu yapı altındaki her klasör resimler içerir ve altında özel bir dizin vardır./02.green/img01 bir sayfa görevi gören ancak yalnızca medya dosyalarını içeren.

Grav markdown tabanlı resim etiketinin bazı ortak unsurlarına bakalım.

![Alt Text](../path/image.ext)
  • ! - Markdown bağlantı etiketinin başına yerleştirdiğinizde bir resim etiketini gösterir.

  • [] - Görüntü için isteğe bağlı alt metni belirtir.

  • () - Dosya yolunu içeren köşeli parantezin hemen sonrasına yerleştirilir.

  • ../ - Bir dizinde yukarı hareket olduğunu gösterir.

Grav, aşağıda listelenen beş tür resim bağlantısı kullanır -

  • Slug Relative

  • Directory Relative

  • Absolute

  • Remote

  • Media Actions on Images

Slug Bağıl

Göreli görüntü bağlantılarını geçerli sayfaya ayarlar ve aynı dizindeki başka bir dosyayı bağlar. Göreli bağları kullanırken, kaynak dosyanın konumu, hedefin konumu kadar önemlidir. Dosyadaki yolu taşırken değiştirirseniz, bağlantı kopabilir. Bu görüntü bağlama yapısını kullanmanın avantajı, dosya yapısı sabit kaldığı sürece yerel geliştirme sunucusu ile farklı bir alan adına sahip canlı bir sunucu arasında geçiş yapabilmenizdir.

Misal

![link](../water/img01/img.jpg)

Buraya ../ bağlantınızın bir klasör yukarı ve sonra bir klasör aşağı hareket ettiğini ve hedefin img.jpg olduğunu gösterir.

Yukarıdaki yolu kullandığınızda, aşağıdaki çıktıyı alacaksınız -

Grav, sayfanın birincil markdown dosyasının başlığındaki sümüklü böcekleri destekler ve bu bilgi, verilen sayfanın klasör adının yerini alır.

Eğer 01.sky klasörün aracılığıyla bir bilgi kümesi vardır .md dosya, yani /pages/01.blue/01.sky/text.md, dosyanın başlığı şöyle olur -

---
title: Sky
slug: test-slug
taxonomy:
   category: blog
---

Yukarıdaki kodda sümüklü böcekleri ayarladık test-slugbu isteğe bağlıdır. Slug'ı ayarladıktan sonra, sahip olacak medya dosyasına bağlanabilirsiniz.Slug Relative veya Absolute Bağlantı için URL ayarlandı.

Dizin Göreli

Bu tür bir bağlantıda, geçerli sayfaya dizine göre görüntü bağları ayarlayabilirsiniz. URL sümüklüböceklerini kullanmak yerine, dizine göre görüntü bağlantılarındaki klasör adlarıyla tam yol üzerinden başvurabilirsiniz.

Misal

![My image](../../blue/img01/img.jpg)

Yukarıdaki yolu kullandığınızda, çıktı aşağıda gösterildiği gibi görüntülenecektir -

Mutlak

Mutlak bağlantılar, göreceli bağlantılarla aynıdır, ancak tek fark, sitenin köküne göre olmaları ve /user/pages/ dizin.

Mutlak bağlantıları iki farklı şekilde kullanabilirsiniz -

  • Kullanabilirsiniz Slug Relative Yolda bilgi veya dizin adlarını içeren ve mutlak bağlamada yaygın olarak kullanılan stil.

  • Kullanabilirsiniz Absolute Link ile bağlantıyı açan a/.

![My image](/blue/img01/img.jpg)

Yukarıdaki yolu kullandığınızda, aşağıdaki çıktıyı alacaksınız -

Uzak

Uzak görüntü bağlantıları, herhangi bir medya dosyasının doğrudan URL'si aracılığıyla görüntülenmesine izin verir. Bu bağlantılar kendi sitenizin içeriğini içermez. Aşağıdaki örnek, uzak URL kullanılarak resmin nasıl görüntüleneceğini gösterir -

![Remote Image 1](http://www.freedomwallpaper.com/nature-wallpaper/spring_nature-wide.jpg)

Aşağıdaki resimde gösterildiği gibi bağlantıya tıkladığınızda, verilen URL'deki resmi gösterecektir.

Görsellerdeki Medya İşlemleri

Sayfalarla ilişkili görüntüler, Grav'ın medya eylemlerinin avantajını kullanmamızı sağlar . Grav'da içerik oluştururken resimler, videolar ve diğer dosyalar gibi bazı medya dosyalarını görüntüleyebilirsiniz.

Misal

Aşağıda verilen formatı kullanarak bir görüntü yükleyebilirsiniz -

![Styling Example](../img01/img.jpg?cropResize = 400, 200)

Yukarıdaki yolu kullandığınızda, aşağıda gösterildiği gibi bir çıktı alacaksınız -