media()

Show HTML for one or more photos, documents or videos. Create a gallery or slideshow with nr="all" and combine this with CSS and Javascript. Add a hyperlink to a photo to make it clickable.

parameters

type
Type of media: "photo", "document" or "video" (default: "photo")

url="foto/the-team.jpg"
url of media to display

article="2022/about-us"
url from article to get media from

label="name"
get media that is labeled with "name"

nr="all|random|3 4 5"
Number of item to display from found media. First is nr 1 (default). To select all media (gallery) use nr="all". Or select specific nr's separated with space.

class="..."
add extra class to <div class="photo|document|video ..."> or <div class="mediaset .."> for your custom css styling

ratio="3:2"
select photo in aspect ratio (ratio of photo can be set in Photo Editor)

description

Show photo or mediaset based on active page (address url) or from argument url, article or label argument. Specify which photo(s) with nr. Select aspect B variant of photo to get same size in photoset or to match fixed photosize in layout (default total uploaded photo). Add class to manipulate photo(set) from css.

<div class="photo">
  <img src="[url]"/>
  <div class="description">[description]</div>
</div>
# html for one photo

<a class="photo" href="[hyperlink]">
  <img src="[url]"/>
  <div class="description">[description]</div>
</a>
# html for one photo with hyperlink added in the WebEtui Photo Editor

<div class="mediaset photo">
  <div class="photo">..</div>
  <div class="photo">..</div>
</div>
# html for mediaset with photo's

<a class="document" href="[url]">
  <img src="[preview]"/>
  <div class="description">[description]</div>
</a>
# html for document

<div class="mediaset document">
  <div class="document">..</div>
  <div class="document">..</div>
</div>
# html for mediaset with documents

<div class="video">
  [fragment]
  <div class="description">[description]</div>
</div>
# html for document

<div class="mediaset video">
  <div class="video">..</div>
  <div class="video">..</div>
</div>
# html for mediaset with documents

examples

photo()
-> show first photo from article (from url) or label (from url)

photo(url="foto/foo.jpg")
=> show photo "foto/foo.jpg"

photo(article="over-ons")
=> show first photo of article "over-ons"

photo(label="products")
=> show first photo with label "products"

photo(label="products" nr="all")
=> show photoset with photos with label "products"

photo(label="slideshow" class="slideshow" nr="all")
=> show photoset with all photos with label "slideshow"

photo(ratio="5:1")
=> show first photo from article or label, choose aspectratio 5:1