Grav - สื่อ

ไฟล์สื่อประกอบด้วยเนื้อหาที่แสดงประเภทต่างๆเช่นรูปภาพวิดีโอและไฟล์อื่น ๆ อีกมากมาย Grav จะค้นหาและประมวลผลไฟล์เหล่านี้โดยอัตโนมัติเพื่อใช้กับหน้าใด ๆ ด้วยการใช้ฟังก์ชันในตัวของเพจคุณสามารถเข้าถึงข้อมูลเมตาและแก้ไขสื่อแบบไดนามิก

Smart-cachingถูกใช้โดย Grav ที่สร้างสื่อที่สร้างในแคชเมื่อจำเป็น วิธีนี้สามารถใช้เวอร์ชันแคชแทนการสร้างสื่อซ้ำแล้วซ้ำอีก

ไฟล์มีเดียที่รองรับ

ต่อไปนี้เป็นประเภทไฟล์มีเดียที่ Grav รองรับ -

  • Image - jpg, jpeg, png

  • Animated Image - gif

  • vectorized Image - svg

  • Video - mp4, mov, m4v, swf

  • Data/information - txt, doc, pdf, html, zip, gz

โหมดการแสดงผล

ต่อไปนี้เป็นโหมดการแสดงผลบางประเภทใน Grav -

  • Source - เป็นการแสดงภาพของรูปภาพวิดีโอหรือไฟล์

  • text - การนำเสนอไฟล์สื่อเป็นข้อความ

  • thumbnail - ภาพขนาดย่อสำหรับไฟล์สื่อ

การค้นหาภาพขนาดย่อ

คุณสามารถค้นหาภาพขนาดย่อได้โดยใช้สามตำแหน่ง -

  • In the same folder where your media files exists- [ชื่อสื่อ]. [นามสกุลสื่อ]. นิ้วหัวแม่มือ. [การขยายนิ้วหัวแม่มือ]; ที่นี่ชื่อสื่อและนามสกุลสื่อเป็นชื่อและส่วนขยายของไฟล์สื่อจริงและส่วนขยายหัวแม่มือเป็นนามสกุลที่รองรับโดยประเภทสื่อรูปภาพ

  • User Folder − ผู้ใช้ / ภาพ / สื่อ / thumb- [สื่อขยาย] .png; ที่นี่นามสกุลสื่อเป็นส่วนขยายของไฟล์สื่อจริง

  • System folder- ระบบ / ภาพ / สื่อ / นิ้วหัวแม่มือ - [สื่อขยาย] .png; ที่นี่นามสกุลสื่อเป็นส่วนขยายของไฟล์สื่อจริง

ไลท์บ็อกซ์และลิงก์

Grav ให้เอาต์พุตของแท็กจุดยึดที่มีองค์ประกอบบางอย่างเพื่อให้ปลั๊กอินไลท์บ็อกซ์อ่าน หากคุณต้องการใช้ไลบรารีไลท์บ็อกซ์ซึ่งไม่รวมอยู่ในปลั๊กอินของคุณคุณสามารถใช้แอตทริบิวต์ต่อไปนี้เพื่อสร้างปลั๊กอินของคุณเอง

  • rel- ระบุลิงค์ไลท์บ็อกซ์ ค่าคือไลท์บ็อกซ์

  • href - เป็น URL ไปยังวัตถุสื่อ

  • data-width - ตั้งค่าความกว้างของไลท์บ็อกซ์ที่ผู้ใช้เลือก

  • data-height - ตั้งค่าความสูงของไลท์บ็อกซ์ที่ผู้ใช้เลือก

  • data-srcset - สตริง srcset ใช้ในกรณีของสื่อรูปภาพ

การดำเนินการ

รูปแบบตัวสร้างใน Grav ใช้เพื่อจัดการสื่อเพื่อดำเนินการหลายอย่าง มีการดำเนินการบางประเภทที่ได้รับการสนับสนุนสำหรับสื่อทั้งหมดในขณะที่มีการดำเนินการบางอย่างสำหรับสื่อบางประเภทเท่านั้น

ทั่วไป

มีการดำเนินการทั่วไป 6 ประเภทสำหรับประเภทสื่อ การกระทำแต่ละอย่างมีคำอธิบายด้านล่าง

ซีเนียร์ การดำเนินการและคำอธิบาย
1 url ()

url () ให้กลับ raw url path สื่อ

