Quadratic DIVs with not quadratic photos?

[luftikus143]

Hi there,

I have a nice collection of photos on my photoblog, for which I created as well an archive, which shows the last 50 or so photos at the same time.

Now, I would like to have the photos displayed all in the same size (although they are originally in different sizes, some cropped, some landscape, some portrait).

Is it possible via the use of CSS to "squeeze" the photos in for example a quadratic shape without deforming the photo? Thus only some part of the photo is being displayed, the other kind of masked?

Thanks for any hints!

Stef

[tburger]

I'm not sure what you mean by quadratic shape, but I think you can at least limit all of the photos to a consistent size by setting a fixed height and width for the image and then hiding the overflow. I know this works when using an image for a background...

This would be more of a "thumbnail" approach...

Can you post a little more description on what you are looking for?

I like the gallery, by the way...very clean look...

Tom

[luftikus143]

I'm not sure what you mean by quadratic shape, but I think you can at least limit all of the photos to a consistent size by setting a fixed height and width for the image and then hiding the overflow.

Thanks for the flowers! And yes, perhaps there are different approaches... The thing is that I would like to display the photos in the gallery say in 150x150px size. That would mean that only parts of the photos is being displayed, as the relative size of the photos is in many cases 3:2 and not 1:1.

This "hiding the overflow" is exactly what I thought how it should work. But I have no idea how...

Could you give me some hints?!

Thanks a lot!

[tburger]

A couple of questions first:

1. Did you code the photoblog yourself or did you use a service/site/program to do it for you?

2. If you didn't code it, do you feel comfortable adding CSS to your archive's HTML?

3. You want the photos in the archive to link to a new page with the original photo displayed, correct?

If you answer these, I'm pretty sure we can work something out for you...

I won't go into too much detail (until you answer, that is), but here's the sort of thing I'm thinking...

We can essentially make a box for each of the pictures in your archive. Each box will be set to a constant, fixed size like 150 x 150 px. We would then make a given picture the "background-image" of one box. This would afford you the opportunity to see any 150 x 150 window of the photo using the "background-position" CSS attribute. Additionally, we could position each box independently on the page - creating any pattern we would like.

I can definitely help you further- this sounds like a cool project.

If you want to go it alone, I would try this code (for each div box you create):

#box
{
   position: absolute;
   height: 150px;
   width: 150px;
   background-image: url(picturename.jpg);
   background-repeat: no-repeat;
   overflow: hidden;
   left: xx; ( where xx is the number of pixels from the left of the page where the picture is to be placed)
   top: xx; (where xx is " " from the top)
}

Sorry for the incomplete message...if you can answer the questions above, I think this is definitely possible...

Until again,

Tom

[luftikus143]

1. Did you code the photoblog yourself or did you use a service/site/program to do it for you?

Some parts have been developed by myself, some adopted from other script.

2. If you didn't code it, do you feel comfortable adding CSS to your archive's HTML?

No problem at all.

3. You want the photos in the archive to link to a new page with the original photo displayed, correct?

Yes.

#box
{
   position: absolute;
   height: 150px;
   width: 150px;
   background-image: url(picturename.jpg);
   background-repeat: no-repeat;
   overflow: hidden;
   left: xx; ( where xx is the number of pixels from the left of the page where the picture is to be placed)
   top: xx; (where xx is " " from the top)
}

Hmmm, tried it, but have a problem with the "position: absolute" as each DIV is then superposed by another DIV...

Thanks for helping out!

Stef

[tburger]

will work on it tomorrow...i'll put an example up for you...

Tom

[luftikus143]

I won't be in the office until Monday. So, no worry if you don't hear anything from me... I am keen to see what you come up with! :-)

[luftikus143]

So?? Did you manage?

[tburger]

I believe so...let me finish up... I will post what I have tonight...

I'm on east coast time.

Tom

[tburger]

I commed you on your patience, luftikus. I apologize for the wait. I'm nearing the end of another website, and have been working hard to get it up and running before I head back west.

I put some thought into your question and here's what I came up with:

Tom's Unofficial Guide to Styling Photo Archives

