This is kind of a vague question, but I'm looking for suggestions and perhaps suggestions from people that have had experience with this issue. I have a PHP array of different sized images of products that I want to display on my web page with four to a row. The issue is that because they are different sizes, I don't know how to display them without them all coming out very "off".
Below is an example of a situation where it just looks weird:
I don't know the best way to position these images so they don't look "weird". Again, I know this is kind of vague, but perhaps someone has had experience with this? How do other shopping sites deal with this issue?
Thanks
Have you considered the fantastic masonry jQuery plugin?
Edit: Also available without jQuery: http://vanilla-masonry.desandro.com/
If I may, I would suggest you take a look at our service that includes image transformations in the cloud (and delivery through fast CDN).
You can use gravity based cropping while maintaining aspect ratio or face detection based cropping for reaching your desired images. Some examples of generating a 100x100 JPG of an uploaded image named 'face_top':
http://res.cloudinary.com/demo/image/upload/w_100,h_100,c_fill,g_north/face_top.jpg
http://res.cloudinary.com/demo/image/upload/w_100,h_100,c_fill,g_south/face_top.jpg
http://res.cloudinary.com/demo/image/upload/w_100,h_100,c_fill,g_face/face_top.jpg
http://res.cloudinary.com/demo/image/upload/w_100,h_100,c_thumb,g_face/face_top.jpg
Many more transformation options available.
I had answered something similar in another question, where I went onto adding an example of how to resize the images to the fixed thumbnail dimension, with option to either keep the aspect ratio (and letter box) or crop content to all thumbs are consistant.
Please have a look at http://pastebin.com/STzAxrZA and note the $maximize parameter in image_resize_jpg()
I guess you need to decide if you're trying to change the HTML (and keep odd sized images) or change the way the thumbnail images are generated
Related
I am building a website using
php 5.3,
Twitter Bootstrap
MySQL,
Which includes a few features where registered users can create their own profile, upload avatar, cover photo, update status, share photos etc.
Since I am a newbie to all the 3 technologies mentioned above I rely completely on the internet to get my job done. Right now I am having trouble in resizing, re-sampling and maintaining aspect ratios and orientation of the uploaded images using GD library.
My expectations are:
Reduce the file size of images while maintaining the quality and aspect ratio.
Maintain orientation [many images are rotated horizontally, something to do with exif I guess].
Generate 4 different sized thumbnails [30x30, 40x40, 55x55 and a large one for cover pic].
I tried many options, but haven't found a single solution which does all of this. I came across ImageMagick library which looks promising, but not sure whether it serves my purpose. Please help me with code snippets or examples related to my requirements.
P.S. If in case my question was not clear, I am trying to achieve image manipulations like Facebook and Twitter do.
Thanks in advance
My answer will not solve your problem,but will help you to know something else.You can minifiy your image size (up to 80%) and keep you images with that size.Here is a tool which you can check out.http://www.w3docs.com/tools/minimage/
I'm trying to figure out via PHP if I can do the following. Imagine I have a two images. The first is an image of a square (50px by 50px). The second image, is that exact same square, only offset by 5px to the left.
I'm wondering if there is a way to dynamically generate all the images in-between to make this a smooth looking image transition (ie in this case generate the other 4 images to make it look like it moved from left to right). This would be a pretty simple situation, however would be applied to more complex images with the exact same premises, essentially using two images to predict the mediums.
Thank you in advance for your help
php would only be a wrapper, think eval() and google it, like http://www.linuxfocus.org/English/September2001/article139.shtml
regards,
/t
I believe the best thing you could hope to do with PHP is to do a 'morph' animation, where you sample the pixels for the first image and the second image, then create a third image consisting of the average color values. Repeating this process you could create as many sub-frames as you would like, but the result would be a blurring / morphing of image A -> image B, and would only be perceived as an animation with the simplest of input images.
More complicated algorithms including edge-detection or hinted-shape tweening could be utilized and implemented, however PHP might not be the best choice for this.
You can dynamically create images with a combination of PHP and ImageMagick.
You can pass in each dimension to ImageMagick, and it will generate an image on the fly for you. Create an image for each pixel you offset, resulting (in this case) in four extra images you can use later for your animation.
So I just put up a website for my high school and realized a lot of images are stretched especially on this page
www.eriesd.org/central/central2/staff.php
What you be the best way to make the images not so stretched?
I was thinking of adding a div and adding background image with center center or 50% 50%. Also on the career and tech pages I noticed the info page doesn't load in IE but the other pages load fine has anyone else ever had this problem?
I'm basically getting the location in menu and option and calling an ajax request which loads 1 of the 3 layouts which connects to my database and gets information depending on the option and location.
Assuming that the pictures are uploaded using some kind of php CMS, the first thing I would do, is process the images correctly at the moment they are uploaded: Apart from the bigger image, you would need to generate a thumbnail that fits the size you need for that page.
I would also recommend adding a notice to people who are uploading a picture, that this specific picture needs to have a landscape format as that is what you are using on the page.
CSS solutions would be my last resort to iron out small issues.
Edit: Apart from that I would seriously reconsider publishing all e-mail addresses like that and add some pagination as the page now takes a long time to load (especially with all the images being a lot bigger than you need them to be...).
They are stretched because you specified both width and height attributes for the <img> tag. If the actual image is of different dimensions, one can see how the browser has no options but to distort the image to make it fit the specified height and width.
Just don't specify either height, or width, or both, and the images are going to be ok.
You should set the height only on the img and add the width:200px;text-align:center CSS to the anchor if you want the white area either side. Omitting the width will shrink the whitespace around the image.
<a class="image" style="width:200px;text-align:center">
<img src="http://www.eriesd.org/central/central2/images/staff/kranking.jpg" alt="missing photo" height="112">
</a>
I'll answer your first question concerning images. The real problem is that your images are not sized to fit the space you want them to fill. One of them that I inspected was a 6MP (2848x2144) image weighing in at 1.5MB. There were many more of this approximate size and dimensin. Any one of those images is larger than the entire page should be by quite a lot. The first step is getting images to the size you need them to be. Your page is nearly 19MB. Not only so most browsers do a lousy job of scaling images, you're sending a ton of extra data and making the page load very slowly for users without very fast connections. Imagine a user with a mobile browser waiting on this and chewing through their data plan! A user with DSL might need several minutes; dial-up could require hours.
If you're uploading them manually, resize them first. Figure out a size constraint and resize and crop first. If you're using a CMS, find settings, plugins, or customize it to make a smaller thumbnail version and use it.
To keep the layout looking nice and equal, the only thing you can do is either stretch them as it is now, or, even better, crop the images a bit and resize them. You can probably do it programmatically for most of the pictures, just assume that the top center is where their head will be. You have stretched picture issues all over the site though.
As for the Career & Tech pages, they're still actually being loaded (at least in the latest IE) if you look at the source, but they're not being shown for some reason, so, either you have some CSS or JavaScript issues with .post or .content. It even pops up for a second sometimes and then disappears.
If you specify only a width, the height will be set proportionally and thus prevent stretching of your images.
I was wondering if it was possible if I had an image like:
I would be able to change certain parts of the images colors. For example if I wanted the bow green and the present red with yellow stripes, would I have to make a new image that had that or is there a way to program something (elegantly) along the lines of that? I'm just asking to see if its possible and if it is, what language would be best to do this?
Keep in mind this would be a feature on a website.
That's not going to be easy the way the image is. You have no way to tell the computer which part is the bow, which part is the stripes, and which part is the box. However, if you pre-colored them, you could do a color replace using GD library or imagemagick pretty easily. You'd do this in PHP. Here are some examples of how you could do it, I'd personally go the imagemagick route.
How can I replace one color with another in a png 24 alpha transparent image with GD
http://www.imagemagick.org/Usage/color_basics/#replace
(this example even has a similar gift box as the usage case, hehe)
Try leaving the parts you want changable transparent. Then, give the div it's in a hover state with the second background color.
You could:
Use an indexed-color image and change the colors in the palette.
Use #MT's suggestion, though it kinda gets out of hand with multiple colors and jagged regions.
Pick control points and fill ("floodfill") the image through them - programmatic version of using the bucket tool.
Use #profitphp's suggestion, which is really better my last one.
Abandon compatibility and use the new canvas element while it still has the "cool" factor :)
i presume this is a web-based painting application; you'll require a human to tell you what the parts are, and where they want the coloring to be.
The issue then becomes how to perform a flood fill at the user's request.
The best i can suggest is perform the flood fill server-side, using an image processing library - handing back the image to the user:
There is no javascript ability to access pixel data of an image.
Edit: Performing flood fill with HTML Canvas
I run a site with lots of small images (www.iconfinder.com) and would like to develop a feature that can compare and recognize images. A user should be able to upload an image (icon) and then the site will respond with information about the image if it's in the database.
What is the approach to finding similar (or the same image). I know I can compare md5 of the two images, but I also want be able to find matches if the are scaled.
This is a good start if you are interested in looking at doing it in PHP:
http://www.intelliot.com/blog/2008/03/sorted-directory-listing-image-resizing-comparison-and-similarity-in-php/
There probably aren't a lot of languages LESS suited to this task than PHP. You should really look for an image comparison library with a C compatible API and figure out how to glue that into your PHP application.
Identical images can be checked with an md5sum, but detecting if somebody uploads a scaled image, which displays the same thing as the other is very hard. This requires digital image processing.
An approach is to scale down all images to a certain width (say 100px). Then check a few coordinates for the color. If another image matches a big part (say 80%), it might be the same image.
But if the image is lighter... this won't work.