Hi Im using the_post_thumbnail for the nivo slider, my issue is that I cant seem to find a nice easy way to automatically resize the images to exact dimensions.
When I use add_image_size it doesnt stretch it correctly, it keeps the constraint on. I dont want cropping or anything. I just want the user to upload the picture and not have to do anything after that.
Its probably a stupid but I have googled it and even though there is lots about it, including various plugins, I cant seem to find a solid answer to this.
Thanks
I think you need to clarify your question. If I understand correctly you want the uploaded image to be the exact image without cropping? Make sure that the upload is saved before calling the_post_thumbnail function of the nivo slider. That way you have the raw image to manipulate before the function gets it.
The add_image_size()-method has a flag for the crop method you wish to use. both of them will keep the proportions of the image intact however.
You could extend the functionality or build your own plugin to handle the resizing in the way you want - you may want to take a look at /wp-includes/media.php and a simple resizing class like https://github.com/mdular/ReSample.php/blob/master/ReSample.php
I'm not a big fan of distorting the image proportions though. If the client is unable to differentiate between a portrait or landscape aspect ratio then cropping the image rather than stretching it seems like the more elegant solution in most cases.
For a quick & dirty solution to your problem though i suggest the following:
add the image size and contrain it by the width OR height to fit your sliders width OR height (this example constrains only by width):
add_image_size( 'slider-image', 760, 9999 ); //760 pixels wide, "unlimited" height
when outputting the image tags, force the dimensions to 760 x 474 in the image tag
< img src="" width="760" height="474" ...>
This will leave you with image files that are potentially taller or wider than what you want but will be forced to the set dimensions in the browser, and therefore fit the slider. It's dirty, yes, but it will work with the tools you currently have.
Update
in response to your comment: you can construct the image tag yourself by getting the raw image info.
1) grab the post meta, like so (assuming the_post() is already executed, it should be if you are in the while-loop):
$meta = get_post_meta($post->ID)
2) check for the thumbnail id to avoid empty output (and do steps 3 + 4 inside the if-block)
if(!empty($meta['_tumbnail_id'][0])
3) grab the actual thumbnail raw data - be sure to fill in the 'THUMBNAIL VERSION' (size) you want ('thumbnail', 'medium', etc.. or your own if you used add_image_size() in your functions.php)
$image = wp_get_attachment_image_src( $meta['_thumbnail_id'][0], 'VERSION');
4) construct the image tag:
$image[0] = the src url
$image[1] = the width - you may use this
$image[2] = the height - you may wish to force this to your liking
hope this helps :)
Related
I am a newbie to web development and am trying to build my first website. I use PHP, Jquery and Bootstrap3 for my development. I want to add a Faceebook like cover photo upload and reposition feature on my site and it's been bit of a head ache. I have implemented all the features successfully by taking help from tutorials available here and here, but both of them are not perfect.
In both the tutorials, everything works fine until the final stage where you save the new repositoned image.
In the first approach, upon save, the new position of the image, the height and width of the container div are taken as inputs and a new image is generated using imagecreatetruecolor($width, $height);. The original image is saved separately and used if you want to reposition again.
In the second approach, simply the new position of the image is saved in the db and the same is set as "margin-top" for the (so called) repositioned image on page load.
Problems
The first approach is actually doing a good job by saving the images separately. However, the issue here is, the dimensions of the new image are set as per the dimensions of the container div. Since my container div is responsive, the height and width vary on screen size, and so does the actual size of the image. This is a disaster because if you crop the image on a mobile screen, the width is set to 200px and the same image is loaded on large screens, where the container width is close to 600px. It creates an empty whitespace.
The second approach is not doing anything but position the same image using css. The original image of big size is unnecessarily loaded every time.
I have implemented the first approach and made a lot of changes to fit my needs.
The problem is better illustrated in this .gif image on Imagur. Also please refer my other Stack Overflow question Scale down images effectively without losing aspect ratio or quality in php for more detailed explanation.
I have been struggling for more than a month now to figure out how to effectively crop the new image and save it so that it is consistent on all screen sizes.
I hope some expert can give me a solution for this so that I can launch my dream website without further delay.
Thank you
You don't have to generate a new image if the size of the screen changes. You can simply use percentages to maintain the original aspect ratio of the image.
You simply need to set the container to whatever width you want, then don't set the height, and set a child img to fill the entire width of the container. The height of the image will automatically scale to maintain the original aspect ratio:
div.aspect
{
width: 75%;
}
div.aspect img
{
width: 100%;
}
JSFiddle
I've had an issue with importing images from Blogger to Wordpress, and somehow it used all medium sized dimensions for my inline post content images, which are way too small.
I've tried to resize my medium size dimensions in my Wordpress media settings, and then ran the Regenerate Thumbnails plugin, but for some reason the images in my blogger imported posts are still too small (using the old medium image size dimensions).
I've been trying to think of a way to fix this, and I think the easiest method would be to just search and replace in post content wherever there is an image tag that has dimensions on the end, like:
http://example.com/wp-content/uploads/2014/05/Comfy-Cozy-Couture-Design-Decoded-163x300.png
And replace that with:
http://example.com/wp-content/uploads/2014/05/Comfy-Cozy-Couture-Design-Decoded.png
By means of some sort of MySQL search and replace using REGEX. I want this to work no matter the image filename, and no matter the dimensions on the end.
So:
http://example.com/wp-content/uploads/2014/05/an-image-filename-123x456.png
would become:
http://example.com/wp-content/uploads/2014/05/an-image-filename.png
And also work regardless of extension (png/gif/jpg).
In an ideal situation, I wouldn't remove the dimension entirely, but just upsize the dimensions to my large media file size (which is max width: 600, max height: ∞) maintaining the same aspect ratio as the old dimensions. But I feel this sort of query is much more difficult. And I believe my user uploaded all web ready sized images to begin with.
Has anyone done this before or know of a fix for my problem? Or know of another simpler method without re-importing 2000+ posts from blogger?
Thanks in advance!
EDIT:
Or if someone knows why Regen. Thumbnails wouldn't work. My images are attached to the posts, but here is what my image tag looks like that's getting spit out:
<img alt="Comfy Cozy Couture" class="aligncenter size-full wp-image-3654" src="http://example.com/wp-content/uploads/2014/05/Comfy-Cozy-Couture-Design-Decoded-163x300.png" height="1100" width="600" />
It's odd because it has the correct dimensions in the width and height attrs but the image source has the old hardcoded dimensions in the filename.
Also previously I tried to do this all with JS but i wanted a more permanent solution. Here's what I was doing with JS:
$('.entry-content img').prop('src', function (i, v) {
return v.replace(/-\d+x\d+\.(jpg|png|gif)$/, '.$1');
});
I was able to perform a similar search and replace using the WordPress Search Regrex plugin (https://wordpress.org/plugins/search-regex/) and the following search pattern:
.-\d+x\d*.
If you try this, put .-\d+x\d*. in your search pattern and make sure you select "Regex" in the checkbox. I replaced the pattern with nothing (so essentially removing the "-###x###" portion of the string).
The plugin will allow you to preview the results before submitting. Search will show you what your pattern is doing. Replace will preview the replace. Replace and save does exactly what it sounds like :-)
How does pinterest rescales their images? Even if you upload a 16x16 icon, it will rescale it but make it look smooth.. Does anyone know how they how their resize mechanism works?
The example you provided looks like they simply set the height of the image to be the height of the container, i.e. in the height attribute of the <img> tag. I wouldn't say it looks smooth at all, plus the aspect ratio is obviously way off.
But if you want to resize images in PHP yourself, there are several image libraries like GD. Take a look at the imagecopyresampled function (there is some example code on that page) or search for some tutorials.
i have image with various size. and i also have various container to place those image.
example : i have 680 x 1024 image that will placed on 500x500 container without cropping.
so i thought that i will need to build image with container size, than put resized image on top of it.
result that i expected is something like this
or this
how the best way to achieve this on PHP or wordpress?
I wrote a plugin, currently at WordPress plugin repository:
JResizr
This plugin have ability to override default worpdress behavior and disable croping image but try to resize image to fit rectangle container size and fill space with background color. You also able to choose background color to use.
There are several ways to accomplish this. One alternative to javascript/php, if the images are roughly the right size, is just use CSS, specifically background-size: contain
contain
This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.
You can experiment with it at http://jsfiddle.net/RxTLS/
Keep in mind this is mostly supported, although IE8 and below do not. I believe there are some polyfills our there though if you're worried about IE users.
This solution is only ideal if the images you are uploading are close to the size they will be displayed however. Trying to do this with images that are over 3000 pixels wide/tall is not advised for several different reasons.
In that case, you'd want to shrink them in PHP first. If you're uploading the images through Wordpress then you can use add_image_size in your functions.php and the images will be automatically resized when you upload them. Alternatively, you can do it manually in PHP as well and there are plenty of tutorials on how to do that out there. I'd just google PHP image resize.
In your html where you have <img> tag, add a width attribute, and set it to 100% that should auto resize your image to its containers size
<img src="imageNamw.jpg" alt="imageAlt" width="100%" />
You could write a simple Js file that would accomplish that.
I have done such thing before; So basically you compare the height and the width of the image in its container. then if the height is longer than the width you set the height to 500px and set the width to auto;
else if the width is longer than the height you set the width to 500px and the height to auto;
else you set the width and the height to 500px;
set the container vertical align to middle and text-align to center in css and that should do the trick;
You can also try a simple timthumb library to resize images in any size.
Please check the timthumb library code here :
http://timthumb.googlecode.com/svn/trunk/timthumb.php
In WordPress it would be simply by using their image_resize function
image_resize( $file, $max_w, $max_h, $crop, $suffix, $dest_path, $jpeg_quality );
where you would set the file, width of the container, height of the container and false (as you want to resize, not crop). The others are optional and you should fill them if you have special needs for the new file destination or name or quality. If you entered everything correctly, the function should return path to your newly resized image.
Note that with WordPress you can actually do this automatically when uploading pics so then later you just retrive the already resized picture - take a look at add_image_size function.
I'm running a small application which has an 70% width, and 90% height value, as the rest of the screen is menus.
In this space I need to echo images which isn't problem, but if the image is too big it creates an overflow. If have fixed properties for the image depending on what the images' original size is, it will destroy the quality or look of the image. Can someone tell me how it is possible to echo the image without overflowing or destroying the images quality?
Something along the lines of how Facebooks image viewer works.
Don't constrain both width and height then.
Constrain one or the other and let the browser resize the image according to its ratio. If you tell the browser to resize your 100x100 image to 60x2, it's going to look terrible, no matter what. But if you tell your browser to resize your image to height 60, it will automatically make the width 60 to keep the image's proportions, and it won't be distorted.
If you want to go with an image gallery, you can. Here's one that looks similiar to facebook's from a quick google : http://phpimagegallery.com/