Overwriting the Author Template
Advanced Concept
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-author author-id="1">
<template v-slot:default="data">
<h2>{{ data.author.display_name }}</h2>
<p>{{ data.author.bio }}</p>
</template>
</optipub-author>
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="data">
<!-- custom templating -->
</template>
<optipub-author author-id="1">
<template v-slot:header="data">
<h1><em>{{ data.author.display_name }}</em></h1>
</template>
</optipub-author>
Image
The "image" slot allow for you to change all of the images. This gives you the potential to add watermarks, custom CSS properties, and more on just the image.
<template v-slot:image="data">
<!-- custom templating -->
</template>
<optipub-author author-id="1">
<template v-slot:image="data">
<img :src="data.author.website_image.path" :alt="data.author.website_image.keywrods" class="img-responsive float-right">
</template>
</optipub-author>
Bio
The "bio" slot allows for you to make changes to the biography displayed for the author.
<template v-slot:bio="data">
<!-- custom templating -->
</template>
<optipub-author author-id="1">
<template v-slot:bio="data">
<div class="container"><em>{{ data.author.bio }}</em></div>
</template>
</optipub-author>
Updated about 1 year ago