i use this code to set the image in related post.
I would, if there isn't a featured image in post, to hidden the thumbnail.
my code is :
<div class="item">
<figure class="entry-image">
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'rectangle-size-small' );
} elseif( first_post_image() ) { // Set the first image from the editor
echo '<img src="' . first_post_image() . '" class="wp-post-image" />';
} ?>
</a>
</figure>
<header class="entry-header">
<h4>
<?php the_title(); ?>
</h4>
</header>
</div>
How i replace in line the_post_thumbnail( 'rectangle-size-small' );
to hidden the thumbnail ?
thanks
The has_post_thumbnail() function checks if there is a featured image or not, therefore if there is no featured image provided, it will not be displayed.
Related
Please check the screenshot, let me know how to fix this issue...And you can see there's no image alt data in HTML.
Another thing is that if I use PHP in img src so I can't set width & height like (300 x 300). The output is a full-size image and if I use a static URL in img it works fine, how to deal with that?
<nav id="nav-single">
<?php
$prev_post = get_previous_post();
$id = $prev_post->ID ;
$permalink = get_permalink( $id );
$thumbnail = get_the_post_thumbnail( $id );
$image_alt = get_post_meta($thumbnail, '_wp_attachment_image_alt', true);
?>
<div class="pexel-previous-post-data">
<div class="pexel-previous-post-img">
<a href="<?php echo $permalink; ?>">
<img src="<?php echo $thumbnail; ?>" alt="<?php echo $image_alt; ?>" width="300" height="300">
</a>
</div>
<div class="pexel-previous-post-Text">
<span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">←</span> Previous', 'twentyeleven' ) ); ?>
<h5 class="pxl_head--h5"><?php echo $prev_post->post_title; ?> </h5>
</span>
</div>
</div>
</nav>
Use get_the_post_thumbnail_url() to get post image url as get_the_post_thumbnail() returns html with img tag. get_the_post_thumbnail_url() will return only image url.
$thumbnail = get_the_post_thumbnail_url( $id );
So I have the below code that loops through my posts and displays posts in a list format. Here is the code that I'm using:
<?php while (have_posts()) : the_post(); ?>
<div class="one-sixth first"><?php the_post_thumbnail(); ?></div>
<div class="five-sixths"><?php the_title(); ?></div>
<?php endwhile; ?>
Here is the image with the thumbnail:
Here is when no post thumbnail is available, it just leaves an empty space:
If check thumbnail if have displayed otherwise display placeholder image. Hope this help you.
<?php
// Must be inside a loop.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
else {
echo '<img src="' . get_bloginfo( 'stylesheet_directory' )
. '/images/placeholder.jpg" />';
}
?>
This is the code by which I am trying to get featured image url to set as BG. It's working fine for page.php. But in Woocommerce Shop (post-type-archive-product) page it is showing one of product featured image instead of page featured image.
Any solution??
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<header style="background-image: url('<?php echo $thumb['0']; ?>')" class="inner-page-header">
<div class="wrap">
<div class="page_header">
<?php the_title(); ?>
</div>
</div>
</header>
You can use wc_get_page_id() to get the page ID and use that to get the image source. This should work.
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id( wc_get_page_id( 'shop' ) ), 'full' );?>
<header style="background-image: url('<?php echo $thumb['0']; ?>')" class="inner-page-header">
<div class="wrap">
<div class="page_header">
<?php the_title(); ?>
</div>
</div>
</header>
Here is the documentation
I have a problem trying to get the thumbnail URL of each post on the archive page.
I used the basic technics but it always return the url of the first featured image of the page.
Here the part of the code of my template-parts/post/content/content.php
The goal of this is to open the featured image of each post on a lightbox.
Here the link to the page : http://leos-sipek.thomasdesnoyers.com/category/divers-types-dune-ideographie-stochastique/peinture-sur-papier/metaplasme/
If you click on the second post it shows the featured image of the first post.
<div class="post-thumbnail">
<a rel="lightbox" data-gall="gall-frame" data-lightbox-type="inline" href="#inline-content">
<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
</a>
</div>
<!-- Lightbox -->
<div id="inline-content" style="display:none;">
<?php if (has_post_thumbnail( $post->ID )) : ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<div class="img-single" style="background-image: url('<?php echo $image[0]; ?>')"></div>
</div>
Thanks
Actually I was pointing the same url for each lightbox so it opened the same each time.
I change the Href of each lightbox by the ID of each post and it works.
<div class="post-thumbnail">
<a rel="lightbox" data-gall="gall-frame" data-lightbox-type="inline" href="#<?php the_ID(); ?>">
<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
</a>
</div>
<!-- Lightbox -->
<div id="<?php the_ID(); ?>" style="display:none;">
<?php if (has_post_thumbnail( $post->ID )) : ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); endif ?>
<div class="img-single" style="background-image: url('<?php echo $image[0]; ?>')"></div>
</div>
Thanks everyone for your help
In your code you displaying only first element from $image array, try to change this line:
<div class="img-single" style="background-image: url('<?php echo $image[0]; ?>')"></div>
via this code to run through all array elements:
<?php foreach ($image as $image_link) : ?>
<div class="img-single" style="background-image: url('<?php echo $image_link; ?>')"></div>
<?php endforeach; ?>
Why not use the_post_thumbnail_url() ?
<div class="post-thumbnail">
<a rel="lightbox" data-gall="gall-frame" data-lightbox-type="inline" href="#inline-content">
<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
</a>
</div>
<!-- Lightbox -->
<div id="inline-content" style="display:none;">
<?php if (has_post_thumbnail( $post->ID )) : ?>
<div class="img-single" style="background-image: url('<?php echo get_the_post_thumbnail_url($post->ID, 'single-post-thumbnail'); ?>')"></div>
</div>
However if you are only using one lightbox for all posts in a loop, you will need to set something like a data-url="<?php echo get_the_post_thumbnail_url($post->ID, 'single-post-thumbnail'); ?>" in the lightbox link. Then you can use JS to swap that URL in for the background image on click. Something like:
<script>
(function($) {
$('a[rel="lightbox"]').on('click', function(e) {
var imgSrc = $(this).data('url');
$('#inline-content').css('background-image', imgSrc);
});
})(jQuery);
</script>
I have an Html page in which There is a slider. here's the html code
<div data-thumb="images/slide1.jpg" data-src="images/slide1.jpg">
</div>
<div data-thumb="images/slide2.jpg" data-src="images/slide2.jpg">
</div>
<div data-thumb="images/slide3.jpg" data-src="images/slide3.jpg">
</div>
I am trying to convert this page into wordpress. Here's how I am doing this in wordpress to load the images.
<?php
$options = array(
'post_type' => "slideshow",
);
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div data-thumb="<?php if ( has_post_thumbnail() ) { the_post_thumbnail('full'); } ?>" data-src="<?php if ( has_post_thumbnail() ) { the_post_thumbnail('full'); } ?>">
</div>
<?php endwhile; ?>
But It is not working.My pictures are not showing in the slider. But When I check the page source It is correctly getting the image.
here's the source that generates
<div data-thumb="<img width="1170" height="385" src="http://localhost/wordpress/wp-content/uploads/2014/09/slide1.jpg" class="attachment-full wp-post-image" alt="slide1" />"
data-src="<img width="1170" height="385" src="http://localhost/wordpress/wp- content/uploads/2014/09/slide1.jpg" class="attachment-full wp-post-image" alt="slide1" />">
</div>
Change this:
In the first line of your "while" loop insert this:
if ( has_post_thumbnail() ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( the_ID()));
}
// else {
// you should see what to do if the post hasn't got a thumbnail
//
And then replace this:
<div data-thumb="<?php if ( has_post_thumbnail() ) { the_post_thumbnail('full'); } ?>"
for this:
<div data-thumb="<?php echo $image[0];?>"
Same thing in your second "if".
it's not the prettiest code, but it should work.
Calling the_post_thumbnail() prints the whole <img> tag, and you need only the URL to populate the DATA-SRC and DATA-THUMB attributes of your existing IMGs.
So you get the post thumbnail ID with get_post_thumbnail_id(), and get the image url with wp_get_attachment_src().
Hope it helps.