I currently have on my wordpress blog a 'Featured Image' and now just moving onto the single.php pages. How would I go about displaying a high resolution image on this page which isn't the featured image? and then modifying it in CSS e.g Floats / Width etc.
Is there any best practices I should be following?
Thanks
Thumbnail Sizes
The default image sizes of WordPress are "thumbnail" (and its "thumb" alias), "medium", "large" and "full" (the image you uploaded). These image sizes can be configured in the WordPress Administration Media panel under Settings > Media. If your theme enables Post Thumbnails then "post-thumbnail" is also available and this is the default when using Post Thumbnails. This is how you use these default sizes with the_post_thumbnail():
// without parameter -> Post Thumbnail (as set by theme using set_post_thumbnail_size())
the_post_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('large'); // Large resolution (default 640px x 640px max)
the_post_thumbnail('full'); // Original image resolution (unmodified)
the_post_thumbnail( array(100,100) ); // Other resolutions
Related
In functions.php i have,
function university_features() {
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
add_image_size('professorLandscape', 400, 260, true);
add_image_size('professorPortrait', 480, 650, true);
add_image_size('pageBanner', 1500, 350, true);
}
add_action('after_setup_theme', 'university_features');
In single-professor.php, I have:
<div class="one-third">
<?php the_post_thumbnail('professorPotrait'); ?>
</div>
But the image size doesn't change. But, if I put the default size of "thumbnail" or any of the others like this:
<div class="one-third">
<?php the_post_thumbnail('thumbnail'); ?>
</div>
it works. What could be the issue? I'm working on localhost.
I have checked your code and it seems everything is working perfectly. I think what you missed that after setting the new image sizes you did not regenerate those images. You can try to upload a new image and check; make sure you have uploaded a large size more than 480px X 650px for checking purpose, because WordPress will crop a image if you upload larger than that. For existing images which you have already uploaded in the admin panel you can use a third party plugin like "Regenerate Thumbnails", I have checked with this plugin, you can try this if you want. Hope it will work.
Try to edit the default image sizes in the admin panel
And instead of the post_thumbnail custom class added .
use the default ones and edit them in the wordpress admin panel
The default values for wordpress images are
Thumbnail size (150 x 150 pixels)
Medium size (maximum 300 x 300 pixels)
Large size (maximum 1024 x 1024 pixels)
Full size (the original size of the uploaded image)
According to https://enginescout.com.au/wordpress-image-sizes/
<div class="one-third">
<?php the_post_thumbnail('medium'); ?>
</div>
Go to your WordPress dashboard and log in.
Select Media in the Settings menu. Change the width and height dimensions in Media Settings to fit your needs.
Confirm your changes by clicking Save Changes.
Checkout this example by visual composer https://visualcomposer.com/blog/wordpress-image-sizes-guide/#changing-wordpress-default-image-sizes
Another possible solution would be
You can add a mask for the posts themselves so the image itself will be locked to a certain width and height of the mask for example 100vh and 100vw
Checkout the example in Material Design bootstrap5
you can apply the same thing by utilizing their styling in your theme or recreate another like it https://mdbootstrap.com/docs/standard/content-styles/masks/
Code example
<div class="bg-image">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="w-100" />
<div class="mask" style="background-color: rgba(0, 0, 0, 0.6)"></div>
</div>
This question already has an answer here:
Changing product thumbnail sizes in WooCommerce 3.3
(1 answer)
Closed 4 years ago.
I have a problem with my website's post thumbnails. The products image are shown as 100x100 px images (too small).
I would like to find the source code for thumbs from front-page, because I don't like that they are displayed in such small size. The original size of my images is 300x250 px.
Where is the location of the code that sets the size of products thumbnails? How can I change the thumbnails size to the original one?
<a class="product_thumbnail_wrap" href="<?php the_permalink(); ?>">
<?php
/**
* woocommerce_before_shop_loop_item_title hook
*
* #hooked woocommerce_show_product_loop_sale_flash - 10
* #hooked shophistic_lite_template_loop_product_thumbnail - 10
*/
do_action( 'woocommerce_before_shop_loop_item_title' );
?>
</a>
Usually, You don't want to change the code itself, but there are some parameters available, where You can change how the images should be displayed. If You would google a little, there is this page, where is written following:
With WooCommerce 3.3 theme authors can now declare image sizes via the add_theme_support function. Declaring image sizes this way will take priority over any other settings and also hide the image settings section in the admin area.
add_theme_support( 'woocommerce', array(
'thumbnail_image_width' => 150,
'single_image_width' => 322,
) );
Thumbnail Cropping
A new thumbnail cropping section in the customizer will allow store owners to select one of three cropping ration settings with visual cues:
1:1 (Square scropping)
Custom (Store owner can enter a custom aspect ratio)
Uncropped (Preserve single image aspect ratio)
Image sizes are then calculated based on the cropping option selected and the image width.
It is important to note that Single Product Images are uncropped and not affected by the cropping settings.
I have the URL access of the thumbnail of an image. Now, I want to get the largest image based on the thumbnail image on the URL but I can't locate this largest image.
I checked the wordpress image sizes and saw that the largest image is 1024x1024. My image is:
www.domain.com/wp-content/uploads/2017-04-sample-image-370x370.jpg
I tried to change the dimension to:
www.domain.com/wp-content/uploads/2017-04-sample-image-1024x1024.jpg
But, it did not work as I expected. Also, I searched the image name in products and media gallery but can't find it.
Is there a way do it?
Check out the_post_thumbnail(). It allows you to specify the size you want:
https://developer.wordpress.org/reference/functions/the_post_thumbnail/
// without parameter -> Post Thumbnail (as set by theme using set_post_thumbnail_size())
the_post_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('large'); // Large resolution (default 640px x 640px max)
the_post_thumbnail('full'); // Original image resolution (unmodified)
the_post_thumbnail( array(100,100) ); // Other resolutions
Source for example: https://codex.wordpress.org/Post_Thumbnails
I am trying to add quality images for my wordpress blog, I am adding
it but, in homepage and, list page images are coming very low size
like 320*240. which are very zooming images to 750*540 width. But in
single article page Image coming nicely. Please help me in this
this is the link wethinkk.com
the_post_thumbnail(); // without parameter -> 'post-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( 'large' ); // Large resolution (default 640px x 640px max)
the_post_thumbnail( 'full' ); // Full resolution (original size uploaded)
the_post_thumbnail( array(100, 100) ); // Other resolutions
use your preferred one :)
It completely depends on the code in your wordpress theme on Homepage and Loop page.
There is several ways to change the ratios of the picture in wordpress like aq_resize() function. Check your code in 3 pages, see what is happening, compare them and use the one that you want in all other places (ex. The code in single page is suitable so use that code in other pages.)
I have a site where I list lots of thumbnails (photos) on the front page in a grid layout. Each image is 120px x 120px. What is the best way to keep them sharp on high resolution devices?
Should I make them 240px x 240px and then in the code resize them like:
<img src="file.jpg" width="120" hgith="120">
I guess jpg is better than png because of the files sizes?
yes you can use it like you mention. no matter you r using png or jpg.
you can also set thumbnail size from WordPress setting.
You can try following code
<?php
$size=array(240,240);
echo get_the_post_thumbnail( $post_id, $size, "attachment-thumbnail" );
?>
https://codex.wordpress.org/Function_Reference/get_the_post_thumbnail