This has been frustrating me for a while- I'm working on a test site- www.temp.lpwgroup.co.uk.gridhosted.co.uk and I want the featured images to be 700px x 200px but on the posts page- /news They are being added in as 600x400 for some reason, linking to a new image url with that at the end of the one i upload. Can anyone let me know if there's additional css I can add so the full image shows in that 7:2 ratio?
Image issue
Thanks,
Joe
seems like you are using Wordpress in your website, You need to add a new thumbnail size in your functions.php
add_action( 'after_setup_theme', 'setup' );
function setup() {
add_image_size( 'size-portfolio', 700, 200, true ); // 400 pixel wide and 200 pixel tall, cropped
}
then use regenerate thumbnails plugin to regenerate your thumbnails
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>
I have looked up in all my css of theme i am using on my wordpress blog, but problem is when i use featured image on homepage it is not all in same length. how i can make them stretched to fix in unifrom container?
can anyone tell me specific piece of code where i can fix this length?
i saw this line on functions.php in themes.
add_image_size('maggie-lite-featured-post', 1170, 350, true); //featured post img size
right now you're telling WP to hardcrop, so it's max 1170px width OR 350px height.
To solve this you shoud go for:
add_image_size( 'maggie-lite-featured-post', 1170, 9999 );
So you tell WP to make it 1170width - the height doesn't matter anymore.
Otherwise you could try to remove the "true" trag from the Crop, but I am not sure if this will also help. But def one of both should be your solution.
add_image_size('maggie-lite-featured-post', 1170, 350, false); //featured post img size
All the best
We created a custom theme using ACF for Wordpress. Our issue is that we are resizing a single image 1440 x 320 to fit in 2 places. The first place which is working fine is Full post leadspace image which uses the full 1440 x 320 image. The issue we are having is for the Featured post view or Card layout the image needs to resize down to 380 w x 160 H. We are using Advanced Custom fields to add the image to the post. I will attach a photo of whats happening
I guess the problem isn't ACF, but your add_image_size() function.
If you already defined the image size in your functions.php, it should look like this:
add_image_size ( "card", 380, 160, true );
The last argument (true), tells WordPress to crop the image. If this is set to false, the resized image will be 380px wide and the height will be proportionally. If you crop the image, WordPress will first resize the image, and then cut the image to 380x160px
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 am having trouble calling the featured image of the blog post in my wordpress blog. I have searched websites for the tutorial but it all leads to the same results.
It doesn't follow my assigned size which is 200x180px then the rest is cropped. to have a better view of what i'm trying to do, you can refer to this website:
http://freakify.com/
I am trying to have all the featured images in same sizes (200x180). on a very related topic, the sizes of my featured images is different but not lower than 500px and not more than 650px. I am trying to display it in different places such as my index file and side bar.php file
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 200, 180, true ); // 50 pixels wide by 50 pixels tall, crop mode
add_image_size( 'post-thumbnails', 200, 180 );
I hope you can help me guys.
First, you dont need the add_image_size if you're going to use only a one thumbnail image size, only with the first two lines es enough.
Second, with the 'true' statement you are 'telling' wordpress to hard crop the images, so it just cuts down the image to make them 200x180. On the other way, if you change the 'true' to 'false', then your images will be resized to the maximum width or height they can reach maintaining the aspect ratio.
This are the two methods for resizing the images without changing their appearence, because if you don't mantain the aspect ratio, you'll have stretched images.
My recommendation is to use the 200px as an absolute value, and change the height dynamically.
To achieve this you can do this:
set_post_thumbnail_size( 200, 9999, false );
This way you can have your original images, filling the 200px requirements but not changing their height, so you could preserve the aspect ratio.
Look at http://dfine.me to see this in action, you just need to modify the css to get the items in a proper way.