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>
Related
I am using WordPress, Jetpack Photon, and Bootstrap 4. Here is my image tag that works but can’t be good practice....
<?php echo '<img class="card-img img-fluid" src=' . the_post_thumbnail(array(375,300)) . '>'; ?>
I am trying to request the featured image with the_post_thumbnail(). I can’t get Photon to supply a scaled image that fits the width of my Bootstrap card container. The provided image is either a bit too slim or it overflows my card width. How can I get a Photon image to fit perfectly/responsively (width-wise)?
the_post_thumbnail(‘medium').... results in too small of an image for the card container.
the_post_thumbnail('large').... results in too large of an image and over flows it's card container.
Using Bootstrap’s max-width: 100% doesn’t seem to fix this problem.
Instead of image tag, try:
<?php the_post_thumbnail( 'full', array( 'class'=>'card-img img-fluid' ) ); ?>
The above function actually generate <img class="card-img img-fluid" src="http://img-src">
Add the following code to your functions.php file to define new image size.
add_image_size( 'name-of-size', 375, 300, true );
to know more about add image size click here.
**in the above line of code the name-of-size can be any unique name to represent the particular image size. The concept is while you upload any image to WordPress media it will crop to all image size defined and stored in wp-uploads folder.
***Also note that you will need to regenerate thumbnails for those images which were previously uploaded, if you need them in the new size.
Add the following code to your file to display image
<?php the_post_thumbnail( 'name-of-size', array( 'class'=>'card-img img-fluid' ) ); ?>
Hope this is helpful, Thank you
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 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
<div style="margin:0px auto ;width:490;height:288px; overflow:hidden;"> // But here read and hide watmark on "height".
<img style="width:490px;height:318" src="******"/> // Original image src, and size.
</div>
</div>
Me using wordpress, so i got uploaded images, and watemark on images at the bottom. I want to hide this 40px on botton.
Simple page: trollfesz.cc/fun/279887
I want to do same.
You can use the manual crop feature after uploading the image or if you want to bulk crop multiple images then use this plugin . I got the same problem hence resolved it with this plugin . link
I've edited a Bootstrap Wordpress theme to display featured images randomly when refreshed on the front page. But now on every other line the images are displaying huge gaps instead of images -
Here is my site.
What have I done wrong, and how do I get rid of these gaps? I used this code in index.php to display the images randomly -
<?php /* Start the Loop */ ?>
*<?php query_posts($query_string . '&orderby=rand') ?>*
<?php while ( have_posts() ) : the_post(); ?>
The source of the problem is that the images aren't all the same height. In the row right at the top of the screen grab you've pasted, the image on the right isn't as tall as the other two. So the browser thinks there's space for content underneath it. It adds an image there, and tries to float it left. It stops when it bumps up against something - the image in the second column in the row above. Then it stops. And the next image gets put underneath it. It's just the way float works in CSS.
So you have two options. Either crop all your images (or their containers, say the articles) to the same height, or use a jQuery library like masonry to lay out your images.
See this answer for a related problem and more discussion.
Don't float in the .pbox css. Use display: inline-block instead and you're good.
See screenshot and updated css at bottom-right: https://www.dropbox.com/s/3qvmhvz5dwlnekb/Screenshot%202014-04-16%2022.14.42.png
In short the gaps come from floating images left that aren't equal heights. You have two options to fix this with out editing your current HTML markup.
Option 1
Add a new image size, add that image size to the wp_query and regenerate your thumbnails.
3 Steps:
1) Create a new image size by adding the following to functions.php
add_image_size( 'home-thumbnail', 400, 400, true);
home-thumbnail = size variable, keep it simple and short
400, 400 = height, width
true = hard crop, WP will crop the image from the center.
http://codex.wordpress.org/Function_Reference/add_image_size
2) Add the new image size to the wp query.
e.g. <?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'home-thumbnail' );
}
?>
3) Regenerate your thumbnails with this plugin: http://wordpress.org/plugins/regenerate-thumbnails/
That's it!
Options 2
Pre-crop your images before upload so they're the same size. I'd recommend Opt 1 as these steps are apart of any development workflow and will ultimately increate your development flexibility / options.