WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How do I align excerpt images on homepage? (47 posts)

  1. Distiple
    Member
    Posted 1 year ago #

    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"
    }

  2. AlpineButtercup
    Member
    Posted 1 year ago #

    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;" />

  3. Distiple
    Member
    Posted 1 year ago #

    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?

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  5. Distiple
    Member
    Posted 1 year ago #

    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/

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Sorry, only just now saw this - you were super close :) -- try this:

    .attachment-custom_thumb {
       float: right;
       margin: 0 0 10px 10px;
    }
  7. Distiple
    Member
    Posted 1 year ago #

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

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  9. Distiple
    Member
    Posted 1 year ago #

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

  10. Distiple
    Member
    Posted 1 year ago #

    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/

  11. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  12. Distiple
    Member
    Posted 1 year ago #

    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.

  13. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  14. Distiple
    Member
    Posted 1 year ago #

    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?

  15. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  16. Distiple
    Member
    Posted 1 year ago #

    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.

  17. Distiple
    Member
    Posted 1 year ago #

  18. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Ah, okay, well we're just having a semantics difference - I'm not going to argue about it - I would use a standard child theme but you can do it however works best for you :). (Fair warning though, that you'll likely get repeatedly questioned about it if you ask for CSS help here! )

    So the code I posted above should work fine - put it at the end of the style.css file that you have in the child theme:

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

    Then clear any caches in your site or browser.

  19. Distiple
    Member
    Posted 1 year ago #

    Im sorry, I didnt mean to argue. I dont believe i know enough to even have an opinion :)

    I tried your suggestion again, but no luck. Other changes are showing up, so i dont believe this is a caching issue.

    This is a problem im having with various solutions im finding, and ive posted about it here: http://wordpress.org/support/topic/which-code-is-right-for-me?replies=5

  20. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    I'd guess that your caching is the problem - no code is showing up in the stylesheet. I'd suggest deactivating that plugin while you are working on the site.

    <!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/
    
    Page Caching using disk: basic
    Object Caching 2400/2641 objects using disk: basic
    
     Served from: wordsandmusic.me @ 2013-04-06 05:19:16 by W3 Total Cache -->
  21. Distiple
    Member
    Posted 1 year ago #

    I am using developer mode in the plugin, and am testing things on a test child theme. I've now updated the current child theme to include the new code so you can take a look.

  22. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Caching can be weird...

    I didn't mean you were arguing - that was a poor choice of words - sorry - and I TOTALLY understand how frustrating this can be when it seems like things just are not working and we can't figure out why right away. No worries :).

  23. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Okay, not caching - And here's the problems:

    http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwordsandmusic.me%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

    You have two CSS syntax errors in the stylesheet - find the extra bracket right after this:

    /* =Content -------------------------------------------------------------- */ }

    and then you need a bracket right above the new styles - so that the new style is not inside the print styles...it should look like this:

    .home .sticky {
    		border: none;
    	}
    }
            .attachment-custom_thumb {
             float: right;
             margin: 0 0 10px 10px;
             }

    these kinds of things are one big reason why copying all the styles makes it harder - I had to comb through a bunch of code to find them...

  24. Distiple
    Member
    Posted 1 year ago #

    im pretty sure i found both errors and fixed them, but still no joy.

    I havent made any changes to the css id like to keep, so i also copied the css file from the parent theme and simply added the code, but for some reason kept getting errors.

  25. Distiple
    Member
    Posted 1 year ago #

    and thanks for the effort. i now remembered why i didnt use the import command - i had no idea how to add any css changes in the correct way, and thought it would simply be easier to use the entire code.

  26. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    I see the same errors so something did not update...

  27. Distiple
    Member
    Posted 1 year ago #

    working on the test theme :) I cant update my current code since i replaced the css with the parent themes css and cant seem to add the code without getting an error. This error points to my loop.php file, but replacing the css file is what fixes it.

  28. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    What is the error? CSS isn't really related to a PHP file in that way.

  29. Distiple
    Member
    Posted 1 year ago #

    Pretty sure it was because i was stupidly not updating the name variables.

    Things are now getting a bit weirder. I created a new css with the import command as you suggested, and surprise! images are aligned. However, when i copied this file to my current theme (instead of my test theme where it worked) images were not aligned. Even it is the same file in a folder in the same directory.

    No idea!

  30. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You may have other errors - try the validator...http://jigsaw.w3.org/css-validator/

Topic Closed

This topic has been closed to new replies.

About this Topic