I have attached a thumbnail image to the post. I have used the following code
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
add_image_size( 'post-image', 550, 650, true );
}
This is the site URL http://digitalsensebd.com/talking-threads/ .But images go to stretch when the height more than 650px. Please tell me how can I solve the stretch problem.
In main.css line 127, you have the CSS .thumblin-img img { width: 100%; }. If you change that property, or remove it, you will see your picture not stretch.
If you want to preserve the aspect ratio (and make the site responsive) change the CSS to this:
.thumblin-img img {
max-width: 100%;
height: auto;
}
If you're using the featured image you might want to use "set_post_thumbnail_size" instead of "add_image_size":
set_post_thumbnail_size( 550, 650, true );
http://codex.wordpress.org/Function_Reference/set_post_thumbnail_size
Related
I want to make WordPress images responsive, I have read many articles, but I am facing problem with mobile responsive.
This is the code I use :
function blog_2( $attr, $attachment, $size ) {
$attr['sizes'] = '(min-width: 1025px) 1118px, (min-width: 768px) 985px, 95.45vw';
return $attr;
} add_filter( 'wp_get_attachment_image_attributes', 'blog_2', 10, 3 );
<img width="1920" height="1080" src="https://wsite.com/wp-content/uploads/2022/12/blog-10.jpg" class="attachment-full size-full" alt="" loading="lazy" srcset="https://wsite.com/wp-content/uploads/2022/12/blog-10.jpg 1920w, https://wsite.com/wp-content/uploads/2022/12/blog-10-728x410.jpg 728w, https://wsite.com/wp-content/uploads/2022/12/blog-10-985x555.jpg 985w, https://wsite.com/wp-content/uploads/2022/12/blog-10-1118x629.jpg 1118w" sizes="(min-width: 1025px) 1118px, (min-width: 768px) 985px, 95.45vw">
In mobile mode, I want it to be loaded in size 728x410, but when I test on pagespeed site, I see that it is loaded in mobile size 985x555, This has bothered me a lot, Friends, do you have experience in this field to guide me?
Try
Width: 100% and height: auto
for full screen use height: 100vh
i have one CSS issue (i hope so). After inserting this CSS by my side:
.owl-item>.product .product-thumbnail>img, .owl-item>.product .wp-post-
image, .products:not(.electro-v1)>.product .product-thumbnail>img,
.products:not(.electro-v1)>.product .wp-post-image {
height: 320px !important;
}
images on shop are alligned properly, but this caused some images to be scretched or distorzed, its not in their natural size.. Can someone to tell me where is my error in my CSS, and what to do to fix it? Many thanks
Yup, you're stretching the image by forcing the height to be 320px. Try applying the height to the wrapper element instead:
.owl-item>.product .product-thumbnail,
.products:not(.electro-v1)>.product .product-thumbnail {
height: 320px !important;
}
You can use this code in functions.php of your theme.
add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
function remove_thumbnail_dimensions( $html ) {
$html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
return $html;
}
WP introduced support for srcset in version 4.4 for Thumbnails and Post images. But I can't find a way to make the page header responsive. Here is how I embed the Page header:
<img src="<?php header_image() ?>" alt="">
This loads the header image (which can be uploaded in the backend > Design > Customise) in an src. But I'd rather include all custom image sizes (that I added in functions.php) of this image and put them in an srcset attribute. But there seems to be only one size for the header?
It won't be easy, but this is how you make Header images (banner) responsive with a srcset.
ps.: Please fix this, wordpress! Responsive Headers should be part of the srcset update.
Solution: We never use the WP header_image(); function, but instead only just use the custom header as an "Uploader" for our image that we then embed manually:
Extract the attachement ID of the Header image
Manually load src and srcset of this attachement ID
header.php
<?php
// Extract header attachement ID
$data = get_theme_mod('header_image_data');
$data = is_object($data) ? get_object_vars($data) : $data;
$header_id = is_array($data) && isset($data['attachment_id']) ? $data['attachment_id'] : false;
if($header_id) :
// Set image sources manually
$src = wp_get_attachment_image_src( $header_id, 'thumbnail-head' )[0];
$srcset = wp_get_attachment_image_srcset( $header_id, 'thumbnail-head' ); ?>
<img id="masthead-bg" src="<?php echo $src ?>" srcset="<?php echo $srcset ?>" sizes="100vw" alt="">
<?php endif; ?>
In this example thumbnail-head is my destination image size and aspect ratio. You can use whatever size you want (needs to have a fixed aspect ratio). We now have to add this image size to the functions.php file. In order to get larger sizes of this thumbnail (to embed in the srcset) you also have to add more sizes to the functions.php:
functions.php
add_image_size( 'thumbnail-head', 450, 300, true );
add_image_size( 'thumbnail-head-2x', 900, 600, true );
add_image_size( 'thumbnail-head-4x', 1800, 1200, true );
My thumbnail size is 450 x 300 pixel (3:2 aspect ratio). So I added a 2x and 4x version. Don't forget to rebuild thumbnails via plugin.
Finally it's important to set the dimensions of the custom header image to the largest version of your thumbnail. This is because WP cuts the image down to this size and creates the other sizes afterwords based on this cut down image. In this case search for your custom header in the functions.php and set width and height to 1800 and 1200. We also disable "flex-width" and "flex-height" to force the same aspect ratio as our added image sizes.
functions.php
function fs_custom_header_setup() {
add_theme_support( 'custom-header', apply_filters( 'fs_custom_header_args', array(
'default-image' => '',
'header-text' => false,
'default-text-color' => 'ffffff',
'width' => 1800,
'height' => 1200,
'flex-width' => false,
'flex-height' => false,
'wp-head-callback' => 'fs_header_style',
) ) );
}
add_action( 'after_setup_theme', 'fs_custom_header_setup' );
This is now possible using the_header_image_tag();.
You might want to use this, to avoid WP from hardcoding a height and width for responsive images:
the_header_image_tag( array(
'width' => "",
'height' => "",
));
I have this code to show the featured images of my wordpress posts on mailchimp RSS Campaigns and it works but it shows the image on its original size, I was wondering if you could help me with the code in order to resize all images to a same size.
function featuredtoRSS($content) {
global $post;
if ( has_post_thumbnail( $post->ID ) )
{
$content = '' . get_the_post_thumbnail( $post->ID, 'full', array( 'style' => 'float:left; margin:10px 15px px 0;' ) ) . '' . $content;
}
return $content;
}
This is a wordpress question, but here is the answer
YOu should make an your own image size and add it in wordpress functions.php
add_image_size( 'samesize', 500, 200, true );
You can read more about it here
And then in your code you will call your image size instead of full (full means the full width and height copy of your image)
get_the_post_thumbnail( $post->ID, 'samesize'
rest of your code :)
Your current styles are not going to resize your image. float:left; will push your image to the left, and margin will simply add spacing on each side of the image.
You are looking for width: ; and height: ;.
Checkout post_thumbnail function ref. that's what you're looking for,
on most templates there are already some default sizes:
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)
plus with an array you can set
the_post_thumbnail( array(100, 100) ); // Other resolutions
This works inside the loop, to access the function from outside use the get_the_post_thumbnail()
to set new sizes use add_image_size().
This is the website where I'm trying the featured image on. The site uses wordpress. As you can see, the Image uses a custom size, not the size I want it to use. Besides, it applies to itself the .post img { } characteristics. Here you have the codes I use.
(In PHP functions):
if ( function_exists( 'add_theme_support' ) ) add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size(640,205);
And then, in HTML
<?php the_post_thumbnail();?>
I wrote down the image size I wanted in the PHP Functions code, but it's not working! What am I doing wrong?
You could just set the image size when your using it, in the html, like this:
<?php
if ( has_post_thumbnail() ) {
set_post_thumbnail_size( 640,205 );
echo get_the_post_thumbnail( );
}
?>
If you want to set custom values for the thumbnails in your functions.php file, you will have to do something like this:
function mytheme_custom_thumbnail_size(){
add_image_size( 'thumb-small', 200, 200, true ); // Hard crop to exact dimensions (crops sides or top and bottom)
add_image_size( 'thumb-medium', 520, 9999 ); // Crop to 520px width, unlimited height
add_image_size( 'thumb-large', 720, 340 ); // Soft proprtional crop to max 720px width, max 340px height
}
add_action( 'after_setup_theme', 'mytheme_custom_thumbnail_size' );