I'm trying to show a featured image in Wordpress, I've uploaded the image (put it as the smallest image possible) but when I view the blog list view (category.php) I just get the blog post header, and no image.
Anybody know how to show the image? Checked the source, and doesn't show an image at all.
Hope someone can help, would be much appreciated.
In addition to setting the featured image in WP admin, you need rendering code somewhere in your template files. Something like this:
if ( has_post_thumbnail( get_the_ID() ) ) {
echo get_the_post_thumbnail( get_the_ID() );
}
I use this code in my header.php theme file, but you may prefer it within page.php or elsewhere (category.php seems appropriate in your case).
Check the documentation for help changing the dimensions, adding class attributes, etc. to the <img/> tag generated.
http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail
Related
I'm using this in a single post category template:
<?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail(array( 200, 200 ));
}
?>
This is working except for the fact that the thumbnail, no matter what I put in the paramater, is showing at full size so it's huge on the page. When I inspect it, the 200x200 is marked out and it's using width:100% and height:auto. Obviously there's a global setting for single thumbnails somewhere, which is fine, but I need to control the images specifically for this category page to be 200x200.
Is there a better solution to force the thumbnail size here?
The current Woocommerce setup of this website is being provided with a main product image and several gallery images as normal. The main product image is being used correctly so that it is shown within a list and once clicked, the product page is opened. However, within this product page, the gallery images that are provided on Woocommerce are being shown as full size images beneath each other on the right side of the screen. Within each product page there is mCustomScrollbar in action so that clients can scroll down the images. I want those to be small images with a lightbox and zoom technique instead of full size images. I have also tested plugins to see whether there are issues with regards to this however none have resulted.
I have created a new local site to test and created a product from scratch to match the original Woocommerce files with these ones since this has gone through a different developer. The following files, which seem to be in direct relation with each product page, are binary equal: product-thumbnails.php, product-image.php, single-product.php, content-product.php and content-single-product.php and therefore no changes were made in these that reflect in each product page. I have also found and optimized the below code put in functions.php however to no avail.
add_action('woocommerce_shop_loop_item_title','wps_add_extra_product_thumbs', 5);
function wps_add_extra_product_thumbs() {
if (is_product()) {
global $product;
$attachment_ids = $product->get_gallery_image_ids();
echo '<div class="product-thumbs">';
foreach( array_slice( $attachment_ids, 0,3 ) as $attachment_id ) {
$thumbnail_url = wp_get_attachment_image_src( $attachment_id, 'thumbnail' )[0];
echo '<img class="thumb" src="' . $thumbnail_url . '">';
}
echo '</div>';
}
}
I have already put my head around this and found myself in a loop, however the above is what I have come up with, which up until now is not a solution. I want the product to show similar to this: https://www.wpstud.io/wp-content/uploads/2016/05/product-with-thumbs.jpg . The client's website is fully functional and through the busiest days of the year so I require the most efficient solution without making any major changes. Thanks so much in advance.
In addition to the above code previously provided, I have edited some small details from it and also included the Flexslider 2 by implementing the slider's javascript, creating <li> tags within the foreach loop attached with the data-thumb technique (a Flexslider speciality). The Flexslider automatically notes the <div> tag holding all <li> tags and voila', perfect execution as intended.
Some tweaks here and there to make it work but worth it, client is super happy with this update. :)
try going to Customize -> WooCommerce -> Product catalog and change the image size there
I'm teaching myself Wordpress, and my current goal is to display 4 thumbnails of images posted in a particular category.
I've already got the posts being pulled in by category, however I cannot pull ONLY the images. It's either the images and post text, or none at all.
My code is posted here: http://pastebin.com/NZ7fyyPA
I've tried simply replacing
<?php the_content(); ?>
with:
<?php the_post_thumbnail(); ?>
but that didn't work at all. Nothing came back at all!
I've even tried simply removing:
<?php the_content(); ?>
and same as above! I was thinking that because I have
<div class="entry-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
That would pull the thumbnail in only, so I thought removing the content would help but nope!
I've read through the Codex here: http://codex.wordpress.org/Function_Reference/the_post_thumbnail
and the only question I have from that, is that immediately the Codex says:
"Use get_the_post_thumbnail($id, $size, $attr ) instead to get the featured image for any post."
Which I don't think I'm doing, because I haven't setup anything related to a 'featured image' in my theme...or is what I'm trying to do considered using a featured image? I'm only uploading images and posting them inside of the blog posts.
Sorry for the long write up, I'm sure it's something simple!
Thanks!
One more thing you can set a featured image from admin and call that image with this code the_post_thumbnail( $size, $attr ); and when you want to show anything from content part then you can call with this code simply. the_content();
you can also use excerpt for this as the_excerpt();
Thanks
This is a bit of a hack; however, it works.
While viewing your Wordpress website, use the browsers developer tools to target the 'post text'. You'll be able to see the id that is associated with that data-set.
Then, in your CSS. Target that id and use display:none;
Example:
#posttext {
display:none;
}
I would like to add a feature to a WordPress page to display a short list of people, like the one seen here - http://www.blenderbox.com/company/team
I have done this on other sites by styling lists with css. This time however, it's for a client and I can't trust them to copy and paste a <li>, editing the name, job title and img name without messing it up.
What is the best way to go about creating this so that it can be easily reduced/added to in the WordPress dashboard? Basically, so that the user simply clicks "add person" then fills in some fields before updating the page.
I'm new to WordPress (though I understand how it works) but I am competent coding so hopefully an informative nudge in the right direction would be sufficient.
Thanks, Ben.
Use categories. Create a new category called Person or Team or something to that effect. Then use the Post Title for their Name - any other information can be put in the post and then add the image to the Featured Image.
Create a new template for this page by copying over another template file and giving it a header like this to name it.
<?
/*
Template Name: About Us / Team / Whatever
*/
?>
And in the page call only the information you want with something like this:
//Set up the Loop
<?php
global $post;
$args = array (
'category' => 4,
'order' => 'ASC');
$teamposts = get_posts( $args );
foreach( $teamposts as $post ) : setup_postdata($post); ?>
//Call the information you want - put them in <li> if you need
<?php the_title();?>
<?php the_excerpt();?> //OR the_content
<?php the_post_thumbnail('new-image-size');?>
//Close the loop
<?php endforeach; ?>
You can then go on to call anything else you want or run another loop on the same page to call other information.
To get the right sized thumbnail you have called 'new-image-size' - to set this up add a line like this to your functions.php file.
// Post Thumbnails
add_theme_support( 'post-thumbnails' );
// name of the thumbnail, width, height, crop mode
add_image_size( 'front-page-services', 450, 270, true );
I am looking for a way to add thumbnail images to post Excerpts.
I've installed: SuperSlider-Excerpt and Thumbnail For Excerpts plugins but I need to specifically assign the thumbnail that I want to use per post or automatically get the featured image to display as the thumbnail.
Anyone know a method or plugin that can do this please?
You can do this pretty easily with Wordpress. Like Francy said, the_post_thumbnail() will add the featured image you have picked on the post edit page in the admin section.
First you need to set up your thumbnails in your functions.php file. This is in the root directory of your theme (wp-content/themes/your-theme). Write this:
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 200, 200, false ); // Set your size, and clipping options
This would make thumbnails 200x200. You may want something else, so put whatever number you want in there.
Now that thumbnails are active, you can use the the_post_thumbnail() throughout your site, inside the loop, to display the thumbnail you've picked.
For example, if you want them to appear on the index page, head to index.php in your theme root directory, and write , right before . Experiment with where these appear, and get it in the right place for you.
Try within the loop:
the_post_thumbnail("thumbnail");
Or what also helped me was:
<?php
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail');
$theImageSource = $image[0];
?>