WordPress.org

Ready to get started?Download WordPress

Forums

change location of post thumbnails (21 posts)

  1. bidays
    Member
    Posted 2 years ago #

    Hello to everyone,
    I just joined the community and regret not having it done earlier!

    i would like to change where the auto thumbnails are generated and change their size.
    Actually they appear next to the preview of the article , i would like to place them next to each title so that in the home page i have my recent articles with the thumbnails next to the title.
    I am using the theme built in page template options where i can set generate auto thumbnails.

    Thanks in advanced

  2. stvwlf
    Member
    Posted 2 years ago #

    Here is the Codex page on changing post thumbnail sizes
    http://codex.wordpress.org/Function_Reference/set_post_thumbnail_size

    and here is an article explaining how to use that
    http://wpmu.org/daily-tip-how-to-change-the-post-thumbnail-size-in-a-wordpress-theme/

    You have to change the location of the thumbnails by adjusting the page's CSS. You will have to post a URL if you want someone to help with that. The CSS required is specific to your site. First change the thumbnail sizes, then ask for help with the CSS.

  3. bidays
    Member
    Posted 2 years ago #

    Thanks for your answer,
    i followed your link and tried adding those few lines in functions.php
    as well as the code in the home.php and single.php
    But even though after doing that, the thumbnails are still the same.

    Here is my blog if it can help, http://www.naimedart.com
    Thanks

  4. bidays
    Member
    Posted 2 years ago #

    i would also like to add, it may help.

    my original theme was "aggregator" and i think it already has the function added but not sure how. All i know is that i activated auto thumbnails using the blog-page template and then under the template option i checked a box called generate auto thumbnails.

    Thanks

  5. stvwlf
    Member
    Posted 2 years ago #

    Hi

    Its hard to tell without seeing the theme's code but it looks like your current theme is not using post thumbnails and is making the post images appear in its own, non-standard way. If that is true the theme would need to be changed a bit to use the smaller thumbnails.

  6. bidays
    Member
    Posted 2 years ago #

    ok i see, thanks for your answer.
    I tried opening the page template file under the theme's folder: called page-blog.php
    i found a php scipt;

    <?php $thumb = '';
    					$width = 100;
    					$height = 100;
    					$classtext = '';
    					$titletext = get_the_title();
    
    $thumbnail = get_thumbnail($width,$height,$classtext,$titletext,$titletext);
    							$thumb = $thumbnail["thumb"]; ?>
    
    							<?php if ( $thumb <> '' && !$et_ptemplate_showthumb ) { ?>
    								<div class="et_pt_thumb alignleft">
    									<?php print_thumbnail($thumb, $thumbnail["use_timthumb"], $titletext, $width, $height, $classtext); ?>
    									<a href="<?php the_permalink(); ?>"><span class="overlay"></span></a>
    								</div> <!-- end .thumb -->
    							<?php }; ?>

    i changed the size on the beginning to 100x100 the problem is that only changes the picture, what about the box which holds the image?

  7. stvwlf
    Member
    Posted 2 years ago #

    Requires resizing an image and some CSS changes

    The background box that surrounds the image is this file
    images/blog-image-overlay.png
    its 199 x 199px - make it smaller - resize to exactly surround the new thumbnail size.

    In this file
    http://www.naimedart.com/ndblog/wp-content/themes/Aggregate/epanel/page_templates/page_templates.css

    on line 21 is this

    div.et_pt_thumb {
        height: 191px;
        margin: 0 20px 0 0;
        padding: 8px 0 0 8px;
        position: relative;
        width: 191px;
    }

    On line 22 is this

    div.et_pt_thumb span.overlay {
      background: url("images/blog-image-overlay.png") no-repeat scroll 0 0 transparent;
      display: block;
      height: 199px;
      left: 0;
      position: absolute;
      top: 0;
      width: 199px;
    }

    Change the height and width in both to match the new thumbnail image size, and the new height and width of the surrounding box

    Keep in mind when you change the theme's core files, when the theme upgrades the changes you make will be written over by the new theme version. Most themes have a way to customize the theme, either with a CSS panel in the theme options section, or by making a child theme and customizing it.

  8. bidays
    Member
    Posted 2 years ago #

    Thank you very much for your help,
    i have managed to change the size but i still have a little problem. The thumbnail doesn't seem to fit in the box anymore. or it doesn't position itself correctly in the center.
    Do i have to take count of the border? if yes in which setting?

  9. bidays
    Member
    Posted 2 years ago #

    i think this will help:

    its not in the panel setting because i disable all thumbs in the theme panel.
    i was thinking could it be the post thumbnail php file outside the themes folder who is generating them?

  10. stvwlf
    Member
    Posted 2 years ago #

    in the section that starts on line 21 in CSS adjust the padding
    padding: padding: 8px 0 0 8px;

    Start with this
    padding: padding: 5px 0 0 5px;
    and adjust until you are satisfied with the look

  11. bidays
    Member
    Posted 2 years ago #

    Thank you so much after a few adjustments i seem to have found the correct padding and sizes.

    Could i just bug you with one last question: actually my first question.
    How can i put those thumbnails next to the title.

    I guess it has to been modified in the css file.

  12. stvwlf
    Member
    Posted 2 years ago #

    Hi

    In that code from page-blog.php that you posted earlier. You need to move the location of the block of code you posted, that displays the thumbnail.

    In a normal WP theme the post content is displayed using the_content() or the_excerpt(). Most likely the thumbnail display code is now just before or after that. You need to move it so it displays just before the_title() which is what causes the post title to display. Most likely its going to need some CSS tweaks after you reposition it there.

  13. bidays
    Member
    Posted 2 years ago #

    that worked! and doesn't look that bad but a few switches will make it better.

    Thank you for help! :)

    RESOLVED

  14. stvwlf
    Member
    Posted 2 years ago #

    in this on line 21, change the first margin number to 7px as I have below, to vertically center the thumbnail with the title

    div.et_pt_thumb {
        height: 41px;
        margin: 7px 20px 0 0;
        padding: 0 0 0 0;
        position: relative;
        width: 40px;
    }
  15. bidays
    Member
    Posted 2 years ago #

    if i may ask you one last question... http://www.naimedart.com

    how do you think i could make it so the thumbnails are aligned to the title and not just in the same line

  16. bidays
    Member
    Posted 2 years ago #

    You answered me before i even asked. thanks :)

  17. bidays
    Member
    Posted 2 years ago #

    i've just changed it but doesn't seem to work.
    should i make it smaller?

  18. bidays
    Member
    Posted 2 years ago #

    Nevermind i did it!

    thanks again for everything.

  19. bidays
    Member
    Posted 2 years ago #

    Hi i am sorry to reopen this topic but i just noticed a problem.

    Everything works except that when you click on the article (Leftboy)
    http://www.naimedart.com/?p=138
    i get the post image on full size at the bottom of the page.

    I tried getting rid of the Article's cover image under the Article editor but when i do that it gets rid of the thumbnail AND title.
    SO that means that the auto thumbnail i have uses the cover image to generate a thumbnail.

    Any ideas on which file i just edit?
    thanks again

  20. stvwlf
    Member
    Posted 2 years ago #

    hi

    the normal WordPress template would be single.php
    Start by looking there. Your theme may use a specialty template though.

    If you can't find the correct file (if its not single.php) there is a plugin called Show Template that displays the name of the template file used on a page in the comments in the browser's View Source, at the bottom of the page. If you use this make sure to disable it when you have finished testing.

  21. bidays
    Member
    Posted 2 years ago #

    Hi my single.php file looks like this:

    <?php get_header(); ?>
    
    <div id="main-content" class="clearfix">
    	<div id="left-area">
    		<?php get_template_part('loop','single'); ?>
    	</div> <!-- end #left-area -->
    
    	<?php get_sidebar(); ?>
    		<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>
    <?php get_footer(); ?>

    i removed the_post_thumbnail and now it works :) thanks again... i must of added it while trying to do all this myself. Anyway thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic