WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] How do I align excerpt images on homepage?

[Resolved] How do I align excerpt images on homepage?

  • I’ve managed to create excerpts for my hompepage that include thimbnail images, however they appear above the text instead of to the right, where I want it. I’ve gone over multiple articles and threads on the issue, but cannot for the life of me get it to work.

    I am currently adding the code pasted below to the style.css file of my child theme, but am probably doing it completely wrong. Help?

    .attachment-custom_thumb {
    float: right;
    margin-right: 0px;
    class: “alignright”
    }

Viewing 15 replies - 1 through 15 (of 46 total)
  • I’m by no means an expert on this stuff, but I was just looking for the same thing and ended up finding it for my website under the page.php (Page Template) code.

    I found where it said getthumbnail and changed ‘float:left” to ‘float:right’ and that worked. style="float:right;border: 1px solid #005587;margin: 5px;padding: 2px;background-color: #faf5ef;" />

    Thanks, but I dont have a reference to thumbnails in page.php.

    I should probably mention that Im using the twentyten theme. Are you perhaps using the same thing?

    WPyogi

    @wpyogi

    Forum Moderator

    There may be other problems, but your CSS is invalid:

    .attachment-custom_thumb {
    float: right;
    margin-right: 0px;
    class: "alignright"
    }

    the last line – remove it.

    the alignright class is a default CSS class – it floats elements to the right already.

    If you post a link to the page where the images are, I can look at what’s going on.

    Removed, thanks.

    I’ve switched to my test child theme so you can take a look. As you can see the thumbnail images are displayed above the text, while I would like it to be displayed to the right of it:

    http://wordsandmusic.me/

    WPyogi

    @wpyogi

    Forum Moderator

    Sorry, only just now saw this – you were super close 🙂 — try this:

    .attachment-custom_thumb {
       float: right;
       margin: 0 0 10px 10px;
    }

    Great. Just to be perfectly sure, where exactly should I be pasting this in the css file (it should be there, right?)

    WPyogi

    @wpyogi

    Forum Moderator

    Yep, just in the CSS file – bottom is good. Make sure you have removed the other invalid bit.

    I must still be doing something wrong, as im not seeing any change.

    Since im getting this code from a different source than the code for the excerpts, perhaps custom_thumb is not the universal term I expect it to be.

    How can i verify that it is calling the correct function? For the excerpts, im using the information on this page:

    http://wpshed.com/wordpress-how-to-add-post-thumbnails-next-to-post-excerpt/

    WPyogi

    @wpyogi

    Forum Moderator

    Why do you now have a copy of the entire parent style.css file in the child theme? That’s not a valid child theme? Can you go back to what you have so we can see what the problem is? CSS is very fussy – if you have one tiny syntax error it can cause any subsequent CSS code to be ignored and not work.

    The code itself seems to be working fine…if the text and images are showing up, it’s obviously working.

    I actually read somewhere that using the import command will increase load time, and there is no real drawback to copying the entire css. Would love to hear other opinions.

    I’m not sure what you mean by go back to what i have. I am currently using a test child theme to make changes, and when they work i copy the new code into the current theme. What I have up there now is my most updated working code.

    WPyogi

    @wpyogi

    Forum Moderator

    Actually having duplicate CSS code increases load and makes it much harder to keep track of what you have changed.

    I thought you earlier had a valid child theme with the @import line and only your changes.

    Hmmmm… I dont even remember anymore. It may have been that the import function simply didnt work.

    Using the same logic i used to solve a different issue, i suspect the code i have to alter is in this section, in my loop.php file:

    <?php
    $images = get_children( array( ‘post_parent’ => $post->ID, ‘post_type’ => ‘attachment’, ‘post_mime_type’ => ‘image’, ‘orderby’ => ‘menu_order’, ‘order’ => ‘ASC’, ‘numberposts’ => 999 ) );
    if ( $images ) :
    $total_images = count( $images );
    $image = array_shift( $images );
    $image_img_tag = wp_get_attachment_image( $image->ID, ‘thumbnail’ );
    ?>
    <div class=”gallery-thumb”>
    “><?php echo $image_img_tag; ?>
    </div><!– .gallery-thumb –>
    <p><?php printf( _n( ‘This gallery contains %2$s photo.’, ‘This gallery contains %2$s photos.’, $total_images, ‘twentyten’ ),
    ‘href=”‘ . get_permalink() . ‘” title=”‘ . esc_attr( sprintf( __( ‘Permalink to %s’, ‘twentyten’ ), the_title_attribute( ‘echo=0’ ) ) ) . ‘” rel=”bookmark”‘,
    number_format_i18n( $total_images )
    ); ?>
    </p>
    <?php endif; ?>

    Does that make any sense? Do you know what needs to be added to align the thumbnail images?

    WPyogi

    @wpyogi

    Forum Moderator

    Sorry, I’m getting a bit confused here. Can you post a link to the page where you want the images to be aligned and where you have a child theme so I can see what is going on with the CSS code.

    Sorry 🙂

    I am currently using a child theme on the site (www.wordsandmusic.me).

    The homepage is where i would like to align the images.

Viewing 15 replies - 1 through 15 (of 46 total)
  • The topic ‘[Resolved] How do I align excerpt images on homepage?’ is closed to new replies.
Skip to toolbar