phpwordpresssearchthumbnails

Make an image fit to a specific sized area in Wordpress

I have a search page here:

http://www.journeyfilm.com/?s=screening

That shows a post with a featured image. The problem is that the image is not the same proportions as the area in which it is supposed to fit. As you can see, this makes it so the image appears to be very small. I would like it to either just pull the thumbnail or to fit the width and hide any extra height via css. It seems like it should be pulling the thumbnail and if there is no thumbnail then it shows a default image.

Here is my content.php html

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <header class="entry-header">

        <?php if ( 'post' == get_post_type() || 'video' == get_post_type()) : ?>
                    <a href="<?php the_permalink(); ?>" rel="bookmark">

                    <?php
                        if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
                            the_post_thumbnail( array(300, 165) );
                        } else {
                        ?>
                        <img src="<?php echo esc_url( home_url( '/' ) ); ?>/wp-content/uploads/2014/10/ftr-image-journeyfilm.png" title="Journey Film Logo" alt="Journey Film Logo"/>
                        <?php } ?>
                        <h1 class="entry-title-search"><?php the_title(); ?></h1>
                        <div class="entry-meta-search">
                        <?php undiscovered_posted_on(); ?>
                    </div>
                </a>

        <?php elseif ( 'page' == get_post_type() ) : ?>
                <a href="<?php the_permalink(); ?>" rel="bookmark">
                <h1 class="entry-title-search"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
                    <?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
                        the_post_thumbnail( array(300, 165) );
                    } else {
                    ?>
                        <img src="<?php echo esc_url( home_url( '/' ) ); ?>/wp-content/uploads/2014/10/ftr-image-journeyfilm.png" title="Journey Film Logo" alt="Journey Film Logo"/>
                    <?php } ?>
                    <div class="entry-meta-search">
                        <span class="posted-on">Standard Page</span>
                    </div>
                </a>
        <?php endif; ?>
</header>
</article>

And my Search.php HTML:

<?php get_header(); ?>


    <section id="primary" class="content-area search "><!--.w-sidebar-->
        <main id="main" class="site-main" role="main">
        <h1 class="search-title">Search Results: <?php echo the_search_query()?></h1>
        <?php

            if(isset($_GET['post_type'])) {
                $type = $_GET['post_type'];
                $args = array( 'post_type' => $type );
                $args = array_merge( $args, $wp_query->query );
            query_posts( $args );    
            }
        ?>
        <?php if ( have_posts() ) : ?>
            <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( 'content', 'search' ); ?>
            <?php endwhile; ?>

            <div class="clear"><div><?php undiscovered_paging_nav(); ?>
        <?php else : ?>
            <?php get_template_part( 'content', 'none' ); ?>
        <?php endif; ?>

        </main>
    </section><!-- .primary -search.php -->
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

CSS:

a img {
    border: 0 none;
}
img {
    height: auto;
    max-width: 100%;
}

img {
    vertical-align: middle;
}

Any suggestions would be greatly appreciated. Thank you!

Solution

  • Yo,

    it depend on what you espect... if you just want to pull the picture then

    Then, if the picture is too big (in height) then wrap it..

    a{
  display: inline-block;
  max-width: 200px;  
}
.picture{
  overflow: hidden;
  height: 100px;
  width: 100%;
  position: relative;
}
.picture img{
  transform: translate(0, -50%);
  width: 100%;
  height: auto;
}
    <header class="entry-header">

  <a href="http://www.journeyfilm.com/the-long-haul-screenings-at-the-trail-running-film-festival/" rel="bookmark">
    <div class="picture">
      <img width="110" height="165" src="http://www.journeyfilm.com/wp-content/uploads/2015/03/The-Long-Haul-Poster-TRFF-Label-200x300.jpg" class="attachment-300x165 wp-post-image" alt="-The Long Haul Poster-TRFF Label">
    </div>
    <h1 class="entry-title-search">The Long Haul Screenings at The Trail Running Film Festival</h1>
    <div class="entry-meta-search">
      <span class="posted-on">
        <time class="entry-date published" datetime="2015-03-05T17:42:14+00:00">March 5, 2015</time>
        <time class="updated" datetime="2015-03-05T17:50:05+00:00">March 5, 2015</time>
      </span>
    </div>
  </a>

</header>

    and usually, we use a figure for this: http://www.alsacreations.com/article/lire/1337-html5-elements-figure-et-figcaption.html