Wordpress - post thumbnail in loop - php

So I'd like to add a thumbnail to my posts but I just can't get it to work.
<?php get_header(); ?>
<div id="main-content">
<?php get_sidebar(); ?>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('posts_per_page=3&paged=' . $paged);
?>
<?php if (have_posts()) : while ( have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<?php the_post_thumbnail();?>
<div class="entry">
<?php the_excerpt(); ?>
<a class="read-more" href="<?php the_permalink() ?>">Read More ...</a>
</div>
<?php include (TEMPLATEPATH . '/inc/meta.php' ); ?>
<div class="postmetadata">
<?php the_tags('Tags: ', ', ', '<br />'); ?>
Posted in <?php the_category(', ') ?> |
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
</div>
</div>
<?php endwhile; endif; ?>
<div class="navigation">
<div class="next-posts"><?php next_posts_link('« Older Posts') ?></div>
<div class="prev-posts"><?php previous_posts_link('Newer Posts »') ?></div>
</div>
</div>
<!-- end div main-content -->
<?php get_footer(); ?>
And in my functions.php I've added - add_theme_support('post-thumbnails');
It gives me the option to post the thumbnail when I make a post, but it doesn't show up.

What theme or parent theme are you using? I usually do something like this inside the loop:
<?php
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'custom-thumb', 180, 115, true ); //add a custom image size
}
echo get_the_post_thumbnail(get_the_ID(), 'custom-thumb', $attr); //echo the thumbnail with the new custom image size
?>

<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
Add the above code in loop
Then add the following code to functions.php
add_theme_support( 'post-thumbnails' );
Then at last, if you wish to link your thumbnail to post id, so your posts opens after clicking image, add the following code to functions.php
set_post_thumbnail_size( 50, 50 );
add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );
function my_post_image_html( $html, $post_id, $post_image_id ) {
$html = '' . $html . '';
return $html;
}
set_post_thumbnail_size( height, width); this is used to add height and width, in above example i added 50, 50. Change it with your required value

with the new wordpress versions you can setup thumbnails from settings > media . and give the personnal size to thumbnail Then use this to get the thumbnail with your prefered size
<?php the_post_thumbnail('thumbnail');?>

Related

Post Archive page - If else statement advanced custom fields

