optipub-resources

This "optipub-element" retrieves all of the resources for a specific publication. Check out Getting Started With OptiPub Elements first.

Usage

❗️
Required Property
The optipub-resources element requires a "publication-id" property to be defined on the element.

<optipub-resources publication-id="1"></optipub-resources>

Custom Properties

Additional properties exist on the optipub-resources element that allow more control over the element without having to overwrite the template.

Property	Description	Example
"image-size"	Used to determine the size of the thumbnail image displayed on the resources.	image-size="125px"
"hide-header"	Boolean property that hides the default "Resources" heading.	hide-header
"hide-images"	Boolean property that hides resource thumbnails.	hide-images
"hide-title"	Boolean property that hides resource titles.	hide-title
"hide-description"	Boolean property that hides the description, author, and date line.	hide-description
"show-content"	Boolean property that renders each resource's HTML body in the list. External resources never show body content.	show-content
"disable-links"	Boolean property that renders titles, thumbnails, and author names as plain text instead of links.	disable-links
"loader-color"	Bootstrap color name applied to the loading spinner, such as `primary` or `success`.	loader-color="primary"
"author-url"	Used to specify the dynamic property to build the links for the authors.	author-url="display_name"
"author-url-prefix"	Used to specify the dynamic property to build the prefix of the links for the authors.	author-url-prefix="/editors/"
"pagination"	Boolean property that determines whether to show a paginator	pagination
"author-id"	Used to filter the resources by the specified author.	author-id="2"
"category-id"	Used to filter the resources by the specified resource category.	category-id="3"
"resource-id"	Used to get the resources that are related to the specified resource.	resource-id="7"
"tag-id"	Used to filter the resources by the specified tag.	tag-id="4"
"video-id"	Used to get the resources that are related to the specified video.	video-id="8"
"locale"	Pin the displayed language (for example `de`) and skip browser / saved-preference detection.	locale="de"

The element always requests published translations. When other language versions exist, a language dropdown appears at the top right. Changing it saves the choice to localStorage and an optipub_locale cookie so it persists across reloads. The locale property, when set, is used instead of that saved preference and instead of the visitor's browser language. Resources without a matching translation keep their original language.

Resources marked as external in OptiPub send title and thumbnail clicks to their external URL instead of the resource page. The public API omits content, content_data, and pdf for those rows (and for nested translations of an external source). The image and title slots receive an href prop with that destination.

📘
Source-only list
The public resources list returns source rows only (the original-language record). Other published languages are nested on each item and swapped in the display — they are not extra list rows. Filters such as resource-id and video-id also return source rows only. To fetch a specific translation by id, use optipub-resource.

Custom Templates

You can overwrite any part of the resources layout with Vue slots. See Overwriting the Resources Template.

Complete Example

<optipub-resources
                 publication-id="1"
                 locale="de"
                 resource-id="1"
                 author-id="1"
                 category-id="2"
                 video-id="2"
                 tag-id="2"
                 author-url="display_name"
                 author-url-prefix="/editors/"
                 image-size="100px"
                 columns="title,description,active,display_on_website"
                 sort="rank|asc"
                 per-page="20"
                 page="1"
></optipub-resources>