To show recent items from a Wordpress category in a widget I'm using this code...
<ul>
<?php $recent = new WP_Query("cat=1231&showposts=5"); while($recent->have_posts()) :
$recent->the_post();?>
<li><a href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?>
</a></li>
<?php endwhile; ?>
</ul>
...but how can I make this query also display the first image in each post, and is there any way to set a 'default' image in case there is no image?
Is there also a way to use thumbnails here, rather than loading the full size image and using HTML to resize?
This is probably what you are looking for, found here
function get_first_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;
}
Related
I would like to use alt attribute tags with image on the main site.
I use code that calls for pictures on my index page from latest wordpress posts. I use this code for index.php:
<img src="<?php echo catch_that_image() ?>" width="250" alt="">
The code in the functions.php file for catch that image is:
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;
}
What I want to achieve is to get the alt tag from that post, not only the image. Actually some kind of "catch that alt". The new code in index.php would be
<img src="<?php echo catch_that_image() ?>" width="250" alt="text from wordpress post">
How can can I add anything to functions.php to get that alt text together?
The purpose is that google often search for images and doesn't find alt tags on the main site but only on individual wordpress posts.
you can add the following code in your functions.php to enable that.
function add_img_title($attr, $attachment = null) {
$img_title = trim(strip_tags($attachment->post_title));
$attr['alt'] = $img_title;
$attr['title'] = $img_title;
return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'add_img_title', 10, 2);
I'm using the information here http://ieg.wnet.org/2016/02/replacing-default-wordpress-gallery-shortcode/ as the basis for a custom gallery shortcode, and trying to create this carousel slider https://www.jssor.com/demos/image-gallery.slider. Problem is I don't know how exactly to implement it.
The images and everything up until then shows in the source code, but then nothing after it.
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:800px;height:356px;overflow:hidden;">
<?php
foreach ( $images as $image ) {
$thumbnail = wp_get_attachment_image_src($image->ID, 'homepage-thumb');
$thumbnail = $thumbnail[0];
$fullsize = wp_get_attachment_image_src($image->ID, 'service-page');
$fullsize = $fullsize[0];
$gallery .= "<div><img data-u='image' src='".$thumbnail."'><img data-u='thumb' src='".$fullsize."'></div>";
}
return $gallery;
?>
</div>
It's probably something simple, this is just far past my base of knowledge when it comes to this.
You are returning the value instead of printing it to the web page. Use echo instead of return. Also make sure you echo it in each iteration of the loop so you don't just print one image, but all of them.
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:800px;height:356px;overflow:hidden;">
<?php
foreach ( $images as $image ) {
$thumbnail = wp_get_attachment_image_src($image->ID, 'homepage-thumb');
$thumbnail = $thumbnail[0];
$fullsize = wp_get_attachment_image_src($image->ID, 'service-page');
$fullsize = $fullsize[0];
$gallery .= "<div><img data-u='image' src='".$thumbnail."'><img data-u='thumb' src='".$fullsize."'></div>";
echo $gallery;
}
?>
</div>
My website consist of 5 inner pages, and I want to use different banner images for each page. The page is with side bar, but I want a full width banner, so I used a code which I got from wordpress and its working
this is the code..
<div class="banner">
<?php
if( is_page('About') ) $img = 'bannerAbout.jpg';
elseif( is_page('Services') ) $img = 'bannerServices.jpg';
elseif( is_page('Testimonials') ) $img = 'bannerTestimonials.jpg';
elseif( is_page('Testimonials') ) $img = 'bannerTestimonials.jpg';
elseif( is_home() ) $img = 'bannerBlog.jpg';
else $img = 'banner.jpg';?>
<img alt="" src="<?php bloginfo('stylesheet_directory'); ?>/images/<?php echo $img;?>" />
</div>
My question is, How Can I call 'Featured Image' of each page in this code? between $img=""
Or any plug-for this?
If I can call the featured image, then its easy to upload images, otherwise I need to use FTP all the time to change.
Please help me.
Thanks in Advance
Add this code to your theme's functions.php
add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );
this will enable featured image for post and page
Then in your page.php file add this code
before content and sidebar
<?php
global $post;
echo get_the_post_thumbnail($post->ID, 'full'); // visit http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail for more info
?>
Place below code in each condition
global $post
echo get_the_post_thumbnail( $post->ID,'full' );
full will take the full size of image what ever you have uploaded
I am trying to get the post thumbnail using post_id,but i am getting so many problems.
Iam calling the function in a separate php file in theme directory
echo get_the_post_thumbnail('637');
Fatal error: Call to undefined function get_the_post_thumbnail() in ...
1)can we get the thumbnail using post_id
or
2)can we get the image source using post_id
please any body help me
Thanks in advance
Try this
global $post;
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'post');
echo $thumb[0];
In your case you make a small mistake that you put the single quote inside the function when function require an integer value.
echo get_the_post_thumbnail('637');
Bellow code are valid try it.
Simple Form
echo get_the_post_thumbnail(637);
Size Specified Form where second argument is the size of the image.
echo get_the_post_thumbnail(637, array(100,100));
also you can try bellow code also
get_the_post_thumbnail(637); // without parameter -> Thumbnail
get_the_post_thumbnail(637, 'thumbnail'); // Thumbnail
get_the_post_thumbnail(637, 'medium'); // Medium resolution
get_the_post_thumbnail(637, 'large'); // Large resolution
get_the_post_thumbnail(637, 'full'); // Original resolution
Also you can refer to the WordPress codex Here.
I am also going to write a full post on this topic on my blog
Use Require_once Or include_once
require_once('/the/path/to/your/wp-blog-header.php');
include_once('wp-blog-header.php' );
get_the_post_thumbnail($post_id); // without parameter -> Thumbnail
get_the_post_thumbnail($post_id, 'thumbnail'); // Thumbnail
get_the_post_thumbnail($post_id, 'medium'); // Medium resolution
get_the_post_thumbnail($post_id, 'large'); // Large resolution
get_the_post_thumbnail($post_id, 'full'); // Original resolution
get_the_post_thumbnail($post_id, array(100,100) ); // Other resolutions
Out side of loop
global $post;
if (has_post_thumbnail( $post->ID ) ){
//
get_the_post_thumbnail($post->ID);
//
}
Vallabh's solution works. This is how I use it as a background image:
<?php if (has_post_thumbnail( $post->ID ) ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id(637), 'thumbnail' );
$image = $image[0];
} ?>
<div style="background-image: url(<?php echo $image; ?>)"> ... </div>
Create a post template..look like this(post_temp.php)
<?php
$args=array('order'=> 'DESC', 'posts_per_page'=>get_option('posts_per_page'));
$query=new WP_Query($args);
if( $query->have_posts()):
while( $query->have_posts()): $query->the_post();
{
echo get_the_post_thumbnail($post->ID);
}
endwhile;
else:
endif;
?>
I'm creating a Wordpress theme and I'd like to grab the first image in a post as a thumbnail to use in the Facebook's OG meta tag.
I tried using the function get_the_post_thumbnail() but it generates an html img element. Also I'd like to take the first image in the post, without the need of adding a featured image when creating the post.
This should be simple because there are already all thumbnails generated for every post, I'm just not getting it right.
Here I made some function for you that you can hook to add/edit attachment event.
function set_first_as_featured($attachment_ID){
$post_ID = get_post($attachment_ID)->post_parent;
if(!has_post_thumbnail($post_ID)){
set_post_thumbnail($post_ID, $attachment_ID);
}
}
add_action('add_attachment', 'set_first_as_featured');
add_action('edit_attachment', 'set_first_as_featured');
There is a lot of space for improvement, but this one works like a charm too. On every upload / edit attachment, function checks if the post already has featured image. If it has not, image in question is set as featured. Every next picture will be ignored (since post already has featured image).
Maybe someone finds it helpful (you found solution in the middle of my coding, so... :) )
I found this solution:
$size = 'thumbnail'; // whatever size you want
if ( has_post_thumbnail() ) {
the_post_thumbnail( $size );
} else {
$attachments = get_children( array(
'post_parent' => get_the_ID(),
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image',
'order' => 'ASC',
'orderby' => 'menu_order ID',
'numberposts' => 1)
);
foreach ( $attachments as $thumb_id => $attachment ) {
echo wp_get_attachment_image($thumb_id, $size);
}
}
I found a solution:
wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'thumbnail' )[0];
It works fine.
Put this code in your theme's functions.php:
// make the first image of WordPress post as featured image
function first_image_as_featured() {
global $post, $posts;
$first_img_featured = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img_featured = $matches [1] [0];
if(empty($first_img_featured)){ //Defines a default image
$first_img_featured = "/images/default.jpg";
}
return $first_img_featured;
}
Then add the below code inside WordPress loop:
<?php
if (has_post_thumbnail()) { ?>
<?php the_post_thumbnail(); ?>
<?php }
else { ?>
<img src="<?php echo first_image_as_featured(); ?>" />
<?php
}
?>
If the featured image not set, it will automatically take the first image as featured image.
Source: Get The First Image Of WordPress Post As Featured Image
I have tried the solutions above withou success. So, I build a new and easy solution:
function set_first_as_featured($post_id){
$medias = get_attached_media( 'image', $post_id );
if(!has_post_thumbnail($post_id)) {
foreach ($medias as $media) {
set_post_thumbnail($post_id, $media->ID);
break;
}
}
}
add_action('save_post', 'set_first_as_featured');
When you save a post, this code will check if it has any thumbnail. If not, so it will set the first image attached to this post as thumbnail.