Display Large Featured Image on Archive/Category Page?

Resolved AZBros
(@azbros)

7 years, 11 months ago

On my site, I currently have a large ‘Featured Image’ that displays at the top of all posts and pages. On the Post and Page editor, there’s a place to set the Featured Image to be displayed. I noticed that when editing Categories, you can display a short description/summary of the Category itself, but you cannot display an image.

For all of my Categories, I have created a unique ‘Featured Image’. This is displayed on Posts within the Category (with a few exceptions). Categories such as News, Previews, Reviews and other broad categories will typically display a Featured Image relating directly to the content of that Post. If no Featured Image is selected for a post, however, I use a plugin called “Category Featured Images” to display a default image which I set for each Category.

I tried using a plugin called “WP Custom Category Pages”. It actually displays a Featured Image on my Category pages, but it’s set to show the Featured Image of the most recent post in that Category. For the examples I mentioned above, that doesn’t really work for me. I’d like to be able to set an exact image to each Category/Archive page. Also, the “WP Custom Category Pages” plugin just lists the titles of the posts within a Category, and I’d like to keep the look of the Hueman theme’s Archive pages.

Is there some way to set an image to be displayed at the top of the Archive pages (below the title and above the description)? How complicated would it be to code this in (perhaps even somehow linking it to the “Category Featured Images” plugin? If it’s too involved or just not feasible, I can live with no Featured Image on my archive pages, but it would be a nice addition for sure.

Thanks for any advice!

Viewing 7 replies - 1 through 7 (of 7 total)

bdbrown
(@bdbrown)

7 years, 11 months ago
Hi AZBros. Here’s a post related to setting it up with your plugin:
https://wordpress.org/support/topic/how-would-i-modify-this-part-of-headerphp-to-display-category-image

Or you could do this:

1. Create a folder /images in your child theme.

2. Add images corresponding to your category names:
lions.jpg
tigers.jpg
bears.jpg

3. Copy archive.php to your child theme.

4. Add a new block for your image:
```
<?php get_template_part('parts/page-title'); ?>

<div class="my-category-img">
    <?php echo '<img src="' . get_stylesheet_directory_uri() . '/images/' . single_cat_title('',0) . '.jpg" alt="Category Image">'; ?>
</div>

<div class="pad group">
```
5. You can center the image using this CSS:
```
.my-category-img img {
    display: block;
    margin: 0 auto;
}
```
Thread Starter AZBros
(@azbros)

7 years, 10 months ago

Hi bdbrown,
I finally got around to trying this. It looks like it’s going to work. When you said to name the images to correspond with the Category names, I thought you meant the Category ID or Name within WordPress (i.e. game-preview). I tried that and it didn’t work. I then checked the URL of the image and it was showing up as the actual Category Name (i.e. Game Preview, spaces and all).
Once I changed the image name to represent that, it worked. I’m curious, what would the code be to use the Category ID/Name within WordPress instead? I think that’ll be easier when adding images in the future.

Thanks again for your help, I really appreciate it!
bdbrown
(@bdbrown)

7 years, 10 months ago
Name within WordPress (i.e. game-preview)

If you mean the category slug, change this:
```
single_cat_title('',0)
```
to this:
```
get_category( get_query_var( 'cat' ) )->slug
```
Thread Starter AZBros
(@azbros)

7 years, 10 months ago

Awesome, that worked perfectly! Thanks!

Thread Starter AZBros
(@azbros)

7 years, 10 months ago

Just came across a slight issue with this solution. While it does work perfectly for the categories that have images, those that do not (including tags and users) show a blank, ‘image missing’ square.

I was wondering if there was a way to hide the image box area for archive pages that do not have an image in the Images folder? For example, my major Categories all have images set up for them the way you described above. But if someone clicks on a different Archive page, such as a tag or user name, no image shows up and in it’s place is a “missing image” box.
It would be too difficult to set up an image for every single page that has an Archive. It would be easier to simply hide the Image area if no image was found.

If this can’t be done or is too complicated, I have a solution that I believe should work. For the few Categories I need images for, I could just make a specific Archive page for them (i.e. category-news.php) and use the above code. For the standard archive.php file, I’ll just change it back normal. It’ll still take a little effort any time I need to create a new Category since I’ll have to create a new custom php file as well as upload an image to the Images folder, but I can live with that. Just curious if the other way might be possible.

Thanks!
bdbrown
(@bdbrown)

7 years, 10 months ago
If you’re still working on this I found a solution here:
http://stackoverflow.com/questions/7991425/php-how-to-check-if-image-file-exists
```
<?php $src = get_stylesheet_directory_uri() . '/images/' . get_category( get_query_var( 'cat' ) )->slug . '.jpg';
    if (@getimagesize($src)) {
        echo '<div class="my-category-img">';
        echo '<img src="' . $src . '" alt="Category Image">';
        echo '</div>';
    }
?>
```
Thread Starter AZBros
(@azbros)

7 years, 10 months ago

I had decided to just go with the custom category pages, but I just tested this code and it works great! I don’t see any reason to keep the custom category pages, so I’m deleting them and adding this code to archive.php. Thank you very much!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Display Large Featured Image on Archive/Category Page?’ is closed to new replies.

Tags