--- title: "Media" date: 2018-09-04 author: "nK" --- # Media A gallery of images from the Media Library, managed inside the block. ![](https://staging.visualportfolio.com/wp-content/uploads/2018/08/Shot-2026-03-25-at-09.29.11-1024x624.jpg)![](https://staging.visualportfolio.com/wp-content/uploads/2018/08/Shot-2026-03-25-at-09.29.11-1024x624.jpg) ## Pick images 1. Choose **Media** as the source. 2. Click **Add Media**. Select images (Shift or Ctrl for several) or upload new ones, then **Select**. 3. To add more later, click **Edit Gallery**. ![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.05.45-1024x624.jpg)![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.05.45-1024x624.jpg) ![](https://staging.visualportfolio.com/wp-content/uploads/2024/07/Shot-2024-07-11-at-20.37.50-1024x596.png)![](https://staging.visualportfolio.com/wp-content/uploads/2024/07/Shot-2024-07-11-at-20.37.50-1024x596.png) With Pro the picker also accepts **video files** (`mp4`, `webm`, `ogg`, `ogv`, `mpeg`, `mpg`, `avi`, `mov`, `wmv`, `flv`, `mkv`, `m4v`, `3gp`, `ts`, `mts`, `m2ts`); see Video items below. Without Pro, only images can be picked; link a video with the Video format instead. The attachment’s Title, Caption, Alt and Description in the Media Library can feed the gallery item (see Titles and descriptions). ## The gallery list Under the button the images are listed, 18 at a time (**Show More**, **Show All**), with: - drag to reorder; - **Select All**, then **Bulk actions → Edit** (opens the bulk settings) or **Delete**; - **Filter by Category** to show only images of one category; - a click on an image to open its **Media Settings**. ## Media Settings of one image ![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.06.44-1024x556.jpg)![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.06.44-1024x556.jpg) ![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.07.46-1024x555.jpg)![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.07.46-1024x555.jpg) FieldPlanWhat it does**Normal / Hover** media toggleHover is ProHover: an image or a local video shown while the pointer is over the item (see Hover media)**Image focal point**FreeThe part of the image that stays visible when the layout crops it**Title**FreeThe item title. Editable when Items Title Source is Custom; otherwise filled from the attachment and read-only**Alt**FreeAlt text for this gallery only. Empty keeps the Media Library alt**Description**FreeThe item description; same rule as Title**Categories**FreeFree-text categories, used by the Filter and shown by Display Categories. Type a name and press Enter; names used on other images are suggested**Format**FreeStandard, Video; with Pro also Audio and Gallery**Video URL**FreeShown for the Video format. YouTube or Vimeo; more vendors with Pro (see [Project Formats](https://staging.visualportfolio.com/docs/projects/project-formats/))**Audio URL**ProShown for the Audio format**Album Images**ProShown for the Gallery format. The images this item opens in the lightbox**URL**FreeA custom link. Default is the full-size image file. Setting a URL turns the lightbox off for this image: it becomes a plain link**Author Name**, **Author URL**FreeShown by Display Author in the skin**Playback**, **Cover Image**ProShown for local video files (see Video items)**Custom Popup Image**ProAn image shown in the lightbox instead of this one. Not for the Gallery format**Custom Picture ID for Deep Linking**ProThe `pid` of this image in deep links (see [Click Action](https://staging.visualportfolio.com/docs/gallery-blocks/items-click-action/))Additional media infoFreeFile name, type, size, dimensions, links to the file, the attachment page and the edit screen![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.08.32-1024x624.jpg)![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.08.32-1024x624.jpg) ![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.12.44-1024x625.jpg)![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.12.44-1024x625.jpg) ![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.13.55-1024x624.jpg)![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.13.55-1024x624.jpg) ![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.16.40-1024x625.jpg)![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.16.40-1024x625.jpg) ![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.18.59-1024x625.jpg)![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.18.59-1024x625.jpg) ![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.21.27-1024x626.jpg)![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.21.27-1024x626.jpg) **Bulk Image Settings** (Select All → Bulk actions → Edit) sets the focal point, categories, format, author name and author URL on every selected image at once. ![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.23.56-1024x624.jpg)![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.23.56-1024x624.jpg) ![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.26.24-1024x626.jpg)![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.26.24-1024x626.jpg) ## Video items (Pro) A video file picked from the Media Library becomes a video that plays inside the grid item, with a play icon. Settings: SettingValuesDefault**Playback**Autoplay in Viewport (plays when at least half of it is visible, pauses otherwise, muted), Play on HoverAutoplay in Viewport**Cover Image**An image shown before playbackThe video’s own featured image, if any![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.10.07-1024x624.jpg)![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.10.07-1024x624.jpg) In the lightbox the item plays the **Video URL** if you set one, otherwise the file itself. With a custom **URL** the item links out and does not open the lightbox. ## Hover media (Pro) Switch the toggle at the top of Media Settings to **Hover** and pick an image or a local video. Images cross-fade on hover (animated GIFs restart), with their own focal point. Videos play on hover and pause when the pointer leaves. Hover needs a pointer; on touch screens the normal media is shown. ![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.11.51-1024x626.jpg)![](https://staging.visualportfolio.com/wp-content/uploads/2018/09/Shot-2026-03-25-at-13.11.51-1024x626.jpg) ## Albums (Pro) Set the Format to **Gallery** and pick **Album Images**. The item shows a stacked-images icon (Display Gallery Icon in the skin) and, optionally, “N Images” (Display Images Count). Clicking it opens the album in the lightbox. See [Albums](https://staging.visualportfolio.com/docs/gallery-blocks/albums/). ## Titles and descriptions SettingValuesDefault**Items Title Source**None, Custom, Image Title, Image Caption, Image Alt, Image DescriptionCustom**Items Description Source**SameCustom![](https://staging.visualportfolio.com/wp-content/uploads/2024/07/Shot-2024-07-11-at-21.06.34-1024x582.png)![](https://staging.visualportfolio.com/wp-content/uploads/2024/07/Shot-2024-07-11-at-21.06.34-1024x582.png) Custom uses the Title and Description typed in Media Settings. The Image values are read from the attachment at render time, so editing them in the Media Library updates every gallery. A deleted attachment yields an empty text. ## Order SettingValuesDefault**Order by**Manual, Item Title, Item Description, Image Title, Image Caption, Image Alt, Image Description, Image Uploaded, RandomManual**Order Direction**ASC, DESCASC![](https://staging.visualportfolio.com/wp-content/uploads/2024/07/Shot-2024-07-11-at-21.07.44-1024x582.png)![](https://staging.visualportfolio.com/wp-content/uploads/2024/07/Shot-2024-07-11-at-21.07.44-1024x582.png) Items with an empty sort field go last. Random keeps the same order for a visitor across pages. ## Size and performance Galleries use the Small, Medium, Large and Extra Large (VP) image sizes from [Settings → Images](https://staging.visualportfolio.com/docs/settings/images/), chosen per layout; the lightbox uses its own sizes. Large galleries: set Items Per Page below 40 and add Load More or Infinite pagination, as the editor warning suggests.