Creating a responsive photo-gallery

Good Afternoon All,

I am pretty new to we-design and am building a site for my artwork. I am stuck with how to properly build this photo gallery and have it positioned where I need it to be. The gallery must be positioned perfectly because it needs to line up with the background image that acts as the frame for the gallery images. I have designed this based on % in the attempt to eventually make it responsive to four different screen-size ranges. When I test what I have so far it just falls apart when it hits the different browsers. It does fine in dreamweaver’s live view but when I test it in any browser either the background image won’t show up, or the images stack up on the left side of the page, and it does not respond at all when I shrink the screen. I know I need to learn a LOT and am studying web-design everyday, but in the meantime I need to get this site up while I continue to learn. ANY and ALL help is so so so appreciated I am just stumped. Thank You in advance!

Colin

Here is the jsfiddle link to view the code. If this post is not formatted correctly or will somehow deter people from answering PLEASE let me know.

http://jsfiddle.net/squigworm/FrsGp/3/

I corrected some missing " errors in your code, but it’s hard to see anything in jsfiddle. It won’t find the images of course, so it just shows a bunch of alt-texts.

Can’t you put the page somewhere online and post a link?

Hey guido2004, Thank You for responding. I have put this code up on my site www.colinbarclay.com Each picture is represented by a green box and the background - solid blue. Just let me know if there is anything else you need.

Colin

What is wrong with that page?

Hi squigworm. Welcome to the forums. :slight_smile:

The first problem is the fixed width on the .page_container div. With that in place, you can’t have any responsiveness, so the first step is to remove that width. You can center the background image if it is something fancy … I assume the blue bg at the moment is for test purposes? (Otherwise, just use a color instead of an image.)

hey guido2004, I was able to work on it after you responded and realized I had something wrong on my end with the main_full css file being linked. I fixed that and realized the background image is coming up just fine. I then realized the images are only collapsing to the right side of the page in Firefox. I am now in the process of trying to make it responsive. thank You again for taking the time to look and respond. if you see anything I should be doing different please let me know. Thank you again, Colin

Hey Ralph.m, Thank You ! and thank you very much for responding. Yes, the blue background page is just for testing purposes. Ok, so I will remove the fixed width all-together, and will center the background page, as it is indeed something fancy :). In regards to centering this image, would position: center; - or - margin: 0% auto 0% auto be an appropriate way to do this in conjunction with the responsiveness? Thanks again for the help !

Place the image as a background image on the containing element. So the CSS would look sommat like this:

.page_container {
  background: url(/images/bg-image.jpg) no-repeat 50% 0;
}

The 50% value will center the image horizontally.

As a rule, bg images are not all that responsive, though there are things you can do about it, such as this:

http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios

Thank You again for the help ralph.m, much appreciated. man…the thinking that goes into this stuff can be so brilliant ! I will implement the code you suggested and work with the fix from voormedia.com (which I now have bookmarked) when I get home in a few hours. In regards to the 21 individual gallery images that go inside the gallery div. I have 4 folders in my root directory. One folder is for the gallery images (and their roll-over versions) saved at 100%, the next is for the same images saved at 85%, the next 60% and the next 35%. I have also set up the css media queries (large_css, medium_css, and small_css) to those percentages as well. I have TRIED to set the .html to call a different css file depending on the screen size which will come along with the correctly sized versions of the images. Is this logic correct in terms of getting the different size images to show up when the screen size changes ? or do the images need to be re-sized a different way to work properly ? Thanks again ralph.m.

You can actually just set a %width on images, and the browser will resize them itself, so you can just use the one same image in all situations. (Older PC browsers tended not to render the images so well, but not sure how they handle this now, but I assume it’s OK, as this is a common approach.)

The downside is that you are asking people on small screen (mobiles etc.) to download images that are larger than needed. So some clever people out there are working out ways around this. It’s still a developing area (the perfect solution hasn’t arrived yet, I’m pretty sure). Here are some useful links, though:

http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
http://css-tricks.com/which-responsive-images-solution-should-you-use/
http://adactio.com/journal/4997/
http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/
http://retinajs.com/

All the same, if someone is viewing a gallery on their mobile, they’ve got to make a decision whether it’s worth the downloads or better to wait till they get home. I’m not so worried about the image issue, but it’s still worth finding a solution.

Once again…Thank You for taking the time to help me, really appreciate it. I am finding out as I go that responsive design is still very much in the early stages of its inception and there are not yet clear solutions for everything. I was initially going to try and design this gallery for all size devices at once but I found out that is so much more work then I could have ever imagined, so I have had to put the mobile size design aside until I can at least get the larger size orientations functioning clean and fast - it is amazing how much there is to consider, ie… what you mentioned above in regards to mobile browsing. I am making great progress, and I do have a few more questions but I think I should read these articles and see what I can accomplish first. Thanks again ralph.m. Hopefully the next thing I post on this thread will be the link to a finished product!

Hey ralph.m, I was wondering if you might know why - www.colinbarclay.com - does not work properly in firefox ?. I have tested it in chrome, safari and firefox. When I open it in firefox the padding goes awry and collapses to the left and down. I am going to continue searching but thus far I cannot find a clear answer as to what firefox in particular does not like about the code. I have the code up on jsfiddle - http://jsfiddle.net/squigworm/Xfcdu/ -

I don’t see a problem in FF (Mac) but it might be because of your % width on .gallery_container. Given that the page is not flexible at this stage, just set a px width on that container, as you don’t always know otherwise how the browser will calculate % into px.

Hey ralph.m I am starting to think it is something local with my firefox. You, and about 5 other people say they see no problem in firefox. …I spent the better part of two days trying to figure out what was wrong with the code - and looks like nothing was wrong all along … wowww … Hey live and learn. Those links you sent are awesome, I am starting to understand a litttttle bit more about the responsive design style. I have some work to do before I ask anything else or try to go any further. Thanks again for all of your help, it is much appreciated.

Could well be. Make sure to refresh the page and/or clear the cache. Browses store older versions of a page often, and you sometimes need to flush it out before you see the latest version.

Hey ralph.m, The site is up at http://www.colinbarclay.com . I was wondering if you wouldn’t mind taking a look and seeing if you could spot any ways to speed up load time. I have the current code up at [URL=“http://http://jsfiddle.net/squigworm/6ZLyC/”]http://http://jsfiddle.net/squigworm/6ZLyC/ So far other people have spotted room/need for improvement in the following places - slow load time, IE has the default link borders showing up (I am about to work on this one <-) and one person who opened it in firefox is seeing the images collapse to the left of the screen. If you have any suggestions I am al ears. Thanks again for all of you help.

The first thing that’s really obvious is that the page’s background image is way too big (downloads very slowly). It’s actually about 2.2 MB in size, which is about 10 to 20 times larger than it should be for a web image. If you have Photoshop or Fireworks, run it through Save for Web, and that will reduce its size massively.

Yea that is pretty big. I wasn’t sure how much that would effect it, but clearly…quiet a bit … Thank You I will alter the image size with Photoshop