Member Avatar for OpalSos

How do I dynamically show the author of each post next to the post in question? This is a team blog, with 5 contributors, and I'm looking to display each post author once they had posted their own article.

As for now, the simple solution is that I put an image as a background to the post i.e

.post {
margin: 0;
background:url(http://i44.servimg.com/u/f44/11/94/91/73/blank10.jpg)no-repeat;
padding:0 0 4px 30px; 
}

which works perfectly when referencing one author image,and how about the rest contributors?
Please help me to solve the problem. Thank you for your kind attention into this matter.(Note: I'm using a blogger template as well as my blog platform)

  • 2 Contributors
  • 3 Replies
  • 127 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by OpalSos

Dani AI

Generated

A simple background on every post will always show the same avatar. The clean, maintainable options are to push the author image down from the data layer (best), add an author-specific class in the post markup, or inject the image client-side when template editing is limited.

As implied, the authoritative source should be the post metadata. For a CMS or self-hosted site the recommended pattern is to store an avatar URL on each author record and render it with the post. Example (generic templating):

<div class="post author-{{author.username}}">
  <img class="avatar" src="{{author.avatarUrl}}" alt="{{author.name}}">
  ...post content...
</div>

That keeps markup semantic, allows easy CSS positioning, and lets the avatar be cached and sized appropriately.

For Blogger (since mentioned using a Blogger template) the same idea applies: edit the post loop in the template and emit either an <img> or an author-specific class using the post-author metadata available in the template. If direct template conditionals are awkward, map authors to images client-side with a tiny script. Example client-side approach:

<script>
(function(){
  var avatars = { "OpalSos": "/images/opal.jpg", "Author2": "/images/a2.jpg" };
  document.querySelectorAll('.post').forEach(function(p){
    var a = p.querySelector('.post-author');
    if(!a) return;
    var url = avatars[a.textContent.trim()];
    if(url){
      var img = document.createElement('img');
      img.src = url; img.alt = a.textContent.trim(); img.className = 'avatar';
      a.insertBefore(img, a.firstChild);
    }
  });
})();
</script>

Practical tips: use appropriately sized images (30–60px), set width/height in CSS, provide alt text, and include a fallback (initials or generic avatar) for authors without images. Avoid embedding large images as backgrounds; prefer an <img> or a CSS sprite for performance.

Recommended Answers

All 3 Replies

Member Avatar for OpalSos

I put up my question hoping that someone will try to show me the way or else advice me on how to. Guess what, I need to figure out by myself though :)

Member Avatar for DangerDev

Hi,
You will be maintaining data base for each post, along with data base right??
take data from there and while generating the page dynamically put the author name along with post in a div or span tag........
is this thing you were asking ???

Member Avatar for OpalSos

Thank DangerDev, finally I've found the way out.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.