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.

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

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

<optipub-author author-id="1">
  <template v-slot:image="data">
    <img :src="data.author.website_image.path" :alt="data.author.website_image.keywords" 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.

<optipub-author author-id="1">
  <template v-slot:bio="data">
    <div class="container"><em>{{ data.author.bio }}</em></div>
  </template>
</optipub-author>