I was hoping someone might be able to help with an issue I'm having...
I'm currently building a Wordpress site and I'm putting together the posts section. Everything seems ok, when using a featured image on a post, it displays nicely in a thumbnail here: http://5.10.105.45/~learningforsusta/index.php/education-for-sustainable-development/ and then nicely inside the single post here: http://5.10.105.45/~learningforsusta/index.php/efsc-post/example-post-1/
However, on a post which doesn't have a featured image specified, it seems to be displaying a default image...
My question is, how can I get rid of the default image, if there is no featured image, I would like it to not display anything...
Here's the code I'm using to pull it all through:
<div class="container">
<div class="row">
<div class="col-md-9">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="page-header">
<?php
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true );
$thumbnail_meta = get_post_meta( $thumbnail_id, '_wp_attachment_image_alt', true);
?>
<p class="featured-image"><img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php echo $thumbnail_meta; ?>"></p>
<p><em>
By <?php the_author(); ?>
on <?php echo the_time('l, F jS, Y');?>
in <?php the_category( ', ' ); ?>.
<?php comments_number(); ?>
</em></p>
</div>
<?php the_content(); ?>
<hr>
<?php comments_template(); ?>
<?php endwhile; else: ?>
<div class="page-header">
<h1>Oh no!</h1>
</div>
<p>No content is appearing for this page!</p>
<?php endif; ?>
</div>
<?php get_sidebar( 'blog' ); ?>
</div>
and here's the code from the functions.php file that relates to the thumbnails...
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size(150, 120, true);
I'm sure I'm missing something simple, but I've tried altering things and i just can't figure it out!
Any help would be greatly appreciated...
Thanks,
Shaun
Make sure that you don't have any function attached to post_thumbnail_html filter, take a look at your functions.php (the best option would be to search in a whole wp-content directory, apply *.php filter to reduce result set)
Make sure you don't have any third-party plugin which can do this behind the scenes, e.g. this one.
You can try by using has_post_thumbnail() function and display with the_post_thumbnail()
<?php if ( has_post_thumbnail()): // Check if thumbnail exists ?>
<p class="featured-image">
<?php the_post_thumbnail('post-thumbnails'); ?>
</p>
<?php endif; ?>
Just check for existence of featured image before outputting it:
<?php
if( has_post_thumbnail() ):
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true );
$thumbnail_meta = get_post_meta( $thumbnail_id, '_wp_attachment_image_alt', true);?>
<p class="featured-image"><img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php echo $thumbnail_meta; ?>"></p>
<?php endif;?>
Related
I'm attempting to add a background video to a wordpress website in place of the large image that is currently there.
I understand how to set up the video with HTML5 and CSS, but am not very familiar with php and am kind of lost on where to begin when it comes to writing a function to pull the video/s (wmp and mp4) from the media library and display them.
Any guidance on how to go about this would be much appreciated. Thanks!
I know that this is the part of the code that needs to be modified:
<div class="intro-block">
<?php if ( has_post_thumbnail() ):?>
<?php the_post_thumbnail('full'); ?>
<?php else: ?>
<?php
$image = get_field('global_intro_image', 'option');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" >
<?php endif; ?>
<?php endif; ?>
<div class="text-holder">
<div class="container">
<?php if( $title = get_field( 'title' )) : ?>
<h1><?php echo $title; ?></h1>
<?php endif; ?>
<?php if( $find_btn_link = get_field( 'find_btn_link' )) : ?>
<?php echo get_field( 'find_btn_text' ); ?>
<?php endif; ?>
</div>
</div>
</div>
It currently pulls the featured image for the page and displays it.
Any suggestions on where to begin?
Thanks in advance!
First you need to find out which part is calling the image. Looks like this part:
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" >
<?php endif; ?>
Then comment out this part or just remove this part of the code and replace if with video tag and style it so it looks just as you need.
Then if you need to be able to indicate videos from wordpress back end, than you need to create options page / or only add fields if you have theme options page.
https://codex.wordpress.org/Creating_Options_Pages
Even easier is to create options pages with ACF pro
On my static front page I have created, I query the Wordpress Loop to only show the two most recent blog posts. For some reason, it started displaying two instances of the attached image for each post. Here is what it looks like:
I have no idea why it is outputting two of the attached images for each.
Here is the code for this specific part of front-page.php:
<div class="row">
<?php $latest = new WP_Query('showposts=2'); ?>
<?php while( $latest->have_posts() ) : $latest->the_post(); ?>
<a href='<?php echo get_permalink(); ?>'>
<div class="col-md-6 blog-wrap">
<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' ); ?>
<div class="home-featured-img" style="background: url(<?php echo $src[0];?>);"></div>
<div class="excerpt-home">
<?php get_template_part( 'content', get_post_format() ); ?>
</div>
</div></a>
<?php endwhile; ?>
</div>
I have a feeling that the problem occurs when I call:
If you need any other code snippets from my custom theme, please let me know.
I only want for the post to display the image from this (which is the top picture):
<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' ); ?>
<div class="home-featured-img" style="background: url(<?php echo $src[0];?>);"></div>
Any and all suggestions are greatly appreciated.
you can remove any code like that
<?php
// Post thumbnail.
twentyfifteen_post_thumbnail();
?>
Explanation...
that file display the second image - the title - the meta
you need to edit it to remove the code that display the image :) thats it.
I am trying to show a small version of the featured image as a post thumbnail on my main page (index.php). For this I am implementing it as the background-image of a div. Unfortunately the code (which had been working before) has stopped working now and I cannot find a reason why. I have been looking everywhere for a solution, but I just cant figure it out.
I am using the following code but unfortunately it doesnt return anything:
<?php $post_image_id = get_post_thumbnail_id($post_to_use->ID);
if ($post_image_id) {
$thumbnail = wp_get_attachment_image_src( $post_image_id, 'post-thumbnail', false);
if ($thumbnail) (string)$thumbnail = $thumbnail[0];
} ?>
<?php if (has_post_thumbnail()) : ?>
<div class="post_image_crop" style="background: url('<?php echo $thumbnail; ?>')">
</div>
<?php endif; ?>
You can have a look at it here: oliverprenzel.com
The weird thing is, I have done exactly the same thing on my single.php where it still does work.
<?php $post_image_id = get_post_thumbnail_id($post_to_use->ID);
if ($post_image_id) {
$thumbnail = wp_get_attachment_image_src( $post_image_id, 'post-thumbnail', false);
if ($thumbnail) (string)$thumbnail = $thumbnail[0];
} ?>
<?php if (has_post_thumbnail()) : ?>
<div class="post_image_bg" style="background: url('<?php echo $thumbnail; ?>'); background-size: 100% !important;">
</div>
<?php endif; ?>
You can have a look at it working here: oliverprenzel.com/headmagazine/
Does anyone have an idea what might be causing this?
Edit for Claudiu:
This is the loop I am trying to get the image in:
<div class="wrapper">
<?php $post_image_id = get_post_thumbnail_id( $post_id );
if ($post_image_id) {
$thumbnail = wp_get_attachment_image_src( $post_image_id, 'post-thumbnail', false);
if ($thumbnail) (string)$thumbnail = $thumbnail[0];
} ?>
<!-- post loop prev -->
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>">
<div class="post_frame">
<div class="post_image_crop" style="background: url('<?php echo $thumbnail; ?>')">
</div>
<div class="prev_det">
<div class="prev_det_center">
<h1>
<?php the_title(); ?>
</h1>
<p><?php echo get_the_category_list(', '); ?></p>
</div>
</div>
<div class="prev_det_fold"></div>
</div>
</a>
<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>
</div>
If you want to get each posts thumbnail, then you need to move
<?php $post_image_id = get_post_thumbnail_id( $post_id );
if ($post_image_id) {
$thumbnail = wp_get_attachment_image_src( $post_image_id, 'post-thumbnail', false);
if ($thumbnail) (string)$thumbnail = $thumbnail[0];
} ?>
inside the loop and change it to:
<?php $post_image_id = get_post_thumbnail_id( get_the_ID() );
if ($post_image_id) {
$thumbnail = wp_get_attachment_image_src( $post_image_id, 'post-thumbnail', false);
if ($thumbnail) (string)$thumbnail = $thumbnail[0];
} ?>
My guess is that $post_image_id is returning null because you don't have a featured image for your home page and even if you had, the same image will be displayed for each post.
I have a strong suspicion that in your first line $post_to_use->ID returns null. When the argument in get_post_thumbnail_id() returns null then the current post id is used by default. This is why it is working in single.php, because there you have a post loaded.
On frontpage you don't. So you have to check which post id you want, manually enter it or do a loop.
Try replacing get_post_thumbnail_id($post_to_use->ID) with get_post_thumbnail_id(5) where 5 is the post id that you want.
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.
I am making a products page and I want to let the user to upload the image and show it according to the design (the thumbnail is placed at top, then the title and then the description) how can I place it outside the_content(); function
Here's my code:
<section class="products">
<?php query_posts( 'posts_per_page=8' ); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="products__item">
<div class="products__item--thumbnail">
</div>
<h2 class="products__item--title"><?php the_title(); ?></h2>
<p class="products__item--info"><?php the_content(); ?></p>
<h3 class="products__item--price">60.00</h3>
<span class="fa fa-search products__item-cart"></span>
test
</article>
<?php endwhile; else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
</section>
Regards!
if you are using featured image and need to display it, place the code bellow where you need the image ( this should be within the loop )
<?php the_post_thumbnail(); ?>
or if you need to get the featured image's link, and display it as a img tag, you can use this code to get the src link of featured image
<?php $image = get_the_post_thumbnail();
Hope this answer helped you any sort