Support » Theme: Canard » Featured Image Effect in Category pages

  • Resolved wemba32

    (@wemba32)



    I am using the Canard theme on my site here: http://freetime.mikeconnelly.net

    The category pages lack the visual punch of the home page and individual posts. I would like to have a featured image and name of the category in each category page header, similar to individual posts.

    Since we are only talking about a limited number of category pages, it doesn’t need to use the Canard theme’s actual featured image function. I just want the category pages to look the same as posts above the Loop.

    So far I have created a child theme and eliminated the “Category: ” prefix. I am still analyzing the Canard theme code to see what fragments I need to place in a category.php file to replicate the image and text effect in the header section for the modified category template.

    Separately, assuming that I am just linking to static images for the category header, how do I invoke the WordPress CDN to minimize bandwidth demand? For individual posts, this occurs automatically.

    If anyone knows the code better than me, I would appreciate their assistance!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Chad

    (@shireling)

    The challenge with this is that Featured Images are a core WordPress feature that is supported on posts and pages, but not on categories. Unless you add one yourself, there isn’t a place to assign an image for a category.

    That means we need to add the image ourselves – then set up the category template to display it the same way it would on a single post or page.

    First, in your child theme, set up a category.php file (if you don’t already have one).

    Copy the parent theme’s archive.php into your child theme folder, and rename it to category.php.

    Now, first step will be to remove the page title. Right now it’s in the page’s content wrapper, but we want it moved up a bit.

    Remove the following:

    				<header class="page-header">
    					<?php
    						the_archive_title( '<h1 class="page-title">', '</h1>' );
    						the_archive_description( '<div class="taxonomy-description">', '</div>' );
    					?>
    				</header><!-- .page-header -->
    

    Now, we need to add the page title back in, wrapped in the structure the theme uses for featured images – but instead of looking for a featured image, we’ll give it a function of our own, instead.

    In your category.php file, just above the site-content-inner element, add this block of code:

    	<header class="entry-header entry-hero">
    		<div class="post-thumbnail">
    			<img src=" <?php my_cat_images(); ?>"/>
    		</div>
    		<div class="entry-header-wrapper">
    			<div class="entry-header-inner">
    				<?php
    				the_archive_title( '<h1 class="page-title">', '</h1>' );
    				the_archive_description( '<div class="taxonomy-description">', '</div>' );
    				?>
    			</div>
    		</div>
    	</header><!-- .page-header -->
    

    That recreates the featured image structure. If you look through it, you’ll see a reference to my_cat_images();

    That’s a function we’ll add that you can use to define your images. Use this as a base in your child theme’s functions.php file:

    function my_cat_images() {
    	if ( is_category( 'THEME-SLUG-1' ) ) {
    		$cat_img = 'IMAGE-URL-1';
    	} elseif ( is_category( 'THEME-SLUG-2' ) ) {
    		$cat_img = 'IMAGE-URL-2';
    			}
    	else {
    		$cat_img = 'IMAGE-URL-DEFAULT';
    	}
    
    	echo $cat_img;
    }

    Now, you’ll want to replace the category slugs and image URLs. You can add more elseif blocks as needed. The final URL is the fallback – what to use if a category you haven’t specified is used.

    Last but not least, a bit of CSS to style the titles:

    .entry-hero .page-title {
        text-shadow: 0 0 0.125em rgba(0, 0, 0, 0.7);
        color: #fff;
    }

    That should do the trick, let me know how it goes.

    Oh, and the CDN you mentioned. Jetpack’s Photon? If so these images won’t be supplied through the CDN. Photon is only able to grab specific images (more info on the Jetpack support doc:
    https://jetpack.com/support/photon/

    Thanks Chad. These area great suggestions.

    I have been working with your code but can’t seem to get the image to appear above both the content area and sidebar. Instead it appears within the content area. So, I have copied as much of the code from the single.php as possible to see if that made a difference, but even that doesn’t move the image above both columns.

    Re Photon, I will try loading the images within an article and then copy the URL from there since I don’t think WordPress deletes images from the CDN.

    • This reply was modified 1 year, 6 months ago by  wemba32.
    Chad

    (@shireling)

    Instead it appears within the content area.

    Hard to say without seeing it directly, but it sounds like the code in category.php might be inside the .site-content-inner element, and not before it.

    If that’s not it, you can drop your category.php code into a pastebin and I’ll check it out.

    Thanks Chad.

    Placing your code in category.php above the .site-content-inner section solved my issues.

    I added a category header above the name of the category.

    Separately, I created a gallery page and loaded all header images into Photon that way. Then, I used those URLs in your header section.

    I really appreciate all your guidance!

    Chad

    (@shireling)

    Cool! I’m glad it’s working!

    Feel free to mark this as Resolved over in the sidebar when you’re ready 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Featured Image Effect in Category pages’ is closed to new replies.