First, we go ahead and create some div boxes that will act as the "frames" for our pictures. For the sake of ease, I have included the CSS styling within the HTML page (If you view the page source (right click), you'll see what I mean). Using "p1" through "p5" as identifiers for individual frames, I made all the boxes 150 by 150 px. Without CSS styling, these five boxes would rest on top of each other in the upper left corner of the page. But, by positioning each frame absolutely, we can move it anywhere we want on the page. In this example, I simply styled the boxes to be grey with a white border. I then arranged them to show this approach's flexibility:

Example #1

Just for fun, I played around with the boxes' colors. Check it out:

Example #2

Of course, it's entirely possible that your desired arrangement will look nothing like this. For dealing with actual photos, I spread the boxes out in an attempt to avoid overlap (unless you want it ;)) :

Example #3

Pretty cool...but we still haven't covered the real issue.....PHOTO S!!

I took a couple old pictures out of iPhoto and resized them to 216 by 162 px. You can leave them whatever size you would like, but remember that we are dealing with an 150px square window.

**On a side note, if you are using a Mac, I like to use Image Shackle to resize my photos....it's a really useful widget to have in your Dashboard...

Next, I assigned one of the pictures to each of the "frames" using the "background-image" attribute.

The necessary syntax is:

#p... 
{
background-image: url(whatever.jpg);
background-repeat: no-repeat;
overflow: hidden;
}

The "background-repeat" ensures that the photo won't be printed more than once in the frame. More importantly, the "overflow:hidde n" attribute makes sure that any part of the photo exceeding the frame will stay out of sight.

To choose what part of the picture is shown in the frame, use the "background-position" attribute.

The syntax, again:

background-position: xxpx  AApx;

Where "xx" is the number of pixels shifted right and "AA" is the number of pixels shifted down. To make these shifts occur in the other direction, place a negative "-" sign in front of the pixel value.

When all is said (and sort of) done, we get something like this:

Example #4

Excuse the silly photos, if you will.

Using this model, you are free to arrange the photos anyway you would like. You have control over the frame's size, location, and content. =)

Finally, to make each frame link to the full photo, simply add an anchor <a> to each div.

For example:

<div id="p1">
<a class="link" href="whateverpathyouwouldlike..">picture1</a>
</div>

Next, style the anchor:

a.link
{
  display: block; 
  height: 0px;
  width: 150px;
  padding-top: 150px;
  overflow: hidden;
}

You could style these links individually, but I used a class for the links in my example....

In doing this, you are making a linked "mask" over the entire picture. Make sure the "padding-top" attribute is set to the full height of your frame. This way, the actual text of the link is pushed below the frame and hidden by the "overflow" rule.

In the end, you should get something like this:

Example #5

Notice that the original, linked photos are Larger than those displayed in our frames...

And that, my friend, is all I have to say about that....unless you have questions, of course...

Enjoy, and let me know if you get something working...

Tom

[luftikus143]

Hey Tom, many thanks for that. It's really too great!!

Here is how the archive looks now! Really cool!!

I had to do some minor changes to your code - e.g. the position of the DIVs is relative and not absolute, I added a float:left and because I can't allocate a specific id to each DIV due to the number of photos, I changed it the following way:

<div class="box" style="background-image: url(<?php echo callI_image_function_here; ?>)">
<a class="link" href="<?php the_permalink(); ?>">picture1</a>
</div>

Great, it's really looking amazing now. What do you think?

[tburger]

That looks really, really great!!!

An excellent adaptation of the tutorial model. The border you chose is simple and clean- it gives the page a VERY professional feel. The "window" approach is ideal for this - giving the viewer a sneak peak at the eclectic and unique nature of the photography. Most importantly, with the "frames" set to constant dimensions, the page flows much more.

Flow, as you may agree, is always a good thing. =)

The only possible suggestion I have is playing with some of the thumbnail image sizes if you can. I see that you used a 185px square frame on the page. Some of the thumbnails do not quite fill this frame (i.e. the beautiful shot of the bird over water in the last row of the archive). I personally think it looks good the way it is. However, if you wanted to try to fix this, I would suggest compressing a new thumbnail from the original photo. This way, you can make the picture slightly larger than its frame, without losing the quality of "resizing" the existing thumbnail. There are only a few photos that fit this category, but it might add the final touch...

If you don't have a Mac to use Image Shackle, or simply don't have software with this proportional resizing ability, let me know. I'd be happy to do it. It seriously might take 45 seconds.

Now, as much as it pains me to say this, I think we have taken care of the issue at hand....=) Thanks so much for staying engaged - You don't know how many responses go unanswered, or even worse, unused! Great project you're working on, keep it up!

I've sent you a message with my primary email. Feel free, anytime.

Hope this finds you well,

Tom