I am trying to display recent post with thumbnail,title and author name on by website's blog details page's sidebar . title and author is proper but somehow thumbnail image is not showing proper and also when I check in view source, it's not taking thumbnail size 150*150, it's taking image's original size.
check url:- https://stageserver.co/officework/dev/6-lead-generation-techniques-to-immediately-turn-your-business-into-a-sales-magnet-9-3/
This is the code that I tried:-
<!-- Latest News -->
<?php $orig_post = $post;
global $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=>5, // Number of related posts that will be shown.
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div class="sidebar-widget latest-news"><div class="sidebar-title">
<h2>Recent Post</h2>
</div>';
while( $my_query->have_posts() ) {
$my_query->the_post(); ?>
<div class="widget-content">
<article class="post">
<div class="post-thumb">
<a href="<?php the_permalink(); ?>" ><img src="<?php
the_post_thumbnail(); ?>" ></img></a>
</div>
<h3><?php the_title(); ?></h3>
<div class="post-info"><?php the_author(); ?></div>
</article>
</div>
<? }
echo '</div>';
}
}
$post = $orig_post;
wp_reset_query(); ?>
thanks in advance pls help as soon as possible I am new in php
You can pass the size and other attribute to the the_post_thumbnail( $size, $attr ); function, Default value: 'post-thumbnail'.
Try:
the_post_thumbnail('thumbnail');
the_post_thumbnail('thumbnail'); // Thumbnail (default 150px x 150px max)
the_post_thumbnail('medium'); // Medium resolution (default 300px x 300px max)
the_post_thumbnail('medium_large'); // Medium Large resolution (default 768px x 0px max)
the_post_thumbnail('large'); // Large resolution (default 1024px x 1024px max)
the_post_thumbnail('full'); // Original image resolution (unmodified)
the_post_thumbnail( array(100,100) ); // Other resolutions
Ok so also the_post_thumbnail() return the image not just the url, so try:
<div class="post-thumb">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('thumbnail'); ?>" >
</a>
</div>
Related
I implemented my Custom Post Type and I need to paginate all posts on more pages. I installed wp-pagenavi, but when I try to select for example page 2, URL changed, but content will stay on page one and nothing changed.
Custom Post Type is created in Administration mode, not through => register_post_type()
Did I implement something wrong in code?
<?php
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array('post_type' => 'inzeraty',
'order' => 'ASC',
'posts_per_page' => 2,
'paged' => $paged);
$wp_query = new WP_Query( $args );
while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<div class="col-12">
<div class="cpt-news-block mb-3">
<div class="row">
<div class="col-12 col-sm-6 col-lg-12 col-xl-6">
<a class="zoom-picture-hover" href="<?php the_permalink()?>">
<div class="cpt-news-block-image picture">
<?php $images = acf_photo_gallery('fotka', $post->ID);
$image = $images[0];
$id = $image['id']; // The attachment id of the media
$title = $image['title']; //The title
$caption= $image['caption']; //The caption
$full_image_url= $image['full_image_url']; //Full size image url
//$full_image_url = acf_photo_gallery_resize_image($full_image_url, 762, 580); //Resized size to 262px width by 160px height image url
$thumbnail_image_url= $image['thumbnail_image_url']; //Get the thumbnail size image url 150px by 150px
$url= $image['url']; //Goto any link when clicked
$target= $image['target']; //Open normal or new tab
$alt = get_field('photo_gallery_alt', $id); //Get the alt which is a extra field (See below how to add extra fields)
$class = get_field('photo_gallery_class', $id); //Get the class which is a extra field (See below how to add extra fields)
?>
<?php if( !empty($url) ){ ?><a href="<?php echo $url; ?>" <?php echo ($target == 'true' )? 'target="_blank"': ''; ?>><?php } ?>
<img src="<?php echo $full_image_url; ?>" alt="<?php echo $title; ?>" title="<?php echo $title; ?>">
<?php if( !empty($url) ){ ?></a><?php } ?>
</div>
</a>
</div>
<div class="col-12 col-sm-6 col-lg-12 col-xl-6">
<h2 style="font-size: 20px;">
<a href="<?php the_permalink()?>">
<?php the_title()?>
</a>
</h2>
<p class="mb-3"><?php the_field('popis_inzeratu')?></p>
<a href="<?php the_permalink()?>" class="cpt-news-block-link link-read-more"> <?php
include get_stylesheet_directory() . '/assets/img/svg/icon_arrow.svg';
?>
<?php echo "More";?>
</a>
</div>
</div>
</div>
</div>
<?php endwhile;?>
<?php wp_pagenavi( array( 'query' => $wp_query ) ); ?>
URL for my page: http://tvorba-stranok.eu/ads/
Thanks for any advice...
install the plugin Custom Post Type UI to easily add custom post
types. You have to change a setting of this plugin to make it work.
When you set Rewrite to false (for your custom post type) it will
work.Flush the permalink settings.
Try following code. I have check using a minimum information.
<?php
// Must have wp_pagenavi plugin installed. Custom Post Type names can not clash with page names or 404's will occur on /page/#/ (Utilize Custom Rewrite Slug in CPT)
// The press release loop
$the_inzeraty = new WP_Query(array('post_type' => 'inzeraty','posts_per_page' => 10,'paged'=> get_query_var('paged') ));
// The Loop
while ($the_inzeraty->have_posts()) : $the_inzeraty->the_post();
?>
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
<p><a href="<?php echo the_permalink(); ?>" >Read More</a></p>
<?php endwhile; ?>
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(array('query'=> $the_inzeraty));} ?>
<?php wp_reset_postdata();?>
I have used the following code to try and display the featured image for each post, but nothing is showing:
<div class="thumbnail-img">
<?php
$lastBlog = new WP_Query('type=post&posts_per_page=2&offset=1');
if ($lastBlog->has_post_thumbnail()) {
while($lastBlog->has_post_thumbnail()) {
$lastBlog->the_post_thumbnail();
} ?>
<?php get_template_part('content-image', get_the_post_thumbnail());
}
?>
</div>
<br>
<?php
if( $lastBlog->have_posts()):
while($lastBlog->have_posts()): $lastBlog->the_post(); ?>
<?php get_template_part('content-title', get_post_format()); ?>
<?php endwhile;
endif;
wp_reset_postdata();
?>
</div>
I want the featured image on top of each post title. How do I resolve this?
<?php
$lastBlog = new WP_Query('type=post&posts_per_page=2&offset=1');
if( $lastBlog->have_posts()):
while($lastBlog->have_posts()): $lastBlog->the_post(); ?>
<div class="title"><?php echo get_the_title(); ?></div>
<br />
<div class="thumbnail-img"><?php echo the_post_thumbnail();?></div>
<br />
<?php
endwhile;
endif;
wp_reset_postdata();
?>
try this one should works fine
I cant really be specific about your template structure (template-part content-title??) but using a generic example the following will display the featured image where available;
functions.php
if ( ! function_exists( 'mytheme_setup' ) ) :
function mytheme_setup() {
/*
* Enable support for Post Thumbnails on posts and pages.
*
* See: https://codex.wordpress.org/Function_Reference/add_theme_support#Post_Thumbnails
*/
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 825, 510, true );
}
endif;
add_action( 'after_setup_theme', 'mytheme_setup' );
your content template page (content.php, template-page, etc..)
// WP_Query arguments
$args = array (
'nopaging' => false,
'posts_per_page' => '2',
'offset' => '1',
);
// The Query
$the_query = new WP_Query( $args );
// The Loop
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post(); ?>
<article>
<?php if ( has_post_thumbnail() ) : ?>
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
</div>
<?php endif; ?>
<div class="post-title">
<?php echo '<h2>' . get_the_title() . '</h2>'; ?>
</div>
</article>
<?php
}
/* Restore original Post Data */
wp_reset_postdata();
} else {
// no posts found
echo "NADA";
}
if you want image url then use this
$thumb_image=wp_get_attachment_url( get_post_thumbnail_id() );
and you want get direct image then here the different different image
the_post_thumbnail( 'thumbnail' ); // Thumbnail (150 x 150 hard cropped)
the_post_thumbnail( 'medium' ); // Medium resolution (300 x 300 max height 300px)
the_post_thumbnail( 'medium_large' ); // Medium Large (added in WP 4.4) resolution (768 x 0 infinite height)
the_post_thumbnail( 'large' ); // Large resolution (1024 x 1024 max height 1024px)
the_post_thumbnail( 'full' ); // Full resolution (original size uploaded)
//With WooCommerce
the_post_thumbnail( 'shop_thumbnail' ); // Shop thumbnail (180 x 180 hard cropped)
the_post_thumbnail( 'shop_catalog' ); // Shop catalog (300 x 300 hard cropped)
the_post_thumbnail( 'shop_single' ); // Shop single (600 x 600 hard cropped)
i have a custom post type-> events. I have a gallery page in which the featured image from a custom post is used as album cover . Now when a person clicks on the album cover i.e featured image , i want to display images in attached gallery in the post. I have been using the following code to display the featured images in the main gallery page .But how do i show the rest of the images of the post. Please help me out.
<?php $paged= (get_query_var('paged' )) ? get_query_var('paged'):1; ?>
<?php $args = array( 'post_type'=>'events',
'posts_per_page' => 100 ,
'paged'=>$paged
);
$loop = new WP_Query( $args );
if($loop->have_posts()):while ( $loop->have_posts() ) : $loop->the_post();
?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array(225,225) ); ?>
<?php if(!$image) :continue; else:?>
<div class="col-lg-3 col-md-3 col-sm-3 gallerycol paddingdel-l">
<div class="about-img">
<div class="about-img-bot">
<div class="photo-quanity"></div>
</div>
<img class="img-responsive" src="<?php echo $image[0]; ?>" alt="" />
</div>
<div class="clearfix"></div>
<p><?php the_title(); ?> </p>
</div>
<?php endif; ?>
<?php endwhile;endif; ?>
If i put the featured image in the anchor tag with href="the_permalink" then it takes me to the template single-events.php which is having a lot of infomation . How do i display only the images in the attached gallery
Any hint will be really helpful and appreciable
I have the current loop working to display posts, but I can't seem to get the title or content to populate. What am I missing?
<?php
// LOOP ARGUMENTS
$args = array( 'post_type' => 'cbd_slider', 'posts_per_page' => -1 ); // -1 Shows ALL Posts
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
// CUSTOM CONTENT
$slideLink = get_post_meta($post->ID,"slideLink",true);
$thumb = wp_get_attachment_image_src(get_post_thumbnail_id(), 'thumbnail_name');
$imgURL = (isset($thumb[0]) ? $thumb[0] : get_template_directory_uri() . "/images/placeholder.jpg");
?>
<li class="clearfix"><!-- Start of featured slide -->
<a href="<?php echo $slideLink ?>">
<img src='<?php echo get_template_directory_uri(); ?>/thumb.php?src=<?php echo urlencode($imgURL); ?>&h=330&w=496' alt='featuredimage' /></a>
<div class="description">
<h2>TITLE GOES HERE</h2>
<p>POST CONTENT GOES HERE</p>
more
</div>
</li><!-- End of featured slide --><?php /* END WHILE AND RESET QUERY */ endwhile; wp_reset_query(); ?>
Have you tried the_title? Substituting <?php the_title(); ?> for your TITLE GOES HERE and <?php the_content(); ?> for CONENT GOES HERE?
I'm building my first WordPress Theme and I'm stuck on something.
I have a function in my functions.php called get_first_photo() which grabs the first image uploaded on each post and puts it on the blog archive page. It's working fine, but it loads the full-sized image and resizes it using CSS. I would rather it load the image at it's thumbnail size set in the WP control panel so I don't have the image-size overhead. Any way to accomplish this?
Here's the code from functions.php:
function get_first_photo($id) {
global $wpdb;
return $wpdb->get_var("SELECT guid FROM wp_posts WHERE post_parent = $id AND post_mime_type = 'image/jpeg' ORDER BY id DESC LIMIT 1");
}
And here's the blog template:
<?php
get_header(); ?>
<div id="content" class="blog">
<div id="body">
<h3 class="title" id="blog">The Ned Leary Blog</h3>
<?php if (have_posts()) :
query_posts("category_name=blog");
while (have_posts()) :
the_post();
$first_photo = get_first_photo(get_the_ID());
?>
<div class="snippet">
<?php if (!empty($first_photo)) : ?>
<img src="<?php echo $first_photo; ?>" alt="Thumbnail" />
<?php else : ?>
<img src="<?php bloginfo('url'); ?>/images/blog/gravatarBig.jpg" alt="Ned Leary Gravatar" />
<?php endif; ?>
<div class="details">
<h2><?php the_title(); ?></h2>
<h5><?php the_time('D, M j, Y') ?> by <?php the_author('') ?> | <?php comments_popup_link('0 Comments', '1 Comment', '% Comments'); ?></h5>
<?php the_excerpt(); ?>
<h4>Read moreā¦</h4>
</div>
</div><!--end snippet-->
<?php endwhile; endif;// end of the loop. ?>
</div><!--end body-->
<?php get_sidebar(); ?>
</div><!--end content-->
<?php get_footer(); ?>
All you need is to grab the post ID for that first image you want and then run it through "get_the_post_thumbnail()".
$first_photo = post id of the first image;
echo get_the_post_thumbnail( $first_photo );
You can also pull your own custom thumbnail sizes if you like as well. As long as you are using wordpress 2.9+.
Simply add this to functions.php
add_theme_support( 'post-thumbnails' ); //enable thumbs
add_image_size( 'mycustom-preset', width you want, height you want); //custom size
Then run the same function but call your new preset...
$first_photo = post id of the first image;
echo get_the_post_thumbnail( $first_photo, 'mycustom-preset' );
http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail
http://codex.wordpress.org/Function_Reference/add_image_size
Hope that helps. It doesn't seem like your having trouble obtaining the post id for the first photo so I didn't really cover how to obtain it.
You can use GD or some other image library to programmatically manipulate an image. However, it would be best to implement an operation to create a thumbnail file when the image is uploaded. You can have it dynamically generate a thumbnail every time the page is loaded, but such an operation can be relatively computationally expensive and put unneeded load on the ssystem.
Thanks to John Ford for pointing me in the right direction, I was able to figure this out.
The query in my function changed slightly, grabbing the post id instead of guid.
function get_first_photo($id) {
global $wpdb;
return $wpdb->get_var("SELECT id FROM aire_posts WHERE post_parent = $id AND post_mime_type = 'image/jpeg' ORDER BY id DESC LIMIT 1");
}
And then I had to add another line to my theme file:
$first_photo = get_first_photo(get_the_ID());
$thumb = wp_get_attachment_image_src($first_photo);
Lastly, I updated my image src:
<img src="<?php echo $thumb[0]; ?>" alt="Thumbnail" />
you could use the get_the_post_thumbnail function or use a php thumbnail generator like timbthumb
<?php $images = get_children( array( 'post_parent' => $page->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) );
if ( $images ) {
$total_images = count( $images );
$image = array_shift( $images );
$thumbnail = wp_get_attachment_image_src($image->ID, array(225,125) );
$thumbnail = $thumbnail[0]; }
?>
<img class="size-thumbnail alignleft" src="<?php echo $thumbnail; ?>" alt="<?php echo $page->post_title ?>">