2 html ([ชื่อ] [, alt] [, คลาส]

ผลลัพธ์จะมีแท็ก html ที่ถูกต้องสำหรับสื่อ

3

display(mode)

ใช้เพื่อสลับระหว่างโหมดการแสดงผลต่างๆ เมื่อคุณเปลี่ยนเป็นโหมดการแสดงผลการกระทำทั้งหมดจะถูกรีเซ็ต

4 ลิงค์ ()

การดำเนินการที่ใช้ก่อนลิงก์จะนำไปใช้กับเป้าหมายของลิงก์

5 ไลท์บ็อกซ์ ([ความกว้างความสูง])

ไลท์บ็อกซ์คล้ายกับการทำงานของลิงก์ แต่มีข้อแตกต่างเล็กน้อยที่สร้างลิงก์ที่มีแอตทริบิวต์เพิ่มเติมบางอย่าง

6 ภาพขนาดย่อ

เลือกระหว่างหน้าและค่าเริ่มต้นสำหรับไฟล์สื่อประเภทใดก็ได้และสามารถทำได้ด้วยตนเอง

การดำเนินการกับรูปภาพ

ตารางต่อไปนี้แสดงการกระทำบางอย่างที่ใช้กับรูปภาพ

ซีเนียร์ การดำเนินการและคำอธิบาย
1 ปรับขนาด (ความกว้างความสูง [พื้นหลัง])

เปลี่ยนความกว้างและความสูงของรูปภาพโดยการปรับขนาด

2 forceResize (ความกว้างความสูง)

ยืดภาพตามต้องการโดยไม่คำนึงถึงอัตราส่วนดั้งเดิม

3 cropResize (ความกว้างความสูง)

ปรับขนาดรูปภาพให้เล็กลงหรือใหญ่ขึ้นตามความกว้างและความสูง

4 ครอบตัด (x, y, กว้าง, สูง)

ครอบตัดรูปภาพตามที่อธิบายโดยความกว้างและความสูงจากตำแหน่ง x และ y

5 cropZoom (ความกว้างความสูง)

ช่วยซูมและครอบตัดภาพตามคำขอ

6 คุณภาพ (มูลค่า)

ตั้งค่าสำหรับคุณภาพของภาพระหว่าง 0 ถึง 100

7 ลบล้าง ()

สีจะกลับด้านในการปฏิเสธ

8 ความสว่าง (ค่า)

กับ value ของ -255 ถึง +255ตัวกรองความสว่างจะถูกเพิ่มลงในภาพ

9 ความคมชัด (ค่า)

ค่าตั้งแต่ -100 ถึง +100 ใช้เพื่อใช้ฟิลเตอร์คอนทราสต์กับรูปภาพ

10 สีเทา ()

เขาใช้ฟิลเตอร์สีเทาในการประมวลผลภาพ

11 นูน ()

นอกจากนี้ยังใช้ฟิลเตอร์ลายนูนในการประมวลผลภาพ

12 เรียบ (ค่า)

ฟิลเตอร์ปรับความเรียบถูกนำไปใช้กับรูปภาพโดยตั้งค่าตั้งแต่ -10 ถึง +10

13 คม ()

เพิ่มฟิลเตอร์เพิ่มความคมชัดในรูปภาพ

14 ขอบ()

เพิ่มตัวกรองการค้นหาขอบบนรูปภาพ

15 colorize (แดงเขียวน้ำเงิน)

ปรับสีภาพโดยปรับสีแดงเขียวและน้ำเงิน

16 ซีเปีย ()

เพิ่มฟิลเตอร์ซีเปียเพื่อให้ได้ลุควินเทจ

ภาพเคลื่อนไหวและ Vectorizing ภาพและวิดีโอ

การกระทำที่เคลื่อนไหวและเป็นเวกเตอร์จะกระทำกับรูปภาพและวิดีโอ ต่อไปนี้คือการดำเนินการที่เกิดขึ้นกับรูปภาพและวิดีโอ

ซีเนียร์ การดำเนินการและคำอธิบาย
1 ปรับขนาด (ความกว้างความสูง)

การดำเนินการปรับขนาดจะตั้งค่า width, height, data-width และ data-height คุณลักษณะ.

ชุดค่าผสม

Grav มีฟังก์ชันการปรับแต่งรูปภาพที่ช่วยให้ทำงานกับรูปภาพได้ง่าย

![My New Image](/images/maxresdefault.jpg?negate&cropZoom = 500, 500&lightbox & cropZoom = 600,
200&contrast = -100&sharp&sepia)

โค้ดด้านบนจะสร้างผลลัพธ์ตามที่แสดงด้านล่าง -

ภาพที่ตอบสนอง

ตารางต่อไปนี้แสดงรายการรูปภาพที่ตอบสนองสองสามประเภท

ซีเนียร์ การดำเนินการและคำอธิบาย
1 จอแสดงผลความหนาแน่นสูงขึ้น

เพิ่มคำต่อท้ายชื่อไฟล์และคุณสามารถเพิ่มภาพที่มีความหนาแน่นสูงลงในเพจได้

2 ขนาดพร้อมแบบสอบถามสื่อ

เพิ่มคำต่อท้ายชื่อไฟล์และคุณสามารถเพิ่มภาพที่มีความหนาแน่นสูงลงในเพจได้

Metafiles

image1.jpg, archive.zipหรือการอ้างอิงอื่น ๆ ที่มีความสามารถในการตั้งค่าตัวแปรหรือสามารถแทนที่ด้วยเมตาไฟล์ จากนั้นไฟล์เหล่านี้จะอยู่ในรูปแบบของ<filename>.meta.yaml. ตัวอย่างเช่นหากคุณมีรูปภาพเป็นไฟล์image2.jpgจากนั้นเมตาไฟล์ของคุณสามารถสร้างเป็นไฟล์ image2.jpg.meta.yaml. เนื้อหาต้องอยู่ในไวยากรณ์ yaml คุณสามารถเพิ่มไฟล์หรือข้อมูลเมตาที่คุณต้องการโดยใช้วิธีนี้