Twenty Twelve
Unable to make feature image float left on categoty page (4 posts)

  1. brookslively
    Posted 2 years ago #

    I am trying to make a child theme for Twenty Twelve with a custom category page that looks something like this: http://laurenconrad.com/blog/cat/primp. Specifically, I would like to have the feature image to the left and the post title and excerpt to the right. I've tried scouring the internet for solutions but I just keep ending up with the text above or below the feature image. Below is my current attempt that is not working

    I've tried creating a div class with this in the style.css:

    .featuredImage {
    	float: left;

    In my functions.php, I have created a new thumbnail size for the category pages:

    if ( function_exists( 'add_theme_support' ) ) {
    	add_theme_support( 'post-thumbnails' );
            set_post_thumbnail_size( 624, 9999 ); // default Post Thumbnail dimensions
    if ( function_exists( 'add_image_size' ) ) {
    	add_image_size( 'category-thumb', 300, 9999 ); //300 pixels wide (and unlimited height)

    Then in my content.php, I have the following:

    <?php if ( is_search() || is_archive() || is_author() || is_tag() ) : // Only display Excerpts  ?>
    			<div class="featuredImage">
    				<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('category-thumb'); ?></a>
    			<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <?php the_excerpt(); ?>

    I'm very inexperienced at this, so I could easily be missing something simple. I believe I've searched and tried many of the methods that I've found with no avail, but if there's a link to a solution that would also be much appreciated. Thank you for any help in advance.

  2. paulwpxp
    Font hero
    Posted 2 years ago #

    Give them both a div with width in percentage assigned.

    <article class="myarticle">
    	<div class="myimg"></div>
    	<div class="mytext"></div>
    .myimg { width: 27%; float: left; }
    .mytext { width: 70%; float: right; }
    .myarticle { overflow: hidden; /*clear float*/ }
    .myimg img { width: 100%; height: auto; /*responsive*/ }

    Also, be noted that Twentytwelve is mobile first, and it has IE style too, any changes made need to be done accordingly.

    The if exists checks for standard WP functions are not necessary unless you are woring on a very old WP installation, and that shouldn't be the case.

    The add image size of 300px could also be avoided, we could set that to one of the standard sizes (probably the medium) in Media setting and call the thumbnail of that size. This is to save WP from resizing too many images (save compute cycles and save space in the server).

    The is_archive() already includes author and tag

  3. brookslively
    Posted 2 years ago #

    Thank you so much! Giving them their own div classes worked. I have a question for you though: Why should I use the <article></article>? when I use it, it gives me a funny gap between posts with two line breaks. It looks fine without. I'm just wondering if it is better to use something like that and if we can improve how it works if I should be using it.

    Also, thank you for your advice with the other parts of my code. I will absolutely look into your suggestions improving my code. I'm mostly going off of wordpress's examples, so if there are better methods I very much appreciate it.

    Thanks again!

  4. paulwpxp
    Font hero
    Posted 2 years ago #

    Regarding how things look, there is no different in using div tag or article tag. The extra space when using <article> might be from theme's own style.

    First, inspect the element to see whether it's from margin or padding or both, and then nullify or change that values in our own version (child theme CSS).

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic