Overwriting the Authors Template
Advanced Concepts
The following page is for advanced users who understand HTML and are familiar with VueJS Slots.
Default Slot
All of the "optipub-elements" allow you to overwrite the way the information is displayed through the "default" slot.
<template v-slot:default="data">
<!-- custom templating -->
</template>
<optipub-authors publication-id="1">
<template v-slot:default="data">
<ul v-for="author in data.authors" :key="author.id">
<li>{{ author.display_name }}</li>
</ul>
</template>
</optipub-authors>
Header
The "header" slot allows you to change the title of the element without affecting any of the data or default template underneath.
<template v-slot:header>
<!-- custom templating -->
</template>
<optipub-authors publication-id="1">
<template v-slot:header>
<h1>Editors</h1>
</template>
</optipub-authors>
Authors
The "authors" slot allows for you to change the list of authors that is being rendered. This allows you complete control over the array of authors being rendered.
<template v-slot:authors="data">
<!-- custom templating -->
</template>
<optipub-authors publication-id="1">
<template v-slot:authors="data">
<ul v-for="author in data.authors" :key="author.id">
<li><a href="#">{{ author.display_name}}</a></li>
</ul>
</template>
</optipub-authors>
Author
The "author" slot allows for you to change the layout of the author without having to loop through the array.
<template v-slot:author="data">
<!-- custom templating -->
</template>
<optipub-authors publication-id="1">
<template v-slot:author="data">
<a href="#">{{ data.author.display_name}}</a>
<p>{{ data.author.blurb }}</p>
</template>
</optipub-authors>
Image
The "image" slot allows for you to change all of the images. This gives you the potential to add watermarks, custom CSS properties, and more on just the images.
<template v-slot:image="data">
<!-- custom templating -->
</template>
<optipub-authors publication-id="1">
<template v-slot:image="data">
<img :src="data.author.website_image.path" :alt="data.author.website_image.keywords">
</template>
</optipub-authors>
Name
The "name" slot allows for you to make changes to just the author's name.
<template v-slot:name="data">
<!-- custom templating -->
</template>
<optipub-authors publication-id="1">
<template v-slot:name="data">
<h2>{{ data.author.last_name }}, {{ data.author.first_name}}</h2>
</template>
</optipub-authors>
Description
The "description" slot allows for you to make changes to the description of the author.
<template v-slot:description="data">
<!-- custom templating -->
</template>
<optipub-authors publication-id="1">
<template v-slot:description="data">
<strong>OptiPub -- </strong><p>{{ data.author.blurb }}</p>
</template>
</optipub-authors>
Updated 12 months ago