MoonDocs

# Media

Do wyświetlania plików oraz obrazków można użyć komponentów z katalogu components/media:

  • MediaFile
  • MediaImage
  • MediaResponsiveImage (wyświetlenie różnych grafik w zależności od szerokości ekranu)
  • MediaThumb

# MediaFile

Wyświetlenie pliku w formie linku.

# MediaImage

Wyświetlenie obrazka.

# MediaThumb

Służy do generowania różnych wersji grafiki na podstawie podanego typu oraz parametrów.

# Obsługiwane typy

Typy przekształceń są zależne od konfiguracji w api, domyślnie są to:

  • blur,
  • brightness,
  • colorize,
  • contrast,
  • crop,
  • encode,
  • exif,
  • flip,
  • fit,
  • gamma,
  • greyscale,
  • heighten,
  • invert,
  • limitColors,
  • opacity,
  • pixelate,
  • resize,
  • resizeCanvas,
  • rotate,
  • sharpen,
  • trim,
  • widen,
  • width

W zależności od wybranego przekształcenia trzeba podać różne parametry.

Dla domyślnego typu resize wygląda to następująco:

<template>
  <media-thumb
    v-if="page.media_files?.image"
    class="rounded-xl"
    type="resize"
    :params="{
      width: 375,
      height: 265,
    }"
    :media-file="page.media_files.image"
  />
</template>

TIP

Na temat przekształceń więcej można przeczytać w sekcji backendowej

# MediaResponsiveImage

Generowanie grafik o różnych szerokościach w celach optymalizacyjnych. Domyślnie jako źródło danych wykorzystywane są dwa obrazki: wersja desktop oraz mobile. W przypadku gdy nie będzie dodanej wersji mobile obrazek tworzy się automatycznie. W panelu za dodawanie tego typu grafik służy komponent VImageCollection

<template>
  <media-responsive-image 
    name-desktop="image_desktop"
    name-mobile="image_mobile"
    :media-files="page.media_files" 
  />
</template>

TIP

Za optymalizacje i transformację plików graficznych w aplikacji odpowiada NuxtImage (opens new window)

← Seo →