I am working with some historical photos, and there is no standard size. Resizing is causing many of them to look smooshed, so they are not scaling correctly. These are in a Bootstrap carousel, so if the height is not the same, you get a jumpy page. So I got thinking, why not keep the original size, and then merge it, to a transparent layer, that is the correct size.
I know I need to at some point convert a JPG to PNG for the transparency to work, what I do not know, if such an approach will do what I want, keep the image to scale, stop the page bounce, and still keep the whole page responsive.
for example, if the main image is 700x300, and my transparent image is 800x600, will the merge be 800x600 with the "fill" being transparent. Or is there a whole different way to do this?
Thanks,
Dave
This idea does work, but refined my thoughts. What I ended up doing to save me a lot of recoding, was to make a transparent image of the size needed for the DIV that holds the image. This kept every thing as it should with just the smallest bounce, and that is from the caption, which will be easy to fix.
I know there have been a lot of posts, in many places about how to do this with the Bootstrap slider, so here is just another approach, that is simple. If you want it to be a clear background make sure you make it a PNG, if you want a color background, make it the color and can be JPG, GIF, or PNG.
Thanks,
Dave
Related
I'm trying to recreate an effect being used on pinterest at the moment to preload images. When you go on the page you'll notice each image has its own colour background that's been selected from the pre-loading image. How would I go about creating this effect?
Any jsfiddle examples of possible solutions would be hugely appreciated
Interesting idea.
May not be exactly what you are looking for but PHPthumb makes a thumbnail of an image on the fly. A very small thumbnail that has been blurred will only be the whitewash, background, or color tone of the image.
Clearly there will be a need to cache the color images to remove potential performance issues.
ImageMagick http://php.net/manual/en/book.imagick.php would be required to do the image processing on the server, with phpthumb.
other php image processing options are documented http://php.net/manual/en/refs.utilspec.image.php
I'm currently struggling with different resolutions when building my gallery-application. I've realized the problem: the photos can be in entierly different resolutions, or taken in landscape/portrait.
If I force the images to a fixed resolution - they are likely to be viewed as stretched.
If I don't: I can expect something like this (example of 6 different images with loose resolution, only fixed witdh):
When I'm actually looking for something like this (6 images with same resolution):
(these two galleries are actually running the same code)
I'd appreciate any suggestions on how to make this as pain-free as possible for the viewer. Thanks!
If you care anything about the artistic minded photographer, don't crop the image.
Resize them to a max-size (either width or height) to a specific measure, 400px, and place them each in a square div.
I think you're talking about image dimensions (not resolution, which is number of pixels in 1 inch).
To get th thing you want:
(1) Choose a width-height ratio that you want to show the image
(2) Cut of the extra portions of images to fit the ratio above (u can use GD library for PHP)
For example:
To make all portrait photos become landscape photos, cut off the top and the bottom sides. Rotating the portrait photos to become landscape is also a solution, but this won't be nice to viewers, coz they'll have to twist their necks to see the photos.
If you do not want to cut anything off, but still want to have as little whitespace on the screen as possible, you need to find an optimal arrangement of the images in unaltered form. This is a very difficult (NP-complete?) problem, but you can cut some corners if you want.
Looking at the images you posted, you could display five of them relatively cleanly together like this: put two portrait ones below each other, and add three landscape ones vertically stacked beside the portraits. If you scale them so that the height of two portraits is equal to the height of three landscapes, they will look more or less the same overall size.
You can find "pretty" screen-filling stacking methods for common aspect ratios of cameras, e.g. 16:9 and 4:3, and work off that assumption.
The gallery thumbnails have fixed dimensions (and fixed weight/height ratio), but source images have variable dimensions (and variable weight/height ratio). Here you have these options:
1- Stretch source images to thumbnail dimensions.
2- Add empty spaces (e.g. white) to the source images.
3- Crop extra spaces from the source images.
Demonstartion
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 am sure I could somehow figure this out but it's just taking me way too long since I am not a PHP guy. Hopefully someone can set up the script for me in minutes...
So here's what I need to do:
I transmit 2 pictures from a smartphone to a webserver. These 2 images need to be merged (watermarked). They differ a little:
picture is a 2 megapixel jpg (holding a photo)
picture will be a png of 480x800 pixels with a transparent background (holding a simple finger painting)
Now I need to merge these images. The 2nd one (png) needs to be scaled to the 1st one's (jpeg) resolution.
Please note 2 things:
I can only use the GD library that is installed on the server. Imagick or alike is not available
I am well aware of the fact that the 2nd image's quality won't be brilliant. That's okay.
So could anyone help me out on this? Like I said, I've been messing around with a couple of GD functions but progress is far too slow. I guess I found the required functions with imagecopy and watermark. But I don't find the right way to put 'em together.
Thanks in advance,
steff
Thanks a million
A few months ago i posted a function that does that, since the code is quite big i will just link my post, check it out here. Make sure you don't do this onfly, it will overload your server, save the watermarked images or at least cache them.
If you also need to resize the original or watermark, i also posted a function to do this here.
I don't know if this is even possible with PHP, but I figured if it is, someone here will know how. I'm currently working on a project where users can customize a full body main avatar to be used throughout the site. There are a bunch of different face, hair, etc transparent png images that can be selected to make their custom avatar. I have this working great, but here is the hard part. I want to be able to use the face, hair, and beard (if male), and automatically create an 80x80 image that will be used as their small avatar for forum posts, etc.
There are a few obstacles with this. First, all of the images are 187x404 (big amounts of the image are transparent, the character body image is achieved by stacking the images, so a face image isn't actually that big). For this to work, the images would effectively have to be automatically cropped so that all of the extra space was removed and the actual face, hair, or beard part showed in the 80x80 spot.
The second issue is that some of the hair or beards (when placed on the full-size face image) would extend past the 80x80 and be chopped off. So the image would have to be pieced together at full size, and then resized to fit in 80x80.
I know the basic way of combining the 3 images into one (Combine 2-3 transparent PNG images on top of each other with PHP), but that is as far as I've gotten. If I'm crazy and this isn't possible then tell me. I'm probably way overcomplicating this, so if you see and obviously easier way to achieving this, I would love to hear it.
I think you need to decide first, cropping, resizing or a combination of both (cropping to a bigger square and resizing that).
Anyway, if you already have the images combined into one, all three options are easy to do in php. Take a look at imagecopyresampled().
The easiest way is just to always fit the face/hair/beard in the same area of the image. Then just crop that area out.
If you must, you can store extra data for each image specifying a rectangle in the image that must be visible in the small avatar. Then take the maximum extremities of these rectangles in all the images you compose, and crop+shrink that down to your small avatar size.
However, be aware that resizing PNG images by a few pixels (e.g. 83x83 -> 80x80) can substantially reduce the quality, particularly for images with lots of defined edges. This is because there are many pixels in the new image that are [nearly] evenly split between 4 pixels from the original image, and in images with sharp edges this leads to blurring.
So, shrinking an image to fit a portrait is not just difficult but also reduces quality. I'd cut off the beard instead!
I may be oversimplifying this, but can you try:
Keep track of max face size dimensions pre-compositing.
Output the composite image to a temporary file.
Crop square of largest values from step 1
Resize cropped image portion to 80 x 80