Build a custom Duda widget that lets you set up author pages

Build a custom Duda widget that displays an author image and links to their author page

Liz Fedak • December 13, 2021New Paragraph

Tired of the default blog widgets? So was I! ;) Read this tutorial to learn how you can add a custom author bar widget

At the end of the day, your Duda website is made out of HTML, CSS, and JavaScript. We can tap into the HTML using JavaScript to manipulate what shows up on the blog page after it renders. Read the rest of the tutorial to learn how! You should have some familiarity with HTML, CSS, and JavaScript to understand what's happening in the code, but I'll give some high level context, so it's okay if you can't read code.

All of this code should be added to a custom widget in the Duda widget builder. Check out Duda course on Building Custom Widgets if you need a quick introduction to the widget builder.

Step 1. Find the author's name & generate the author URL

Duda uses a data attribute in the HTML for the line that renders the author's name on your website. What is a data attribute? Using MDN's description: "Any attribute on any element whose attribute name starts with data- is a data attribute."

This is what that looks like if you pull up a blog post on a Duda site and dig around in the HTML: [data-inline-binding='blog.composedAuthor'] (edited 4/27/23)

Since we know that exists, we can use JavaScript to find that HTML tag to retrieve the name, i.e., the inner HTML of that tag. If you configured your blog widget to show the date, you might also need to add some code to split the string so you're only retrieving the author's name. (That's the `.innerText.split((' •')[0];` part of the example below.

// JavaScript
const details = document.querySelector("[data-inline-binding='blog.composedAuthor']").innerText.split('•')
const name = details[0].trim();
const pubDate = details[1].trim();

Using the author's name, we can compose a link to their author page. The first option in the next JavaScript examples uses a "Text" input in the Duda widget builder's Content Editor tab with the variable name `urlBase`. If you're only using this on one site, you can skip that step and simply write in your URL, as you see in option 2.

Great! Now we have variables with the author's name and a link to their author page. Not super useful out of context, but with a little more JavaScript magic, we can render the name and author image with a link to the author's page and remove the default author line.

Step 2. Retrieve the author image URL

For the sake of simplicity, in the demo we hard-coded an object that has a list of the author names and their profile images using a JavaScript object. To retrieve the author's image URL, we will look up the URL value using bracket notation on the `authors` object and assign it to a variable named `imageURL`.

// JavaScript
function getImage(name) {
let person = data.config.authors.filter(x => x.name === name)[0]
return person.image;
}
function getURL(name) {
let person = data.config.authors.filter(x => x.name === name)[0]
return person.url;
}const authBlock = $(element).find('.author_img');
const details = document.querySelector("[data-inline-binding='blog.composedAuthor']").innerText.split('•')
const name = details[0].trim();
const pubDate = details[1].trim();

let imageURL = getImage(name)
let namePage = name.toLowerCase().split(" ").join("-");
let url = getURL(name)

Step 3: Add HTML

The HTML below will give some structure to the elements we are going to add to the DOM with JavaScript. You can change your HTML and classes to suit your preferences. This HTML is what we use on givityapp.com's blog post. Scroll up to check it out!

The image URL you see below is a generic anonymous user image. When the blog page loads initially, it'll load with the anonymous profile image until the author's image loads.

<a>

<div>

Step 4: Add some more JavaScript

Now we're ready to manipulate the DOM! We have access to the author's name, profile page, and their profile image.

This example uses .find() to manipulate the HTML we added and to remove the original author line. There are a few things going on here, mainly, we are modifying attributes of those elements with the author data from the previous steps, and rendering new HTML using that data.

// JavaScript
function getImage(name) {
let person = data.config.authors.filter(x => x.name === name)[0]
return person.image;
}
function getURL(name) {
let person = data.config.authors.filter(x => x.name === name)[0]
return person.url;
}

const authBlock = $(element).find('.author_img');
const details = document.querySelector("[data-inline-binding='blog.composedAuthor']").innerText.split('•')
const name = details[0].trim();
const pubDate = details[1].trim();

let imageURL = getImage(name)
let namePage = name.toLowerCase().split(" ").join("-");
let url = getURL(name)

$(element).find(".blogAuthImg").attr('src', new URL(imageURL))
$(element).find(".authorPageURL").attr('href', url);
$(element).find('.authorName').text(name)

document.querySelector("[data-inline-binding='blog.composedAuthor']").remove();

Step 5: Make it pretty!

Disclaimer, I'm not a designer, so I consider this to be pretty. :) The CSS below will stylize the widget as you see in our author bar above. Modify the classes to suit your needs!

:root {
--auth-bar-height: 40px;
}
.author-line > * {
font-family: 'PPNeueMachina-Light' !important;
color: rgba(54, 73, 112, 1) !important;
}
.author-line {
width: 250px;
}
.author-line > a {
display: flex;
flex-direction: row;
align-items: center;
justify-content: start;
height: var(--auth-bar-height);
width: 250px;
gap: 20px;
}

.blogAuthImg {
object-fit: cover;
object-position: center center;
width: var(--auth-bar-height);
height: var(--auth-bar-height);
display: block;
border-radius: 100%;
box-sizing: border-box;
}
.author-a {
text-decoration: none !important;
}

.bybeforename {
text-decoration: none !important;
color: #000 !important;
}

.nameInjection {
text-decoration: none !important;
color: #35a5ad !important;
white-space: nowrap;
font-size: 16px;
}

Newer Post >

API workflow: Airtable image upload → Duda content library → Send Duda-stored image URL back to Airtable (Make collections more awesome!)

By Liz Fedak • January 20, 2022

Make life easier for your clients and make their sites faster with optimized images by uploading images to Duda from their Airtable base

Almost there!

Reset Password

Create Your Account

Login

Tired of the default blog widgets? So was I! ;) Read this tutorial to learn how you can add a custom author bar widget

API workflow: Airtable image upload → Duda content library → Send Duda-stored image URL back to Airtable (Make collections more awesome!)

How to add a 'publish date' field in your Airtable external Duda collection

I Saw a Christmas Tree Roll Across the Road Today

Case Study: How I Built the Widget Shop

Case Study: Content Snare <> Duda API

Case Study: How the COPreneur Path Podcast Uses an Airtable External Collection in Duda to Showcase their Episodes

Blog tags custom widget tutorial

User name

Almost there!

Reset Password

Create Your Account

Login

Tired of the default blog widgets? So was I! ;) Read this tutorial to learn how you can add a custom author bar widget﻿

API workflow: Airtable image upload → Duda content library → Send Duda-stored image URL back to Airtable (Make collections more awesome!)

How to add a 'publish date' field in your Airtable external Duda collection

I Saw a Christmas Tree Roll Across the Road Today

Case Study: How I Built the Widget Shop

Case Study: Content Snare <> Duda API

Case Study: How the COPreneur Path Podcast Uses an Airtable External Collection in Duda to Showcase their Episodes

Blog tags custom widget tutorial

Tired of the default blog widgets? So was I! ;) Read this tutorial to learn how you can add a custom author bar widget