How to get an Image URL to use in a WordPress Bootstrap Template?

1 Views

This pastie has both the functions.php and home.php code for review. For reference, my goal is to make the image follow the same rules found in this jsfiddle.

My goal with the function is to pull the first image from a post and put it above the summary on my blog’s homepage. I’ve been able to pull the image from the post, but it isn’t following the responsive class I used in line 60. Is it that I am pulling the image itself and not the URL? How can I adjust my function to make this work? Outside of database connections and form validation, I am a complete php beginner.

Please see jsfiddle and pastie for code
Post Views: 1

Related posts

Leave a Reply

1 comment

  1. Use Post_Thumbnails instead.

    In your functions.php add the following:

    add_theme_support( 'post-thumbnails' );

    This will enable the Featured Image meta box in the sidebar of your posts and pages. You will need to set this for posts. Instead of adding an image to your post’s content, you can set your desired image as the featured image.

    Update your home.php to the following:

    <?php get_header(); ?>

    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">Blog</h1>
            <ol class="breadcrumb">
                <li><a href="###">Home</a>
                </li>
                <li class="active">Blog</li>
            </ol>
        </div>
    </div>

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <div class="row">
            <div class="col-md-1 text-center">
                <p><?php the_time('l, F jS, Y'); ?></p>
            </div>
            <?php if ( has_post_thumbnail() ) : ?>
                <div class="col-md-5">
                    <a href="<?php the_permalink(); ?>">
                        <?php the_post_thumbnail( 'large', array( 'class' => 'img-responsive img-hover' ) ); ?>
                    </a>
                </div>
            <?php endif; ?>
            <div class="col-md-6">
                <h3>
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </h3>
                <p>by <?php the_author_posts_link(); ?>
                </p>
                <p><?php the_excerpt(); ?></p>
                <a class="btn btn-primary" href="<?php the_permalink(); ?>">Read More <i class="fa fa-angle-right"></i></a>
            </div>
        </div>
    <hr>
    <?php endwhile; ?> 
    <div class="navigation"><p><?php posts_nav_link('','&laquo; Newer Posts','Older Posts &raquo;'); ?></p></div>
    <?php else: ?>
      <p><?php _e('Sorry, there are no posts.'); ?></p>
    <?php endif; ?>

  </div>


<?php get_footer(); ?>

    has_post_thumbnail() checks to see if the current $post has a featured image set.

    the_post_thumbnail() outputs the image tag. This functions takes a size as it’s first parameter. We are setting this to large as it should satisfy your layout.

    The second parameter is an array of attributes. We are able to add additional classes to the image using this parameter.