I'm trying to put constant image size for post thumbnail in my site. (no matter whats the size of the original image, the image should scale for the constant size).
I try this:
<?php if (has_post_thumbnail()) the_post_thumbnail(array(400, 200)); ?>
But then I got this in my site:
<img width="356" height="200" src="http://localhost/mida/wp-content/uploads/2015/07/תמוננ-מ.jpg" class="attachment-400x200 wp-post-image" alt="תמוננ מ">
The width and height are different then what I put.
Thanks in advance!
Why don't you just use CSS? Find the lass that is used on the thumbnails (with yourbrowsers developer tool) and apply the desired size to that class:
.the_thumbnail_class img {
width: 400px;
height: 200px;
}
(note: that class name is only a guess)
however, keep in mind that images that don't have a width/heigth proportion of 2:1 will be distorted that way, so it's better so write this:
.the_thumbnail_class img {
height: 200px;
width: auto;
}
that way they will all have the same height, the width will adust automatically, keeping the proportions intact.
First set the thumbnail details in functions.php
under add_theme_support( 'post-thumbnails' );
add add_image_size('custom-thumb', 400, 200, true);
Then in your template code you can call like this
echo the_post_thumbnail('custom-thumb');
Related
I have a table for member. When i display all image in html I put and all of them are displayed with the same size but when I put class='img-responsive' they go back to their original size.
Ok I now understand what you were asking. So let me explain.
All images have something called an aspect ratio. This can be 1:1 which means for every 1px(or whatever your unit of measurement is) there is 1px on the other side. Then 1:2 so for every 1px there is 2px on the other side and 1:3, 1:4 ...etc.
The ratio you would like to have is a 1:1 ratio that is 100px * 100px.
But this cannot be forced from an image with another aspect ratio without distorting the image. Companies like facebook do this by either creating cropped versions of the image or giving it a background-size of cover.
My recommendation would be to create a div with a height and width of 100px and set the image as a background image as follows:
.divClass{
background-repeat:no-repeat;
background-size:cover;
width:100px;
height:100px;
}
Next add the following to your php code
<div class="divClass" style="background-image:url('image/location/<?php echo $imageName; ?>');">
This would allow the image to fill the div fully while keeping the aspect ratio. The downsides would be that some of the image would not be visible if the aspect ratio of the image is not 1:1 which is what you are trying to achieve. Also if you would like to change the position of the image you can use the background-position Property.
If you would like to be able to see the entire image you can add a popup box.
jQuery: How can I show an image popup onclick of the thumbnail?
Your final solution would be to crop the images or allow the user to crop the image before they upload. Below is a great plugin that allow this.
https://fengyuanchen.github.io/cropperjs/
If you want to force the width/height of the img element you can use :
img {
width: 100px;
height: 100px;
}
In case you are using some other libraries that override default css behavior you can use !important:
img {
width: 100px !important;
height: 100px !important;
}
The img-responsive class from bootstrap will set:
max-width: 100%;
height: auto;
To the image, and if you want a specific width/height - this is not what you are looking for.
I am making a project in which I am using a cover picture like Google+.
approx Full on screen but when I upload small size pictures or very large size pictures, it stretches or compress in preview.
simple tag I am using to fit in my box is
<img src="coverphotos/1291384_4846629064030_1548133592_o.jpg" height="530px" width="1024px" style="border-width: 0px; margin-top:-4px">
Very very important. I wanted to make a cover picture on my project but i am getting irritated because its stretching, and making picture ugly, how Facebook,Google+ upload a cover picture without stretching?
Preview.
http://www.tiikoni.com/tis/view/?id=479959b
I don't want it to get stretch, while uploading on fb and google its works osm
Either set the height to 530px OR set the width to 100%, don't do both together.
The picture will not be stretched and will maintain its aspect ratio. :)
This: height="530px" width="100%"
You're telling the picture to take the full width of its parent and to be exactly 530px high. What you probably want is unconstrained height on the image, but constrained height on its parent with overflow: hidden.
Take a look at this article: Perfect Full Page Background Image
Based on your link, this css fixed the issue.
body {
width:100%;
margin: 0;
}
center {
width:100%;
}
center img {
width:100%;
height: auto;
}
I want to display image in fixed size without changing the aspect ratio.
I wanna display images in this size 200px * 200px, while keeping the original aspect ratio. All the images here are larger than 200px * 200px.
I want to crop the image from center and set width and height as 200px, without changing the aspect ratio, which means we only want to display some part of the image.
Could anyone tell me how to realize it? I've tried CSS using max-width and max-height but seems CSS couldn't help.
I use PHP as server-side language. I heard someone suggest GD. Any ideas?
This should solve the problem
HTML
<div>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" />
</div>
CSS
div {
width:200px;
height:200px;
overflow:hidden;
position: relative;
}
div > img {
width:300px;
height:auto;
position:absolute;
top:-100px;
left:-100px;
}
Here is a DEMO
Wordpress uses a function to center completely the image on a thumbnail when you are editing a post so it look like this when i´m editing the post:
i´m trying to show the image that way on a wordpress page but I don´t know how to create a function like the one that uses wordpress to do that:
$s_x = floor( ($orig_w - $crop_w) / 2 );
$s_y = floor( ($orig_h - $crop_h) / 2 );
So this is how it looks in my page:
it just shows from the top, so it cuts the image, no center or resize
this is my markup:
echo '<div class="aimagediv" >'; //
echo '<img src="'.$s['project_image'].'" alt="" width="270" />';
echo '</div>';
i´m limiting the width just to show something, i know it´s wrong to do it that way, that´s why i´m looking for a function to rezise and center the image over the div.
Can someone help me with this one?
I think you're better to put this image as a background image of the div and then using css to change background-size to cover and then background-position to center...
HTML
echo '<div class="image" style="background-image:url(\''.$s['project_image'].'\');">';
echo '</div>';
?>
CSS
.image{
width: 270px;
height: 270px;
background-size:cover;
background-position: center;
}
Here's a jsfiddle showing it in action:
http://jsfiddle.net/Jhu2Y/
will this div have any other content besides the image? you could use CSS to define a height/width for the div and set the image as a background image with a background size of cover... like this:
** EDIT -- Adding PHP tags before and after since the OP was using echo **
<?php
// do all the php code here that you want before the image div
?>
<style type="text/css">
div.aimagediv {
height:270px;
width:270px;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
div.aimagediv:hover {
cursor:pointer;
}
</style>
<div class="aimagediv" style="background-image:url('<?=$s['project_image']?>');"></div>
<?php
// do the rest of your php stuff here
?>
Then if you want to make the div clickable you could use an onclick like this: (replace the div line above with this one)
<div class="aimagediv" style="background-image:url('<?=$s['project_image']?>');" onclick="window.location='page_id=42&slide=<?=$i?>';"></div>
It's container probably has a limited height. So When you set the only witdh, it will stretch the image to fit that width, maintaining the aspect ratio.
If you set only the height, it's the other way around.
If you set both width and height it will stretch the image to fit those bounds (and thus maybe screw up the aspect ratio.
So in your case, set the height, or set both (but make sure you got the ratio right)
if you want the image to center relative to it's container, use CSS to set the left and right margin to auto
I'm finalizing a customization on a small Wordpress 'Magazine' type website. I've come across a couple problems that I need some help on as I'm pretty novice to PHP.
I have a 'above-the-fold, main featured area, containing 3 images' with small excerpts of post titles.
Under the fold, I have the 'non-featured' with images displayed under the 'post titles'
The 'Featured-images' I need displayed around 270 width, 250 height.
With the non-featured, around, 260 width with 230 height. The sites structure within the 'featured' concerned area contains,
<div class="post">
<div class="p-feat-post">
<div class="p-feat-post-img">
I've tried altering the height of the images on 'featured' area within all of these classes, but non worked correctly, and in some cases, seemed to stretch the img but still didn't display any height adjustment (almost as it was blocked, by the 'post title-area-box' underneath it (Then why would "a img" work?)
The only alteration that worked was defining a height within the genera' 'a img' tag;
a img {
}
But that also changed the height of the non-featured. I've tried
.p-feat-post-img, a img {
}
Can anyone assist me with the code on specifying for just the 'featured area' image? Thanks for any help!
For Non Featured Image:
a img {
width: 150px; //You can modify accordingly
height: 150px; //You can modify accordingly
}
And for Featured Image
.p-feat-post-img, a img {
width: 350px; //You can modify accordingly
height: 350px; //You can modify accordingly
}
Make sure your image has been changed to fit the desired height and width of the divs. This seems pretty simple though:
.p-feat-post-img { background:url(/filepath_to_image/name_of_image.png) no-repeat; width:270px; height:250px;}