The current photo setup needs to be re-evaluated. I am very impressed with how it is as of right now, but there are some things that need to be looked into.
Issues:
1. The original is being stored twice per image. One has a name ending of original and the other one has a ending name of stock. You can see that they have the same resolution but the stock version has slightly less quality. I hate to say it but I'm very opposed to the stock version as it doesn't really serve much of a purpose and stores an "extra original" which can take a lot of space as thousands of photos come in.
2. A directory for each image can build up a lot of directories. Maybe it's a rumor but I've heard that too many directories (tens of thousands) can have some performance issues. But I can't confirm that.
Another idea is to have folders created for the user instead of the gallery. This way we could have a structure of domain > original > josh > awesome-photo.jpg
While this can help with performance and shorter url's, another big advantage to this is that it is a bit more logical in the sense of finding photos. Looking into a folder named "362924" would be more difficult to find, especially with a high number of folders with the current system. So from my point of view all around the directories need to be simplified.
3. Images blur in some cases. This is because the images are stretched due to attempting to fill in the entire screen. I think the idea of using a 100% width is a good one, but it needs some tweaking. Here is an example of the images blurring:
I came up with a proposal for addressing this issue as seen here. It uses the max-width/height properties. I made a 30 second video showing that using an img tag can actually work just fine while still being responsive and not stretching when the size is smaller than the box that it's in. It even worked in Internet Explorer which is a hard browser to appease.
So what I'm proposing is swapping from the background property to the img tag with the use of the max-width/height set to 100%. This will allow the image to be responsive, 100% of container use (if appropriate), and for smaller images it would not stretch. In addition to this the image would be more flexible to CSS control like borders, box-shadow, border-radius or any other CSS code that affects images.
Extra Proposals:
1. Option to choose image directories. This would allow for the admin to have better image url's if they chose to do so. Here's a screen shot showing some variations:
So rather than having a directory of /media/com_easysocial/photos they could simply have it set as /photo which would be nice.
2. Edit Image Titles Upon Clicking Them. Panoramio is an excellent example of this. It makes image title/description editing really easy for photo owners!
3. Consider making the images display bigger. Here's an example where it looks quite nice.
4. Manage Image sizes. Some of us use different templates with different widths. So why not allow the admin to determine/calculate what the best image sizes are? (for the small, medium, large) Those who don't want to figure it out can leave it at the default settings.
5. Better practices for Image URL's which we touched on a while back. It would be good to evaluate eventually. When people send links across the internet they don't like long ones as much.
6. Image Preview as one uploads. FineUploader uses a cool method to pull this off. This would allow the user to title their images before the image uploads considering that they can see what they are about to upload.
I know this is a big post, but some of these items are pretty serious in terms of having a modern gallery. Especially duplicate originals and too many directories created. I'm stating this now so that this doesn't become a big issue in the future of ES. I really do appreciate the work you folks do. Good practices should be addressed sooner rather than later.
Issues:
1. The original is being stored twice per image. One has a name ending of original and the other one has a ending name of stock. You can see that they have the same resolution but the stock version has slightly less quality. I hate to say it but I'm very opposed to the stock version as it doesn't really serve much of a purpose and stores an "extra original" which can take a lot of space as thousands of photos come in.
2. A directory for each image can build up a lot of directories. Maybe it's a rumor but I've heard that too many directories (tens of thousands) can have some performance issues. But I can't confirm that.
Another idea is to have folders created for the user instead of the gallery. This way we could have a structure of domain > original > josh > awesome-photo.jpg
While this can help with performance and shorter url's, another big advantage to this is that it is a bit more logical in the sense of finding photos. Looking into a folder named "362924" would be more difficult to find, especially with a high number of folders with the current system. So from my point of view all around the directories need to be simplified.
3. Images blur in some cases. This is because the images are stretched due to attempting to fill in the entire screen. I think the idea of using a 100% width is a good one, but it needs some tweaking. Here is an example of the images blurring:
I came up with a proposal for addressing this issue as seen here. It uses the max-width/height properties. I made a 30 second video showing that using an img tag can actually work just fine while still being responsive and not stretching when the size is smaller than the box that it's in. It even worked in Internet Explorer which is a hard browser to appease.
So what I'm proposing is swapping from the background property to the img tag with the use of the max-width/height set to 100%. This will allow the image to be responsive, 100% of container use (if appropriate), and for smaller images it would not stretch. In addition to this the image would be more flexible to CSS control like borders, box-shadow, border-radius or any other CSS code that affects images.
Extra Proposals:
1. Option to choose image directories. This would allow for the admin to have better image url's if they chose to do so. Here's a screen shot showing some variations:
So rather than having a directory of /media/com_easysocial/photos they could simply have it set as /photo which would be nice.
2. Edit Image Titles Upon Clicking Them. Panoramio is an excellent example of this. It makes image title/description editing really easy for photo owners!
3. Consider making the images display bigger. Here's an example where it looks quite nice.
4. Manage Image sizes. Some of us use different templates with different widths. So why not allow the admin to determine/calculate what the best image sizes are? (for the small, medium, large) Those who don't want to figure it out can leave it at the default settings.
5. Better practices for Image URL's which we touched on a while back. It would be good to evaluate eventually. When people send links across the internet they don't like long ones as much.
6. Image Preview as one uploads. FineUploader uses a cool method to pull this off. This would allow the user to title their images before the image uploads considering that they can see what they are about to upload.
I know this is a big post, but some of these items are pretty serious in terms of having a modern gallery. Especially duplicate originals and too many directories created. I'm stating this now so that this doesn't become a big issue in the future of ES. I really do appreciate the work you folks do. Good practices should be addressed sooner rather than later.