I am using Advanced Custom Fields and Facet WP.
Currently there is a directory listing showing on a page that shows a business preview by displaying a business title, image and an excerpt - the same as you typically see from a post archive page.
I have added a new ACF checkbox field 'Are you ready to publish' and would like to amend the php so the Title, excerpt an image will only show for user profile listings that have checked 'yes' to publish.
I am fairly new to php and ACF and cannot get it to work.
I have tried to variations:
<?php
global $post;
?>
<div class="business-directory-results">
<?php if( get_field('ready_to_publish') == 'yes' ) { ?>
<?php while ( have_posts() ): the_post(); ?>
<a class="business-directory-result box-shadow" href="/member-profile/<?php the_field('user_login');?>/">
<img src="<?php echo wp_get_attachment_image_src(get_post_meta( $post->ID, 'meta-business_featured_image', true ), "full")[0];?>" />
<div class="business-directory-result-content">
<h2><?php the_field('meta-business_name');?></h2>
<?php $excerpt = wp_trim_words( get_field('meta-business_profile_content' ), $num_words = 25, $more = '...' ); ?>
<p><?php echo $excerpt; ?></p>
</div>
</a>
<?php endwhile; ?>
<?php else { ?>
<!-- do nothing -->
<?php } ?>
</div>
and
<?php
global $post;
?>
<div class="business-directory-results">
<?php while ( have_posts() ): the_post(); ?>
<?php if( get_field('ready_to_publish') == 'yes' ) { ?>
<a class="business-directory-result box-shadow" href="/member-profile/<?php the_field('user_login');?>/">
<img src="<?php echo wp_get_attachment_image_src(get_post_meta( $post->ID, 'meta-business_featured_image', true ), "full")[0];?>" />
<div class="business-directory-result-content">
<h2><?php the_field('meta-business_name');?></h2>
<?php $excerpt = wp_trim_words( get_field('meta-business_profile_content' ), $num_words = 25, $more = '...' ); ?>
<p><?php echo $excerpt; ?></p>
</div>
</a>
<?php else { ?>
<!-- do nothing -->
<?php } ?>
<?php endwhile; ?>
</div>
If you create posts first and then add an additional ACF field, they will not work. To make it work, you will need to update all your posts after adding an ACF field. In your case, you will need update each user profile and only then they will have the ACF field attached with them.
Don't place the condition outside of the loop. That means your second variation is correct.
<?php
global $post;
?>
<div class="business-directory-results">
<?php while ( have_posts() ): the_post(); ?>
<?php if( get_field('ready_to_publish') == 'yes' ) { ?>
<a class="business-directory-result box-shadow" href="/member-profile/<?php the_field('user_login');?>/">
<img src="<?php echo wp_get_attachment_image_src(get_post_meta( $post->ID, 'meta-business_featured_image', true ), "full")[0];?>" />
<div class="business-directory-result-content">
<h2><?php the_field('meta-business_name');?></h2>
<?php $excerpt = wp_trim_words( get_field('meta-business_profile_content' ), $num_words = 25, $more = '...' ); ?>
<p><?php echo $excerpt; ?></p>
</div>
</a>
<?php else { ?>
<!-- do nothing -->
<?php } ?>
<?php endwhile; ?>
</div>

WordPress loop get post not page single

I am trying to get latest posts to display through a template page i am building for pages, the loop is not running the latest post only one page
ok, I have a simple loop that gets latest post
my loop
<?php
if (have_posts()) : while (have_posts()) : the_post();
get_template_part('content', get_post_format());
endwhile; endif;
?>
and content.php
<div class="blog-post">
<h2 class="blog-post-title">
<?php the_title(); ?>
</h2>
<p class="blog-post-meta">
<?php the_date(); ?>by <?php the_author(); ?>
<a href="<?php comments_link(); ?>">
<?php printf(_nx('One Comment', '%1$s Comments', get_comments_number(), 'comments title', 'textdomain'), number_format_i18n(get_comments_number())); ?>
</a>
</p>
<?php if ( has_post_thumbnail() ) {?>
<div class="row">
<div class="col-md-4">
<?php the_post_thumbnail('thumbnail'); ?>
</div>
<div class="col-md-6">
<?php the_excerpt(); ?>
</div>
</div>
<?php } else { ?>
<?php the_excerpt(); ?>
<?php } ?>
</div>
when i run the loop in index.php i get my latest blog post, perfect.
however, i am building a template page, i try and include the loop in this page, i just get one page (not all posts).
my template
<div class="row">
<div class="col-sm-12">
// content bar
<?php get_template_part('advicecentre_bar', get_post_format()) ?>
// cmd driven content
<?php
if (have_posts()) : while (have_posts()) : the_post();
get_template_part('content_page', get_post_format());
endwhile; endif;
?>
// recent post
<?php
if (have_posts()) : while (have_posts()) : the_post();
get_template_part('content', get_post_format());
endwhile; endif;
?>
</div> <!-- /.col -->
</div> <!-- /.row -->
<?php get_footer(); ?>
If you are using multiple loops on the same page, you must use rewind_posts() like so:
<div class="row">
<div class="col-sm-12">
// content bar
<?php get_template_part('advicecentre_bar', get_post_format()); ?>
// cmd driven content
<?php
if (have_posts()) : while (have_posts()) : the_post();
get_template_part('content_page', get_post_format());
endwhile; endif;
?>
<?php rewind_posts(); ?>
// recent post
<?php
if (have_posts()) : while (have_posts()) : the_post();
get_template_part('content', get_post_format());
endwhile; endif;
?>
</div> <!-- /.col -->
</div> <!-- /.row -->
<?php get_footer(); ?>
This "resets" the loop to it's original state and allows you to look through the posts again. In your original code you scan through all the posts, and then in your second loop scan through nothing, as you have already scanned through all the posts!
Hmm I have found this solution using a for each rather than the while loop seems to work, but im not sure if its the best way around.
<ul>
<?php
$recent_posts = wp_get_recent_posts();
foreach( $recent_posts as $recent ){
echo '<li>' . $recent["post_title"].' </li> ';
}
wp_reset_query();
?>
</ul>
UPDATE
<?php
$args = array('numberposts' => 5);
$recent_posts = wp_get_recent_posts($args);
foreach ($recent_posts as $recent) {
$excerpt = wp_trim_excerpt($recent['post_content']);
$permalink = get_permalink($recent["ID"]);
$title = esc_attr($recent["post_title"]);
$thumbnail = get_the_post_thumbnail($recent["ID"], 'thumbnail');
echo '<li><a href="' . $permalink . '" title="Look ' . $title . '" >' . $thumbnail . $title . '</a></li>';
echo $excerpt;
}
?>

Making post-thumbnail a background image

My Wordpress site displays all the posts, stacked in articles spanning the full width on the index.php using rows (Bootstrap 3).
index.php - HTML
<div>
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
get_template_part( 'content' );
?>
<?php endwhile; ?>
<div class="clearfix"></div>
<div class="col-md-12">
</div>
<?php else : ?>
<?php get_template_part( 'no-results', 'index' ); ?>
<?php endif; ?>
</div>
content.php displays the post in each article (which are stacked on top of each other, full width, down the page)
<article id="post-<?php the_ID(); ?>" <?php post_class('container-fluid'); ?>>
<div class="row">
<div class="col-md-12 horiz-cell">
<h2><?php the_title(); ?></h2>
<?php the_category(', '); ?>
</div>
</div>
</article><!-- /#post -->
I have the title and category showing up properly in each row. I would like each post's post-thumbnail (I added its use in functions.php) to be the background image of each row. Filling the whole space (background-size: cover)
Basically large, '100% width' & '300px(roughly) height' rows, each with corresponding title, category, and their post-thumbnail as a background-image.
If not done yet, enable thumbnails and define custom image sizes:
// Enable thumbnails
add_theme_support( 'post-thumbnails' );
add_image_size('my-fun-size',580, 480, true);
To display the thumbnails:
First, get the featured image URL for the post:
The parameter 'my-fun-size' should be the name of the size of the image you defined in your functions.php file - it can also be 'full' or 'thumbnail'
<?php
if (has_post_thumbnail()) {
$thumbnail_data = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'my-fun-size' );
$thumbnail_url = $thumbnail_data[0];
}
?>
Then add the image as a background:
<article id="post-<?php the_ID(); ?>" style="background-image:url('<?php echo $thumbnail_url ?>')" <?php post_class('container-fluid'); ?> >
<div class="row">
<div class="col-md-12 horiz-cell">
<h2><?php the_title(); ?></h2>
<?php the_category(', '); ?>
</div>
</div>
</article><!-- /#post -->
And finally, apply some CSS to achieve your desired background-size:
article {
background-size: cover;
}
It sounds like you've already figured out the CSS part, so here's the PHP/HTML you're looking for:
<article id="post-<?php the_ID(); ?>" <?php post_class('container-fluid'); ?>>
<?php $imgurl = wp_get_attachment_src( get_post_thumbnail_id($post->ID) ); ?>
<div class="row" style="background-image: url('<?php echo $imgurl[0]; ?>');">
<div class="col-md-12 horiz-cell">
<h2><?php the_title(); ?></h2>
<?php the_category(', '); ?>
</div>
</div>
</article><!-- /#post -->
References:
http://codex.wordpress.org/Function_Reference/get_post_thumbnail_id
http://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src

Targeting specific Wordpress posts in a loop

I am trying to target individual posts so I can change the css (title tags, padding, etc) of specific posts. My Wordpress site currently generates the posts in a loop.
index.php code (brings in content.php which has 'post' code)
<div>
<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
get_template_part( 'content' );
?>
<?php endwhile; ?>
<div class="clearfix"></div>
<div class="col-md-12">
</div>
<?php else : ?>
<?php get_template_part( 'no-results', 'index' ); ?>
<?php endif; ?>
</div>
content.php code (gets post-title, category, and sets post-thumbnail to background-image)
<?php
if (has_post_thumbnail()) {
$thumbnail_data = wp_get_attachment_image_src(get_post_thumbnail_id( get_the_ID()), 'my-fun-size' );
$thumbnail_url = $thumbnail_data[0];
}
?>
<article id="post-<?php the_ID(); ?>" style="background-image:url('<? php echo $thumbnail_url ?>')" <?php post_class('container-fluid'); ?> >
<div class="row">
<div class="col-md-12">
<h2><?php the_title(); ?></h2>
<?php the_category(', '); ?>
</div>
</div>
</article><!-- /#post -->
functions.php (setting image size)
add_theme_support( 'post-thumbnails' );
add_image_size('my-fun-size', 'thumbnail');
The output is 'rows' 100% width with the title, category and background-image (feature-image). Stacked on top of each other. I want to be able to target the text and bg-image of different posts to make them each look different.
i think the best way to to this is by adding a custom field inside your posts, then, in your templates, you call that custom field this way:
get_post_meta($post->ID, 'name_of_your_custom_field', true);
this must be inside the loop.

How to don't show post having a specified tag in my homepage?

I am pretty new in WordPress development and I am trying to implement this custom theme that handle the so called featured posts: http://lnx.asper-eritrea.com/
As you can see in the posts area of the homepage I have the Articoli in evidenza sub area that contains my featured posts and under it the Ultimi Articoli subarea that contains the latest posts.
To implment this I use the posts tag and in the futured posts area I show the posts having the tag=featured condition.
So this is my code:
<section id="blog-posts">
<header class="header-sezione">
<h2>Articoli in evidenza</h2>
</header>
<?php query_posts('tag=featured');?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="featured-posts">
<h1><?php the_title(); ?></h1>
<div class="meta">
Scritto da <span class="author"><?php the_author_link(); ?></span> // <?php the_category(', ') ?> // <?php comments_popup_link('Nessun Commento', '1 Commento ', '% Commenti'); ?>
</div>
<div class="featured-details"><?php the_excerpt()?>
<?php $featured_img = get_post_meta($post->ID, 'featured_img', $single = true); ?>
<img src="<?php echo $featured_img ?>" alt="<?php the_title(); ?>" />
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<header class="header-sezione">
<h2>Ultimi Articoli</h2>
</header>
<?php
if (have_posts()) :
// Start the Loop.
while (have_posts()) : the_post();
/*
* Include the post format-specific template for the content. If you want to
* use this in a child theme, then include a file called called content-___.php
* (where ___ is the post format) and that will be used instead.
*/
get_template_part('content', get_post_format());
endwhile;
else :
// If no content, include the "No posts found" template.
get_template_part('content', 'none');
endif;
?>
</section>
As you can see first I show the posts having a tag featured by the use of query-posts() function:
<?php query_posts('tag=featured');?>
Now my problem is that if a post have the featured tag I don't want that it is shown in the latest post area (at this time it is shown). So I tried to use this code:
<header class="header-sezione">
<h2>Ultimi Articoli NOT FEATURED</h2>
</header>
<?php query_posts('tag != featured');?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="featured-posts">
<h1><?php the_title(); ?></h1>
<div class="meta">
Scritto da <span class="author"><?php the_author_link(); ?></span> // <?php the_category(', ') ?> // <?php comments_popup_link('Nessun Commento', '1 Commento ', '% Commenti'); ?>
</div>
<div class="featured-details"><?php the_excerpt()?>
<?php $featured_img = get_post_meta($post->ID, 'featured_img', $single = true); ?>
<img src="<?php echo $featured_img ?>" alt="<?php the_title(); ?>" />
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
But don't work and the featured post still shown in the homepage. As you can se I tried so specify that, to be shown, a post can't have the featured tag:
<?php query_posts('tag != featured');?>
Why don't work? What am I missing? Can you help me to fix this issue?
Tnx
To return posts that do not contain a particular tag, you should use pass the ID of the term into the tag__not_in argument.
// get the term using the slug and the tag taxonomy
$term = get_term_by( 'slug', 'featured', 'post_tag' );
// pass the term_id to tag__not_in
query_posts( array( 'tag__not_in' => array ( $term->term_id ) );
is_front_page()
You should try <?php is_front_page(); ?> or vice versa.
http://codex.wordpress.org/Function_Reference/is_front_page
<?php if (is_front_page()) { ?>
<!-- Do something -->
<?php } else { ?>
<!-- Add else only if you need it! -->
<?php } ?>

Categories