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 :-)
Related
I'm using an image scraping feature developed here: https://github.com/morshedalam/url-scraper-php
They are using this regular expression to find images:
private $img_expression = '/<img[^>]+src=([\'"])?((?(1).+?|[^\s>]+))(?(1)\1)/';
This is fine, however, it returns every single image (including tiny ones). Much like Pinterest, Facebook etc. I'm only interested in getting images that serve as thumbs i.e width > 200px. I realize that the dimensions of an image might not be defined in the html source.
How would you do this?
Cheers.
You need to download the extracted images, get their size and select those that are large enough.
Interestingly, there's an SO answer just for that: php get all the images from url which width and height >=200 more quicker
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 :)
I have various images in my Photo Gallery. But when I display the photos of a particular album, it is very difficult to maintain the image size with its position. If I leave the image size(height or width) dynamic, the images are positioned here and there (scattered).And when I fix the size of the images (say height:200 width:200).. The thumbnails looks so dull. What would be a solution to this?
I tried to calculate the height and width of every image and then position them according to it. I am having problems , but I think I can make it work that way. Is there any other better option.
I want the images to be positioned like in this website http://gses.snu.ac.kr/eng/ .
UPDATE
And my images can be added or deleted dynamically.
There is not really a way to both vertical & horizontal align random images with CSS. Believe me I've tried everything. Ultimately all you can do is make a standard size "box" that fits the largest image you expect to have and display the image in it. That, at least, will give you a sense of order.
Here's an example of what I mean:
http://www.marianoagency.com/payment
I'd love to be able to place the image directly in the center (easy with tables), but I've been unable to accomplish it with pure CSS due to the variable size of the dynamic images.
I'm trying to make a simple app which gives a user a standard background/template image onto which they can place their logo/brand/whatever. I've had a look at a few jQuery plugins which allows the user to upload and crop an image, and most of them seem to work by posting the x and y coords, and the width and height, to the server.
I'm able to then use imagecopyresampled() to merge the image with the background image, but (a) the user's image seems to end up really skewed, even when I hard-code dimensions that I know should work, and (b) I need to position the uploaded image pretty much dead-center -- what's the best way to achieve this?
Any help? This is my first time using GD. I'll add my own code if required, but I'm messing with the different GD functions, so I've butchered the one I had before. Will reproduce it.
Thanks
I'm working on a drupal6 site and I've got a page that shows thumbnail images (linked to full node content).
The images are currently allowed to have a dynamic width based on the parent div, and are both vertical and horizontal.
the problem I'm having is that there is a max-width applied to these images, which crushes my horizontal images.
the question I have is: how can I use PHP to get the image element which has a unique ID, discover if it is horizontal or vertical and apply a CSS class based on the image's aspects.
I'd need to either put this in my template.php as a pre-process, or in my page.tlp.php.
I can't use Jquery/javascript because I can't risk the FOUC. I also and developing this site as a multi-site drupal instal per instructions, and I'm not allowed to have anything outside my own site directory folder.
I've looked at getimagesize() and getElementsByTagName() but I'm just not sure how to put it together as my PHP is pretty limited. I'm hoping that someone here can point me in the right direction VS giving my the answer.
Thanks
Stephanie
Basically use getimagesize to extract the width and the height of the image. Then compare the two. If width is bigger than height, print image-horizontal, else print image-vertical. Here is a sample code that will do the job. It uses list to get just the first two elements of the returned by getimagesize array which are the widht and the height. Then inside the echo statement, we do the check and print the appropriate class:
list($width, $height) = getimagesize($your_full_path_to_image);
echo '<img src="'.$your_url_to_image.'" class="'.(($width > $height) ? 'image-horizontal' : 'image-vertical').'" />';
As a follow up, I'm sorry to say I never got this working in the way I'd laid out in my original question.
I'm not sure if it wasn't possible, not possible in my specific instance, or if I was simply unable to figure it out.
I ended up using straight css to do the scaling and faked a consistant width by adding backgrounds