WordPress.org

Ready to get started?Download WordPress

Forums

WordPress thumbnails that link to a a full post? (14 posts)

  1. pdblog
    Member
    Posted 4 years ago #

    Hi, I'm trying to create a page of thumbnails on my blog that will link back to each respective post. Is this possible? I've troubleshooted for hours on this. Is there an easy way to set this up?

    Thanks!

  2. @mercime
    Volunteer Moderator
    Posted 4 years ago #

  3. pdblog
    Member
    Posted 4 years ago #

    Thanks mercime for the quick reply. I have a few questions on your suggestion:
    -I tried previously enabling the feature by inserting the following code in my functions.php file, however it does not enable the option to select a thumbnail image for each post (could it be my theme??):
    add_theme_support( 'post-thumbnails' );
    -If we can troubleshoot through the above, the 'comments' section of the link you gave over suggests that this tutorial doesn't allow each image thumbnail to connect to it's original post (and an html page of just the image instead)

    THANK YOU for your help! Look forward to your reply.

  4. @mercime
    Volunteer Moderator
    Posted 4 years ago #

    "could it be my theme?"
    It might, since it's working with custom theme I made. Aside from adding code in functions.php file, did you add the necessary code to your home.php, index.php etc. template within the WordPress loop? What theme are you using?

  5. pdblog
    Member
    Posted 4 years ago #

    My theme is called Rhea (http://www.blogohblog.com/wordpress-theme-rhea-v10/). You can see the final modified blog I'm working on here: madebylex.com

    Where does this code go: set_post_thumbnail_size( 50, 50, true ); // 50 pixels wide by 50 pixels tall, hard crop mode

    What additional necessary code is required in the home.php, index.php, etc? maybe you could quickly explain the concept of a 'loop'....

    Thanks

  6. @mercime
    Volunteer Moderator
    Posted 4 years ago #

    Based on the original rhea theme downloaded from author's site:

    1. open up your theme's functions.php file with text editor (notepad, bbedit, etc) and add code so it looks like something like this:

    <?php
    if ( function_exists('register_sidebars') )
        register_sidebars(2);
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 50, 50, true );
    ?>

    change width and height above to taste. i.e. for a 100px x 100px thumbnail, it would be changed to ( 100, 100, true )

    Note: for more info about the WordPress Loop - http://codex.wordpress.org/The_Loop

    2. You don't have a home.php, so open up your theme's index.php. Look for <?php the_content('Read more &raquo;'); ?> and change it to:

    <span class="mythumb"><?php the_post_thumbnail(); ?></span>
    <?php the_excerpt('Read more &raquo;'); ?>

    3. Open up your theme's style.css and add this at the bottom:
    .mythumb { float: left; border: none; clear: left; margin: 0px 7px 7px 0px; }
    or style to taste.

    Those are the basics. Like Mark noted in his post, that works for new posts and you would have to use the regenerate thumbnails plugin for older posts.

  7. pdblog
    Member
    Posted 4 years ago #

    Thank you so much - I edited my functions, index and css styles files without problems and the 'Set Thumbnail' is now visible in the editing post section!

    The template on the main page has changed drastically though to show just the first paragraph and no images of each post? Do you know how I can change this back to the original display? http://www.madebylex.com/

    Thanks!

  8. pdblog
    Member
    Posted 4 years ago #

    The goal is ultimately create a page that has a thumbnail of all posts tagged as 'tutorials'. Each of these tutorial thumbnails would link out to their respective post when clicked.

  9. @mercime
    Volunteer Moderator
    Posted 4 years ago #

    First of all, you have to correct the bad markups of your customizations to the theme which has inadvertently added so many opening <html><body> tags as well as many closing </body></html> thereby rendering 157 markup validation errors.

    You need to clean these up first:
    - the only opening <html> <body> tags should only be found in your header.php file. Delete any opening body/html tags you added in other theme files.
    - the only closing </body> </html> tags should only be found in the footer.php file. Delete any closing body/html tags you added in other theme files.

    Secondly, you could not find any thumbnails because you did not add the code <span class="mythumb"><?php the_post_thumbnail(); ?></span> along with the the_excerpt tag like I mentioned. Otherwise the images would have appeared.

    Please correct the above mentioned before proceeding to thumbnail only link to posts.

  10. pdblog
    Member
    Posted 4 years ago #

    Hi, I've just searched every page and I can't find any erroneous <html> <body> or closing </html> </html> tags other than those in the header and footer. Where else are you seeing them?

    I attempted to revert back to my original code to fix the rendering issues that now display on the main page (only part of each post and no images) which is why you can't find the <span class="mythumb"><?php the_post_thumbnail(); ?></span> and excerpt tag. But they were there. The home page is still showing what appeared when I edited all code per your exact instructions for enabling the thumbnails. I can't seem to get it back (which might be a server issue?) to showing full posts and images.

    Thanks!

  11. pdblog
    Member
    Posted 4 years ago #

    I meant to say </html> </body> in the above

  12. pdblog
    Member
    Posted 4 years ago #

    I've put all coding for thumbnails (as per your directions) back, it should be correct now (at least it is when viewing through my ftp and wordpress).

    It it still rendering incorrectly on the home page... I'm not sure which part of the code has done that. I've tried deleting snippets to troubleshoot but to no avail.

    Thanks, mercime. I look forward to your suggestions {pulling out my hair on this end}.

  13. pdblog
    Member
    Posted 4 years ago #

    Hi mercime, I'm attempting to reload my client's old site with the hopes that the layout will render back to normal. I can't keep it up this long and it's a high traffic blog.

    I see what you mean on all of the head tags - they're all associated with widgets or rollover images and I'm guessing I can delete those from the widget code?

    My ultimate goal is to create a separate page that will have a gallery of thumbnails, with each thumbnail linking to it's respective post. Rather than have this gallery on the home page, I'd like it to be a separate page. Any thoughts?

    Thanks so much for your help. Back to square one?

  14. @mercime
    Volunteer Moderator
    Posted 4 years ago #

    pdblog - open the link you gave me and go Page > View Source - that's where you'd see the many opening and closing html and body tags. Per W3C markup validation the homepage shows 253 validation errors and I would say majority of the errors is because of ones I noted above.

    "I see what you mean on all of the head tags - they're all associated with widgets or rollover images and I'm guessing I can delete those from the widget code?"
    Yes. If you added the links via a text widget on respective sidebar, you would only need something like this for each image link:
    <a href="theURLofsite><img src="path2image" alt=""></a>
    and definitely no opening/closing html/body tag before/after each link.

    As for the post thumbnails. I suggest you create a Page Template named post-thumbnails.php e.g. by copying code of your index.php file and adding the following at the very top of the post-thumbnails.php

    <?php
    /*
    Template Name: FrontPage
    */
    ?>

    Create a new Page called "TestHome" and exclude it from navigation and Publish it. That way you experiment with the thumbnail codes without interrupting anything in actual home page. When the thumbnails are working in that template, then you transfer code in that template to your index.php and upload to server.

Topic Closed

This topic has been closed to new replies.

About this Topic