HomeGuidesAPI Reference

Overwriting the Authors Template

Suggest Edits

❗️

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.

713 
<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.

713 
<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.

713 
<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.

713 
<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.

713 
<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.

713 
<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.

713 
<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 5 months ago