I'm trying to get a layout similar to Pinterst. So far I have images that are randomly generated in php between like 125px and 400px.
This did not result in a Pinterest-like effect, where the right aspect-ratios seem to be dynamic. Does anyone know how Pinterest dynamically generates the height of their images?
<div class="pin_image">
<a href="<?php the_permalink(); ?>"><img width="191" height="auto" class="<?php echo $img_class; ?>"
src="<?php echo PricerrTheme_get_first_post_image(get_the_ID(),102,72); ?>" /></a>
</div>
They base the image width on the column width. So for example, if their columns are 200px wide, and the original image is 600px height and 400px width, they would scale the image by half to get it to fit the column width. So 600px * 0.5 = 300px height, and 400px * 0.5 = 200px width. By multiplying both dimensions by the same percent, you maintain the aspect ratio.
You need something like Isotope or Masonry
It doesn't change image height but it reorders the layout in a pleasant way.
When you resize the images, you need to do this based on the WIDTH of the image. As what you want is a fix with and a popotionate height.
For example if you have an image which is 1000 by 2000 and if your column is 100px, you need to resize it to 100 by 200. (i.e. calculate the ratio for width and apply the same to height)
You just need to set the width on the tag to that of the width of the column. The aspect ratio of the image will be kept and the height will be set accordingly.
Related
I want my images to maintain their full width and aspect ratio until they reach 600px height, at which point they crop the height (and still maintain full width). This is where it gets tricky for me because I want to avoid using background-image to accomplish my goal.
Most of my images are 1920x1080 aspect ratio, so once the screen gets smaller than 1070px, the default aspect ratio should be fine. The image auto-scales to 1070x600 for 1070px screens, or 800x450 for 800px screens, or 400x225 for 400px screens, and so on. All good.
But once the screen is bigger than 1070px, the default aspect ratio no longer works for me because height creeps past 600px. I'd like the images to auto-crop to a 600px height at this point, keeping the full width intact:
For 1920px screens: crop the image to 1920x600
For 1500px screens: crop the image to 1500x600
And so on.
add_image_size( 'jd-custom-size', 1920, 600, true ); isn't enough because at a small screen, i.e. 800px, it crops the image to 800x250.
add_image_size( 'jd-custom-size', 9999, 600, true ); creates the same problem.
I'm sure I'm not the first person with this goal, but I'm not quite sure how to google it. Most search queries just turn up basic add_image_size questions.
Any ideas?
You can use the new srcset and sizes html attributes to achieve that by just passing the cropped image src for each resolution you want:
<img srcset="yourimage-320h.jpg 320h,
yourimage-480w.jpg 480w,
yourimage-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(min-width: 480px) 440px,
800px"
src="yourdefaultimage-800w.jpg">
You can set any unit you want w and h means the real image width and the real image height.
Useful links:
https://css-tricks.com/responsive-images-css/
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
Have you looked at using the CSS clip, combine this with a media query and the solution could be css only.
#media only screen and (min-width : 1500px) {
.myimg{
position: absolute;
clip: rect(0px,1500,600px,0px);
}
}
#media only screen and (min-width : 1960px) {
.myimg{
position: absolute;
clip: rect(0px,1960,600px,0px);
}
}
Alternatively you could use javascript to get more specific and set the
$(".myimg").css("clip",'rect(0px,1960,600px,0px)');
based on screen detection of width?
I have the following code for displaying an image. It works but it doesn't change the size of the image if I change the height and width values in here.
<img src="<?php echo trim($user_data['profilepicture'])?>" height='10' width='10'>
Can somebody help me with this.
It's width and height, not weight.
How can I take an image that has been entered into Wordpress and fit it into a specific sized div without losing it's aspect ratio?
The div is 104px x 104px but the user could literally enter an image into Wordpress at any size.
I'm using the following to insert the image from Wordpress into the page:
<img border="0" src="<?php the_sub_field('logo'); ?>" alt="<?php the_sub_field('text'); ?>" />
I haven't set a width or height.
This has nothing to do with WordPress, PHP, or any other server side program, or programming language.
<img style="max-width: 100%;" border="0" src="<?php the_sub_field('logo'); ?>" alt="<?php the_sub_field('text'); ?>" />
As long as you set max-width and no other widths or heights the image will be no larger than the containing element and won't lose aspect ratio.
set only one parameter i.e. height or width. You will never loose the aspect ratio of that image. You can set the width of the container and make image width to 100% or you can directly add width to your image, but don't set both parameters to get the correct aspect ratio.
Use http://phpthumb.sourceforge.net/
here you have a lot of demons how to use it
http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php
Set the images CSS max-width and max-height values to the width and height values of the surrounding div.
<div style="width: 104px; height: 104px;">
<img style="max-width: 104px; max-height: 104px;" src="myimage.jpg">
</div>
I'm not familiar with Wordpress, but wherever you can change these CSS values, do it and it will fit the div.
I'm using a BB code function to allow members to post images and such in comments and topics. My problem is if an image is too big to fit the table, it expands everything past the width.
Are there any workarounds for this? Either in the table or the td? A predefined width and height for the image won't work because I'll never know how big each image is. Is there a way to make a max width/height for the image or something along those lines?
Here's a bit of code you can run to force a maximum width if the images are being stored on your server:
$maxWidth = 450;
$info = getimagesize("../path/to/image.jpg");
if( $info[0] > $maxWidth )
{
print '<img src="../path/to/image.jpg" width="' . $maxWidth . '" />';
}
else
{
print '<img src="../path/to/image.jpg" />';
}
The height will scale to the width, so nothing gets too stretched out.
Edit:
If you want to actually resize the images on your server, I have a PHP library that might be of help to you, found on my github, here.
If you want to do it all clientside, without storing the image locally, you should be able to create a new Javascript Image(), set the src to the image and then determine the width and height of the image through Javascript's built-in methods. You could then dynamically alter the width/height of the <img> element to be no larger than your pre-determined width/height.
Set the TD a max height or width and set the img to 100% width/height
I'm listing photos using MySQL:
<?php
$a = mysql_query("select * from x");
?>
<?php while ($w=mysql_fetch_array($a)) { ?>
<img src="<?=$w[url]?>" alt="<?=$w[name]?>" width="150" height="110" />
<? } ?>
How can I can maintain the aspect ratio? An image with dimensions of 150x500 pixels becomes very distorted. How can I fix this?
Just specifying width-only or height-only in the HTML will keep the ratio.
Or you can actually resize your photos dynamically with a script like the Smart Image resizer: http://shiftingpixel.com/2008/03/03/smart-image-resizer/
you can get the image size using php:
list($width, $height) = getimagesize($file);
Try something like this:
$ratio = $height / $width;
$new_width = 150;
$new_height = $ratio * $new_width;
Just specify one dimension (either the width or the height but not both) and it will keep the ratio. With CSS you could also specify just the maximum width and maximum height:
<img src="<?=$w[url]?>" alt="<?=$w[name]?>" style="max-width:150px; max-height:110px" />
If you just specify a width, all browsers (that I know of...) will scale the image correctly.
However, you might want to consider making thumbnails if you´re going to load a lot of images.
Setting both the width and height of an forces the browser to rezise it to match what you tell it to.
Setting only one (either width or height) resizes it so that the image's ration is kept.
You can use the PHP function getImageSize to get the image's actual width and height, and then rerform a proportional resize based on height / width = new_width / new_height
You could use a resize script to resample (resize) the image.
A good script is located here:
http://shiftingpixel.com/2008/03/03/smart-image-resizer/
To use:
<img src="/image.php?image=/img/test.jpg&width=150&height=500" alt="Test" />
I you plan to always use this height/width you could insert the resampled image directly in the database. This way you won't waste space on your server. If you plan to use many height/width or change these sizes in the future, you should keep the originals as you do now.