WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] how do i put thumbnails on the index page posts? (12 posts)

  1. HustleTurtle
    Member
    Posted 3 years ago #

    how do i put thumbnails on the index page posts?

    using pixel theme?

    http://wordpress.org/extend/themes/pixel

    this is the theme
    http://wordpress.org/extend/themes/pixel

    i want to know how to put thumbnails on a post on the home page

    for example the post on the index page have a small paragraph then a "read more" link

    i want to put a small thumbnail how do i do that on that theme?

    please be specific, cause im kind of newbie thanks

    i also want to know how to edit the thumbnail size.

    i want the thumbnail to appear next to each post i make.. my post have 3 images each, big images... i want the code to take a thumbnail of the image.

    i have check plugins but none work for me, also i dont understand the code....anyone help me how to implement it on this theme.

    i put you the index php here:

    <?php get_header(); ?>

    <div id="main">

    <div id="contentwrapper">

    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>

    <?php if (function_exists('wp_list_comments')): ?>
    <div <?php post_class(topPost); ?>>

    <?php else : ?>
    <div class="topPost">
    <?php endif; ?>

    <h2 class="topTitle">"><?php the_title(); ?></h2>
    <p class="topMeta">by <?php the_author_posts_link(); ?> on <?php the_time('M.d, Y') ?>, under <?php the_category(', '); ?></p>
    <div class="topContent"><?php the_content('(continue reading...)'); ?></div>
    <span class="topComments"><?php comments_popup_link('Leave a Comment', '1 Comment', '% Comments'); ?></span>
    <span class="topTags"><?php the_tags(':', ', ', ''); ?></span>
    <span class="topMore">">more...</span>
    <div class="cleared"></div>
    </div> <!-- Closes topPost -->

    <?php endwhile; ?>

    <?php else : ?>

    <div class="topPost">
    <h2 class="topTitle">">Not Found</h2>
    <div class="topContent"><p>Sorry, but you are looking for something that isn't here. You can search again by using this form...</p></div>
    </div> <!-- Closes topPost -->

    <?php endif; ?>

    <div id="nextprevious">
    <div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
    <div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
    <div class="cleared"></div>
    </div>
    </div> <!-- Closes contentwrapper-->

    <?php get_sidebar(); ?>
    <div class="cleared"></div>

    </div><!-- Closes Main -->

    <?php get_footer(); ?>

    --------------------------------------------------------------

    and the functions php if needed...

    <?php
    if ( function_exists('register_sidebar') )
    register_sidebar(array(
    'name'=>'sidebar_full',
    'before_widget' => '<li id="%1$s" class="sidebaritem %2$s"><div class="sidebarbox">',
    'after_widget' => '</div>',
    'before_title' => '<h2 class="widgettitle">',
    'after_title' => '</h2>',
    ));
    register_sidebar(array(
    'name'=>'sidebar_left',
    'before_widget' => '<li id="%1$s" class="sidebaritem %2$s"><div class="sidebarbox">',
    'after_widget' => '</div>',
    'before_title' => '<h2 class="widgettitle">',
    'after_title' => '</h2>',
    ));
    register_sidebar(array(
    'name'=>'sidebar_right',
    'before_widget' => '<li id="%1$s" class="sidebaritem %2$s"><div class="sidebarbox">',
    'after_widget' => '</div>',
    'before_title' => '<h2 class="widgettitle">',
    'after_title' => '</h2>',
    ));
    register_sidebar(array(
    'name'=>'footer_left',
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h3>',
    'after_title' => '</h3>',
    ));
    register_sidebar(array(
    'name'=>'footer_middle',
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h3>',
    'after_title' => '</h3>',
    ));
    register_sidebar(array(
    'name'=>'footer_right',
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h3>',
    'after_title' => '</h3>',
    ));

    add_action('admin_menu', 'add_welcome_interface');

    function add_welcome_interface() {
    add_theme_page('welcome', 'Theme Options', '8', 'functions', 'editoptions');
    }

    function editoptions() {
    ?>
    <div class='wrap'>
    <h2>Theme Options</h2>
    <form method="post" action="options.php">
    <?php wp_nonce_field('update-options') ?>
    <p>Greeting Heading:</p>
    <p><input type="text" name="greeting" value="<?php echo get_option('greeting'); ?>" /></p>
    <p>Welcome Message:</p>
    <p><textarea name="welcomemessage" cols="100%" rows="10"><?php echo get_option('welcomemessage'); ?></textarea></p>
    <p>Please enter the name of your FeedBurner feed below: (What's the name of your feed? Well, for instance, in the following - http://feeds.feedburner.com/NAME - NAME would be your feed :))</p>
    <p><input type="text" name="feedname" value="<?php echo get_option('feedname'); ?>" /></p>
    <p><input type="submit" name="Submit" value="Update Options" /></p>
    <input type="hidden" name="action" value="update" />
    <input type="hidden" name="page_options" value="feedname,greeting,welcomemessage" />
    </form>
    </div>
    <?php
    }

    function mytheme_comment($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment; ?>
    <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
    <div id="comment-<?php comment_ID(); ?>">

    <?php echo get_avatar($comment,$size='60'); ?>

    <div class="commentbody">
    <cite><?php comment_author_link() ?></cite>
    <?php if ($comment->comment_approved == '0') : ?>
    Your comment is awaiting moderation.
    <?php endif; ?>

    <small class="commentmetadata">" title=""><?php comment_date('F jS, Y') ?> on <?php comment_time() ?> <?php edit_comment_link('edit',' ',''); ?></small>

    <?php comment_text() ?>
    </div><div class="cleared"></div>

    <div class="reply">
    <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
    </div>
    </div>
    <?php
    }

    function mytheme_ping($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment; ?>
    <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
    <div id="comment-<?php comment_ID(); ?>">
    <div class="commentbody">
    <cite><?php comment_author_link() ?></cite>
    <?php if ($comment->comment_approved == '0') : ?>
    Your comment is awaiting moderation.
    <?php endif; ?>

    <small class="commentmetadata">" title=""><?php comment_date('F jS, Y') ?> on <?php comment_time() ?> <?php edit_comment_link('edit',' ',''); ?></small>

    <?php comment_text() ?>
    </div>
    </div>
    <?php
    }

    ?>

    please tell me where in the code i need to edit, because if i change a letter on functions php , all my site goes down, its frustrated.

    i have read about the so called "featured image" but i dont see that button nowhere on the admin panel.

    also there is no "loop.php" on the theme.

    thanks in advance.

  2. vtxyzzy
    Member
    Posted 3 years ago #

    This may not be exactly what you want, but it should get you started.

    Add this function to your functions.php:

    <?php # Displays post image attachment (sizes: thumbnail, medium, full)
    function dp_attachment_image($postid=0, $size='thumbnail', $attributes='',$echo=1,
             $beforeimg='',$afterimg='',$numberposts=1) {
       if ($postid<1) $postid = get_the_ID();
       if ($images = get_children(array(
          'post_parent' => $postid,
          'post_type' => 'attachment',
          'numberposts' => $numberposts,
          'post_mime_type' => 'image',)))
          foreach($images as $image) {
             $img = $beforeimg;
             $attachment=wp_get_attachment_image_src($image->ID, $size);
             $img .= "<img src='{$attachment[0]}' $attributes />";
             $img .= $afterimg;
             if ($echo) {
               echo $img;
             } else {
               return $img;
             }
          }
    }?>

    Change the topContent div in index.php to call the function, like this:

    <div class="topContent"><?php
        dp_attachment_image($post->ID,'thumbnail','width="120px"',
           1,'<div class="post-thumbnail">','</div>',-1);
        the_content('(continue reading...)'); ?>
    </div>

    Add styling for post-thumbnail to style.css:

    .post-thumbnail { float: left; margin: 5px; }

  3. HustleTurtle
    Member
    Posted 3 years ago #

    thanks

    doesnt work still

    i did all that and i get 6 thumbnails and the text is bellow the thumbnail, i want the thumbnail alignet left and the text on the right of the thumbnail.

    the 6 thumbnails appear cause on that post i get 3 big images.

    but it was close, just something is missing.

    also i want the thumbnail to be clickable and link the the post url.

  4. vtxyzzy
    Member
    Posted 3 years ago #

    If you only want one thumbnail, change the last parameter in the funcion call:

    <div class="topContent"><?php
        dp_attachment_image($post->ID,'thumbnail','width="120px"',
           1,'<div class="post-thumbnail">','</div>', 1);
        the_content('(continue reading...)'); ?>
    </div>

    If you don't want the large images, don't insert them into the post - just use attachments as described here in the Codex.

  5. HustleTurtle
    Member
    Posted 3 years ago #

    ok i did that and now i cannot login to the site anymore :(

    i get an error when i try to login wp admin:

    Warning: Cannot modify header information - headers already sent by (output started at /home/server/html/mydomain.com/wp-content/themes/pixel/functions.php:124) in /home/server/html/mydomain.com/wp-login.php on line 337

    many of those error lines

    please help

  6. HustleTurtle
    Member
    Posted 3 years ago #

    this is the error

    Warning: Cannot modify header information - headers already sent by (output started at /home/sites/public_html/mydomain.com/wp-content/themes/pixel/functions.php:124) in /home/sites/public_html/mydomain.com/wp-login.php on line 337

    Warning: Cannot modify header information - headers already sent by (output started at /home/sites/public_html/mydomain.com/wp-content/themes/pixel/functions.php:124) in /home/sites/public_html/mydomain.com/wp-login.php on line 349

    Warning: Cannot modify header information - headers already sent by (output started at /home/sites/public_html/mydomain.com/wp-content/themes/pixel/functions.php:124) in /home/sites/public_html/mydomain.com/wp-includes/pluggable.php on line 690

    Warning: Cannot modify header information - headers already sent by (output started at /home/sites/public_html/mydomain.com/wp-content/themes/pixel/functions.php:124) in /home/sites/public_html/mydomain.com/wp-includes/pluggable.php on line 691

    Warning: Cannot modify header information - headers already sent by (output started at /home/sites/public_html/mydomain.com/wp-content/themes/pixel/functions.php:124) in /home/sites/public_html/mydomain.com/wp-includes/pluggable.php on line 692

    Warning: Cannot modify header information - headers already sent by (output started at /home/sites/public_html/mydomain.com/wp-content/themes/pixel/functions.php:124) in /home/sites/public_html/mydomain.com/wp-includes/pluggable.php on line 890

  7. HustleTurtle
    Member
    Posted 3 years ago #

    where exactly do i put the code on the functions.php and index.php??

    im a bit newbie sorry..

    here is the functions.php

    please tell me exactly where do i put it

    <?php
    if ( function_exists('register_sidebar') )
    register_sidebar(array(
    'name'=>'sidebar_full',
    'before_widget' => '<li id="%1$s" class="sidebaritem %2$s"><div class="sidebarbox">',
    'after_widget' => '</div>',
    'before_title' => '<h2 class="widgettitle">',
    'after_title' => '</h2>',
    ));
    register_sidebar(array(
    'name'=>'sidebar_left',
    'before_widget' => '<li id="%1$s" class="sidebaritem %2$s"><div class="sidebarbox">',
    'after_widget' => '</div>',
    'before_title' => '<h2 class="widgettitle">',
    'after_title' => '</h2>',
    ));
    register_sidebar(array(
    'name'=>'sidebar_right',
    'before_widget' => '<li id="%1$s" class="sidebaritem %2$s"><div class="sidebarbox">',
    'after_widget' => '</div>',
    'before_title' => '<h2 class="widgettitle">',
    'after_title' => '</h2>',
    ));
    register_sidebar(array(
    'name'=>'footer_left',
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h3>',
    'after_title' => '</h3>',
    ));
    register_sidebar(array(
    'name'=>'footer_middle',
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h3>',
    'after_title' => '</h3>',
    ));
    register_sidebar(array(
    'name'=>'footer_right',
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h3>',
    'after_title' => '</h3>',
    ));

    add_action('admin_menu', 'add_welcome_interface');

    function add_welcome_interface() {
    add_theme_page('welcome', 'Theme Options', '8', 'functions', 'editoptions');
    }

    function editoptions() {
    ?>
    <div class='wrap'>
    <h2>Theme Options</h2>
    <form method="post" action="options.php">
    <?php wp_nonce_field('update-options') ?>
    <p>Greeting Heading:</p>
    <p><input type="text" name="greeting" value="<?php echo get_option('greeting'); ?>" /></p>
    <p>Welcome Message:</p>
    <p><textarea name="welcomemessage" cols="100%" rows="10"><?php echo get_option('welcomemessage'); ?></textarea></p>
    <p>Please enter the name of your FeedBurner feed below: (What's the name of your feed? Well, for instance, in the following - http://feeds.feedburner.com/NAME - NAME would be your feed :))</p>
    <p><input type="text" name="feedname" value="<?php echo get_option('feedname'); ?>" /></p>
    <p><input type="submit" name="Submit" value="Update Options" /></p>
    <input type="hidden" name="action" value="update" />
    <input type="hidden" name="page_options" value="feedname,greeting,welcomemessage" />
    </form>
    </div>
    <?php
    }

    function mytheme_comment($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment; ?>
    <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
    <div id="comment-<?php comment_ID(); ?>">

    <?php echo get_avatar($comment,$size='60'); ?>

    <div class="commentbody">
    <cite><?php comment_author_link() ?></cite>
    <?php if ($comment->comment_approved == '0') : ?>
    Your comment is awaiting moderation.
    <?php endif; ?>

    <small class="commentmetadata">" title=""><?php comment_date('F jS, Y') ?> on <?php comment_time() ?> <?php edit_comment_link('edit','  ',''); ?></small>

    <?php comment_text() ?>
    </div><div class="cleared"></div>

    <div class="reply">
    <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
    </div>
    </div>
    <?php
    }

    function mytheme_ping($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment; ?>
    <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
    <div id="comment-<?php comment_ID(); ?>">
    <div class="commentbody">
    <cite><?php comment_author_link() ?></cite>
    <?php if ($comment->comment_approved == '0') : ?>
    Your comment is awaiting moderation.
    <?php endif; ?>

    <small class="commentmetadata">" title=""><?php comment_date('F jS, Y') ?> on <?php comment_time() ?> <?php edit_comment_link('edit','  ',''); ?></small>

    <?php comment_text() ?>
    </div>
    </div>
    <?php
    }

    ?>

  8. vtxyzzy
    Member
    Posted 3 years ago #

    You add the code to the end of functions.php, but you must be careful not to leave any blank lines between the old code and the code you add, or after the code you add.

    The error message about the header is probably due to a blank line in functions.php at line 124.

  9. HustleTurtle
    Member
    Posted 3 years ago #

    thanks vtxyzzy

    it worked perfectly now

    im happy :)

    i want to know how do you make the thumbnail to be clickable and link to the post itself?

    what do i need to change on the code and where?

  10. vtxyzzy
    Member
    Posted 3 years ago #

    I have not tested this, so back up your files before you make the changes:

    <?php # Displays post image attachment (sizes: thumbnail, medium, full)
    function dp_attachment_image($postid=0, $size='thumbnail', $attributes='',$echo=1,
             $beforeimg='',$afterimg='',$numberposts=1) {
       if ($postid<1) $postid = get_the_ID();
       if ($images = get_children(array(
          'post_parent' => $postid,
          'post_type' => 'attachment',
          'numberposts' => $numberposts,
          'post_mime_type' => 'image',)))
          $link = get_permalink($postid);
          foreach($images as $image) {
             $img = $beforeimg;
             $img .= "<a href='$link'>";
             $attachment=wp_get_attachment_image_src($image->ID, $size);
             $img .= "<img src='{$attachment[0]}' $attributes /></a>";
             $img .= $afterimg;
             if ($echo) {
               echo $img;
             } else {
               return $img;
             }
          }
    }?>
  11. HustleTurtle
    Member
    Posted 3 years ago #

    it works thanks very much!

  12. vtxyzzy
    Member
    Posted 3 years ago #

    You are welcome!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags