Add Featured Images to Anchor CMS Posts

I’ve been meaning to add featured images to my posts for a while now. I finally sat down this weekend to do it and thought I’d document the process for those of you out there that might benefit.

I use Anchor CMS to run this site, which I’ve mentioned numerous times before. You might want to check out Add Disqus to Your Anchor CMS Blog and (Fairly) Simple Shared Count for more challenging Anchor upgrades.

This is one of the simplest projects to implement; it should only take you a few minutes to complete. Styling the featured image after you have it inserted into your post is the most time-consuming part, and the only thing I won’t get into in this tutorial.

Add a Custom Field

Anchor allows you to add custom fields to either posts or pages. We first should set one up so that we can call upon it in our code.

animated GIF of the process of adding a custom field in Anchor CMS

Watch how easy it is to add a custom field in Anchor CMS.

You’ll want to log into your site’s admin, click on the Extend link in the header, and then Custom Fields. Next click the Create a new field button and select the options you need. For the purposes of this tutorial, we’ll be choosing post and image.

You’ll want to fill out the Unique Key field with what your code will use to call the field. I suggest using hyphens but you can use underscores in place of spaces too. The Label field is what you’ll see in the admin and should be short but useful to you. I like to add ideal or required dimensions in parenthesis so that I can remember later what I intended when setting it up.

Use the Image max width and Image max height fields to have Anchor scale your image down if it’s too big. I’ve found this to only work if both fields are filled out. In the case where you may only be concerned with the width of an image, just use a super high value for the height field.

Finally, click the Save button and you’re done. Your new custom field is ready and waiting for you at the bottom of your posts. You can click the little cloud icon to select an image now or wait until later. It doesn’t matter since nothing will show up on the front-end until we add the necessary code to our theme.

screenshot of new custom field added to post editor

Bring the Custom Field to Life

Open up your editor and find your article.php file in your theme. We’re going to add conditional logic to make sure we don’t cause any errors or display any featured image HTML when there isn’t an image to display.

Pick a spot in your file where you’d like the featured image to display and place the following code there:

<?php $featuredimage = article_custom_field('featured-image'); ?>
<?php if(!empty($featuredimage)): ?>
    <div class="featured-image">
        <img src="<?php echo $featuredimage; ?>" alt="<?php echo article_title(); ?>" />
    </div>
<?php endif; ?>

The first line assigns the returned custom field value to a variable so we can use it later. Then we wrap our markup in a conditional that effectively says, “if our $featuredimage variable is not empty, use it in the following way.” The closing of the conditional with endif; without using an elseif: or else: means we’re either going to show the featured image with it’s markup, or we won’t show anything.

I’ve placed this code just above my post body content with the featured image URL being used in the src attribute of an <img> tag. So when I have a featured image, it shows up below the title and above the body text. When I don’t have a featured image, nothing is shown between the title and body text. You can use your featured image anywhere you like, even using the URL to add a background image to your whole page.

Make sure you change article_custom_field('featured-image'); in the above code to grab the Unique Key you picked for your custom field. You’ll also want to change the HTML markup to whatever you’re looking to accomplish. For my site, I’ve given the featured image a simple wrapper using a <div> with a class of featured-image so I can style it quickly in my CSS.

Now your featured image will display on your post if it exists. And if it doesn’t exist, the post will look as if there never was a featured image option. Pretty slick.

Endless Possibilities

You can add as many custom fields as you find a use for. And you can customize them to your heart’s content. While there isn’t a Boolean field type yet for getting a checkbox, you could use a simple text field and true/false values for toggling options on and off on your posts. That’s the only limitation I can think of, aside from repeating fields.

You can add just about anything to your site with custom fields. Think about dates, times, extra info, background images, featured images, gallery images, file downloads, etc.

I’ve got a few ideas for displaying the featured images on my homepage and blog landing page too. Using pretty much the same method as described here, I’ll be doing that as soon as I have more posts with featured images.

How did your site turn out? Where are you using custom fields on your site? Tell me in the comments below.