I am trying to use external image as featured image in wordpress. All is done correctly but there is just one problem. The actual external image show only when there is any featured image set via the WP admin. I don't want to set any featured image but still want the featured image from that external URL which is set via a custom field.
I hope you guys got it. Here is the code of my content.php and the external featured image is triggered by get_post_meta($post->ID, "external_featured", true);
<article <?php post_class('single-entry clearfix'); ?>>
<?php if( has_post_thumbnail() ) { ?>
<div class="single-entry-thumbnail view view-first">
<img src="<?php echo get_post_meta($post->ID, "external_featured", true); aq_resize( wp_get_attachment_url( get_post_thumbnail_id(), 'full' ), wpex_img( 'blog_entry_width' ), wpex_img( 'blog_entry_height' ), wpex_img( 'blog_entry_crop' ) ); ?>" alt="<?php echo the_title(); ?>" />
<div class="mask">
<h2><?php the_title(); ?></h2>
<p>
<?php
if( !empty($post->post_excerpt) ) {
the_excerpt();
} else {
echo wp_trim_words(get_the_content(), 20); }
?>
</p>
Download
</div>
</div><!-- /single-entry-thumbnail -->
<?php } ?>
</article><!-- /single-entry -->
Thank you :)
Try this:-
<article <?php post_class('single-entry clearfix'); ?>>
<div class="single-entry-thumbnail view view-first">
<?php $custom_featured_image_url = get_post_meta($post->ID, "external_featured", true); ?>
<img src="<?php echo $custom_featured_image_url; aq_resize( $custom_featured_image_url, wpex_img( 'blog_entry_width' ), wpex_img( 'blog_entry_height' ), wpex_img( 'blog_entry_crop' ) ); ?>" alt="<?php echo the_title(); ?>" />
<div class="mask">
<h2><?php the_title(); ?></h2>
<p>
<?php
if( !empty($post->post_excerpt) ) {
the_excerpt();
} else {
echo wp_trim_words(get_the_content(), 20); }
?>
</p>
Download
</div>
</div><!-- /single-entry-thumbnail -->
</article><!-- /single-entry -->
Related
I have been trying to show the posts of my website in a grid view in one of the category page. For doing so, i implemented the following code:
<div class="row-fluid">
<div class="span6 featured-block">
<?php while($block1Featured->have_posts()): $block1Featured->the_post(); ?>
<a class="featured_image" href="<?php the_permalink();?> "target="_blank">
<?php if ((function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) {
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id,'large');
$image_url = $image_url[0];
if(!#getimagesize($image_url)){
$image_url = "/wp-content/uploads/2014/02/logo2.jpg";
}
$blogurl = get_bloginfo('url');
$image_url = str_replace($blogurl, '', $image_url);
?>
<img src="<?php echo bloginfo('template_url'); ?>/thumb.php?src=<?php echo ($image_url); ?>&w=390&h=216&zc=1&q=100" alt="<?php echo the_title(); ?>" />
<?php }
else { ?>
<img src="<?php echo bloginfo('template_url'); ?>/thumb.php?src=<?php echo "http://www.nepaljapan.com/wp-content/uploads/2014/02/logo2.jpg"; ?>&w=390&h=216&zc=1&q=100" alt="<?php echo the_title(); ?>" />
<?php }?>
</a>
<a href="<?php the_permalink();?>" target="_blank">
<h2><?php the_title(); ?></h2></a>
<p><?php echo excerpt(37); ?>
<?php endwhile; ?>
</div>
</div>
But i am facing the problem with this code.
This gives out the error as
Fatal error: Call to a member function have_posts() on a non-object in /home/npjp/public_html/wp-content/themes/nepaljapan/content-category.php on line 15
The line 15 on my code is
<?php while($block1Featured->have_posts()): $block1Featured->the_post(); ?>
What is the problem? Am i actually doing it correct??
Much confused.
Please help me.
Thank you in advance
Your custom query has some problems. You can use this guid to write custom queries in wordpress:
<?php
$block1Featured= new WP_Query( 'category_name=staff+news' );
if ( $block1Featured->have_posts() ) : ?>
<!-- the loop -->
<?php while ( $block1Featured->have_posts() ) : $block1Featured->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php endwhile; ?>
<!-- end of the loop -->
<!-- pagination here -->
<?php wp_reset_postdata(); ?>
<?php else: ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
The image is set to return a URL in the Custom Fields Plugin however it is just coming up with img src Unknown, everything else works on the page except this... code is as follows: Thanks in advance for any help!
<?php get_header(); ?>
<?php
$args = array(
'post_type' => 'artists',
);
$query = new WP_Query( $args );
?>
<section class="row artists">
<?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col-sm-12 col-md-6 col-lg-3">
<a href="<?php if( get_post_field('artist_website') ) { ?>
<?php echo $artist_website; ?>
<?php } else { the_permalink(); } ?>">
<img src="<?php get_post_field('artist_feature_image'); ?>" alt="<?php echo the_title() ; ?>">
<p><?php echo the_title() ;?></p>
</a>
</div>
<?php endwhile; endif; wp_reset_postdata(); ?>
</section>
<?php get_footer(); ?>
The problem is that get_post_field('artist_feature_image') only return the image.
You need to display it with "echo"
<img src="<?php echo get_post_field('artist_feature_image'); ?>" />
And don't do echo the_title() ;, because the_title() is already doing an echo on get_the_title();
function the_title() {
echo get_the_title();
}
So if you want to display it you just have to do: the_title();
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 use a template that generates thumbnails on the content.php page like so:
<article <?php post_class('single-entry clearfix'); ?>>
<?php
// Test if post has a featured image
if( has_post_thumbnail() ) {
// Get resize and show featured image : refer to functions/img_defaults.php for default values
$wpex_entry_img = aq_resize( wp_get_attachment_url( get_post_thumbnail_id(), 'full' ), wpex_img( 'blog_entry_width' ), wpex_img( 'blog_entry_height' ), wpex_img( 'blog_entry_crop' ) );
?>
<div class="single-entry-thumbnail">
<img src="<?php echo $wpex_entry_img; ?>" alt="<?php echo the_title(); ?>" />
</div><!-- /single-entry-thumbnail -->
<?php } ?>
<div class="entry-text clearfix">
<header>
<h3><?php the_title(); ?></h3>
</header>
</div><!-- /entry-text -->
I am just starting with Wordpress and php and I want to add a parameter to this so only posts with category 'showcase' i.e. will show up. Anyone an idea?
You can use in_category() function to test that post belongs to it.
if ( in_category( 'showcase' ) ) {
...
}
in_category() docs - http://codex.wordpress.org/Function_Reference/in_category
I am trying to pull the first image from any new posts to my slider but having one hell of a time trying to get it to work right this is what I have so far
<div id="anicontainer">
<div id="aninav">
<ul>
<li id="featuredtab"> </li>
<li id="latesttab"> </li>
<li id="populartab"> </li>
</ul>
</div>
<!-- Sub Menus container. Do not remove -->
<div id="ani_inner">
<div id="featuredouter" class="innercontent">
<div id="featured" >
<ul class="ui-tabs-nav">
<?php
$ani_featured_slide = get_option('x12_featured_slide');
$my_query = new WP_Query("cat=".$ani_featured_slide."&showposts=5");
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<li class="ui-tabs-nav-item" id="nav-fragment-<?php the_ID(); ?>"><img src="<?php bloginfo('template_url'); ?>/thumb.php?src=<?php echo catch_that_image() ?>&w=50&h=44&zc=1&q=100" alt="" /></li>
<?php endwhile; ?>
</ul>
<?php $my_query = new WP_Query("cat=".$ani_featured_slide."&showposts=5");
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
<!-- Slide Content -->
<div id="fragment-<?php the_ID(); ?>" class="ui-tabs-panel" style="">
<img src="<?php bloginfo('template_url'); ?>/thumb.php?src=<?php echo catch_that_image() ?>&w=368&h=256&zc=1&q=100" alt="" />
<div class="info" >
<h2><?php the_title(); ?></h2>
<p><?php ani_content_limit(150, "Read More →"); ?></p>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
<div id="latest" class="innercontent">
<?php $recent = new WP_Query("showposts=6"); while($recent->have_posts()) : $recent->the_post();?>
<div class="latestpost">
<?php if( get_post_meta($post->ID, "postimage", true) ): ?>
<img src="<?php bloginfo('template_url'); ?>/thumb.php?src=<?php echo catch_that_image() ?>&w=70&h=70&zc=1&q=100" class="latestpostimage" alt="<?php the_title(); ?>" />
<?php else: ?>
<img class="latestpostimage" src="<?php bloginfo('template_url'); ?>/images/postimage.png" alt="<?php the_title(); ?>" /><?php endif; ?><h2><?php the_title(); ?></h2>
<div class="shortstory">
<?php ani_content_limit(55, "Read More →"); ?>
</div>
</div>
<?php endwhile; ?>
</div>
<div id="popular" class="innercontent">
<div id="populartags"><ul><li>
<?php wp_tag_cloud('smallest=9&largest=25&number=40'); ?>
</li>
</ul>
</div>
</div>
Any my function for grabbing the image is this
<?php function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = "/images/default.jpg";
}
return $first_img;
}
?>
Am new to php most of this was from google :(
If anyone can see a problem it would mean alot to me cheers
Have you considered using WordPress featured images? It would be much easier to set up for what you are trying to achieve...
In your theme's functions.php file:
add_theme_support( 'post-thumbnails' ); // add theme support
add_image_size( 'slide', 368, 256, true ); // add an image size
See http://codex.wordpress.org/Function_Reference/add_theme_support and http://codex.wordpress.org/Function_Reference/add_image_size for more info on these
Then you would have inside the loop something like:
<?php if(has_post_thumbnail()) {
the_post_thumbnail( 'slide' );
} else {
// no image found
} ?>
More info on this can be found here: http://codex.wordpress.org/Function_Reference/has_post_thumbnail and here: http://codex.wordpress.org/Function_Reference/the_post_thumbnail