This guide explains different methods to display author profile photos in Blogger templates with proper sizing, fallback handling, and profile links.

Basic Author Photo Display

The standard way to show author profile photos in Blogger:

<!-- Author photo -->
<b:with value='128' var='size'>
<b:with value='"1:1"' var='ratio'>
  <b:if cond='data:post.author and data:post.author.authorPhoto'>
    <img>
      <!-- class --><b:class name='author-photo'/>
      <!-- src --><b:attr expr:value='data:post.author.authorPhoto.image.isResizable ? resizeImage(data:post.author.authorPhoto.image, data:size, data:ratio) : data:post.author.authorPhoto.image' name='src'/>
      <!-- alt --><b:attr expr:value='data:post.author.name' name='alt'/>
      <b:attr name='b:whitespace' value='remove'/>
    </img>
  </b:if>
</b:with>
</b:with>

Image Size and Aspect Ratio

The code uses these parameters:

• 128 is the image size in pixels
• "1:1" is the aspect ratio (square)
• Calculation:
  • width = size (128px)
  • height = (size * ratio height) / ratio width
    • For 1:1 ratio: (128 * 1) / 1 = 128px

With Fallback for Missing Photos

To handle cases where author photos might be missing:

Method 1: Using Placeholder Image

<!-- Author photo with fallback -->
<b:with value='128' var='size'>
<b:with value='"1:1"' var='ratio'>
  <b:if cond='data:post.author and data:post.author.authorPhoto'>
    <img>
      <b:class name='author-photo'/>
      <b:attr expr:value='data:post.author.authorPhoto.image.isResizable ? resizeImage(data:post.author.authorPhoto.image, data:size, data:ratio) : data:post.author.authorPhoto.image' name='src'/>
      <b:attr expr:value='data:post.author.name' name='alt'/>
      <b:attr name='b:whitespace' value='remove'/>
    </img>
  <b:else/>
    <img>
      <b:class name='author-photo'/>
      <b:attr name='src' value='https://via.placeholder.com/128x128/777/eee?text=No+Image'/>
      <b:attr expr:value='data:messages.image' name='alt'/>
      <b:attr name='b:whitespace' value='remove'/>
    </img>
  </b:if>
</b:with>
</b:with>

Linking Author Photos to Profiles

To make the author photo clickable when a profile URL exists:

Basic Profile Link

<!-- Author photo with profile link -->
<b:with value='128' var='size'>
<b:with value='"1:1"' var='ratio'>
  <b:if cond='data:post.author and data:post.author.authorPhoto'>
    <b:tag cond='data:post.author.profileUrl' expr:href='data:post.author.profileUrl' name='a'>
      <img>
        <b:class name='author-photo'/>
        <b:attr expr:value='data:post.author.authorPhoto.image.isResizable ? resizeImage(data:post.author.authorPhoto.image, data:size, data:ratio) : data:post.author.authorPhoto.image' name='src'/>
        <b:attr expr:value='data:post.author.name' name='alt'/>
        <b:attr name='b:whitespace' value='remove'/>
      </img>
    </b:tag>
  </b:if>
</b:with>
</b:with>

Complete Solution with Fallback

<!-- Complete author photo with profile link and fallback -->
<b:with value='128' var='size'>
<b:with value='"1:1"' var='ratio'>
  <b:if cond='data:post.author and data:post.author.authorPhoto'>
    <b:tag cond='data:post.author.profileUrl' expr:href='data:post.author.profileUrl' name='a'>
      <img>
        <b:class name='author-photo'/>
        <b:attr expr:value='data:post.author.authorPhoto.image.isResizable ? resizeImage(data:post.author.authorPhoto.image, data:size, data:ratio) : data:post.author.authorPhoto.image' name='src'/>
        <b:attr expr:value='data:post.author.name' name='alt'/>
        <b:attr name='b:whitespace' value='remove'/>
      </img>
    </b:tag>
  <b:else/>
    <b:tag cond='data:post.author.profileUrl' expr:href='data:post.author.profileUrl' name='a'>
      <img>
        <b:class name='author-photo'/>
        <b:attr name='src' value='https://via.placeholder.com/128x128/777/eee?text=No+Image'/>
        <b:attr expr:value='data:messages.image' name='alt'/>
        <b:attr name='b:whitespace' value='remove'/>
      </img>
    </b:tag>
  </b:if>
</b:with>
</b:with>

Best Practices

• Always include proper alt text for accessibility
• Use appropriate image sizes to balance quality and performance
• Consider using CSS to style the author photo consistently
• Test with different author scenarios (with/without photo, with/without profile URL)
• For team blogs, you might want to combine this with the author name display

This guide explains different methods to display author names in Blogger templates with proper fallback handling and profile links.

Basic Author Name Display

The simplest way to show the author name in a Blogger template:

<!-- Basic Author name -->
<b:if cond='data:post.author'>
    <data:post.author.name/>
</b:if>

This will display the author name only if it exists.

With Fallback for Missing Authors

To handle cases where author information might be missing:

Method 1: Using b:eval

<!-- Author name with fallback -->
<b:eval expr='data:post.author ? data:post.author.name : "Anonymous"'/>

Method 2: Using b:else

<!-- Author name with fallback -->
<b:if cond='data:post.author'>
    <data:post.author.name/>
<b:else/>
    Anonymous
</b:if>

Linking to Author Profiles

To make the author name clickable when a profile URL exists:

Basic Profile Link

<!-- Author name with profile link -->
<b:if cond='data:post.author'>
    <b:if cond='data:post.author.profileUrl'>
        <a expr:href='data:post.author.profileUrl'>
            <data:post.author.name/>
        </a>
    <b:else/>
        <data:post.author.name/>
    </b:if>
</b:if>

Profile Link with Fallback

<!-- Complete solution with profile link and fallback -->
<b:if cond='data:post.author'>
    <b:if cond='data:post.author.profileUrl'>
        <a expr:href='data:post.author.profileUrl'>
            <data:post.author.name/>
        </a>
    <b:else/>
        <data:post.author.name/>
    </b:if>
<b:else/>
    Anonymous
</b:if>

Best Practices

• Always include a fallback for cases where author data might be missing
• Consider adding CSS classes for styling author names consistently
• For team blogs, you might want to show author profile pictures as well
• Test your template with posts that have and don't have author information

Advanced Usage

For more complex implementations, you can combine this with other Blogger data variables:

<div class="post-meta">
    <span class="post-author">
        <b:if cond='data:post.author'>
            Posted by 
            <b:if cond='data:post.author.profileUrl'>
                <a expr:href='data:post.author.profileUrl'>
                    <data:post.author.name/>
                </a>
            <b:else/>
                <data:post.author.name/>
            </b:if>
        </b:if>
    </span>
    <span class="post-timestamp">
        on <data:post.timestamp/>
    </span>
</div>