photo of Sami Serola

Serola

Collages

Tuesday, November 9, 2010 5:43:29 PM

, , ,

Here are the table codes I use on my blog for collages.

Style definitions used on CSS style sheet: 
table.collage img { width: 100%; border: 0px; }
table.collage { border: none; border-spacing: 5px; width:100%; table-layout: fixed; background-color: #eeeeee; line-height:0px;}
table.collage td { padding: 0px; }
One big vertical on left and two small vertical pictures on right: 
<table class="collage"><tr><td rowspan="2" width="67%">LARGE</td><td width="33%">SMALL</td></tr><tr><td valign="bottom"  width="33%">SMALL</td></tr></table>
Copy line above
Two small vertical on left and one big vertical on right: 
<table class="collage"><tr><td width="33%">SMALL</td><td rowspan="2" width="67%">LARGE</td></tr><tr><td valign="bottom"  width="33%">SMALL</td></tr></table>
Copy line above
One big vertical on left and two small horizontal pictures on right: 
<table class="collage"><tr><td rowspan="2" width="54%">LARGE</td><td width="46%">SMALL</td></tr><tr><td valign="bottom"  width="46%">SMALL</td></tr></table>
Copy line above
Two small horizontal on left and one big vertical on right: 
<table class="collage"><tr><td width="46%">SMALL</td><td rowspan="2" width="53%">LARGE</td></tr><tr><td valign="bottom"  width="46%">SMALL</td></tr></table>
Copy line above
One big vertical on left, and small horizontal and vertical on right: 
<table class="collage"><tr><td rowspan="2" width="61%">LARGE</td><td width="38%">SMALL</td></tr><tr><td valign="bottom"  width="38%">SMALL</td></tr></table>
Copy line above
Small horizontal and vertical on left, and one big vertical on right: 
<table class="collage"><tr><td width="38%">SMALL</td><td rowspan="2" width="61%">LARGE</td></tr><tr><td valign="bottom"  width="38%">SMALL</td></tr></table>
Copy line above
Two large and small images aligned as showed on example below: 
<table class="collage"><tr><td rowspan="2" width="50%">LARGE</td><td width="50%">SMALL</td></tr><tr><td rowspan="2" width="50%">LARGE</td></tr><tr><td valign="bottom"  width="50%">SMALL</td></tr></table>

Testing special bbcode for galleriesCamera bag

Comments

OlgaOlgita Tuesday, December 21, 2010 11:25:36 AM

added post to my fav smile maybe will need it smile Thank you Sami!

Tom RondelloFrlmnk Tuesday, December 21, 2010 9:46:02 PM

Thanks, Sami!

studio41 Monday, January 3, 2011 9:14:45 AM

can you explain more in depth? I did try before... but, to no avail. where does one insert the image?

Sami Serolaserola Monday, January 3, 2011 11:11:43 AM

For example...

"One big vertical on left, and small horizontal and vertical on right"

You copy the code and paste it into blog form. Then you go to you r gallery and copy code for picture that is vertical and you wish to be shown large and on the left. Just replace the word 'LARGE' with that image code.

Then copy code for small pictures, one for vertical and one for horizontal image and put those code where is said 'SMALL'. First one is for upper and next for lower image.

Finally copy the CSS code from the first code box and put that on your blog CSS style sheet.

I hope that helped. Ask more help if needed, and I try to do my best to explain it better.

studio41 Saturday, January 8, 2011 11:35:58 AM

thanks, Sami- I'm a bit slow and I apologise. I understand the first box goes into my CSS- but the other part... as I upload, I have a large grey area in betw/ the 2 small photos at right.

http://my.opera.com/studio41/blog/collage-2

what do you do w/ the grey area? is the idea to insert text?

I will now try another code...

Sami Serolaserola Saturday, January 8, 2011 6:32:09 PM

doh I did not mean you are suppose to copy the code for small image from right margin in albums. tt's better if you copy the code for large image into all boxes. 'Large' and 'small' only refers to size of pictures how they come out in the final collage.

One can however, use the code for small images if the picture is horizontal. Unfortunately there is no code for small veritcal images withour black margins at Myopera galleries.

I hope this explained it up

studio41 Sunday, January 9, 2011 9:27:20 AM

Originally posted by serola:

tt's better if you copy the code for large image into all boxes.


thank you, I will try again smile

studio41 Sunday, January 9, 2011 9:42:09 AM

Sami, if you don't mind taking a look at my third collage in the post: http://my.opera.com/studio41/blog/collage-2

now the ones at right have adjusted, but the left image is shrunken. sherlock any ideas?

Kelisha G FerdinandsKelisha Thursday, January 12, 2012 12:48:54 PM

Thanks Very Much for this link Sami I'm going to go give it a Try now knockout
Wish me Luck wizardstar

Sami Serolaserola Thursday, January 12, 2012 12:56:30 PM

Good luck up doh Here's a code for one line and three cell table: 
<table class="strip">
<tr><td>CONTENT1</td><td>CONTENT2</td><td>CONTENT3</td></tr>
</table>
Notice class="strip", which is defined on 'custom css page': 
table.strip img { width: 100%; border: 0px; }
table strip #img { width: 100%; border: 0px; }
table.strip { border-spacing: 5px; table-layout: fixed; background-color: #eeeeee; line-height:normal;}
table.strip td { text-align: center; vertical-align: top; padding: 0px; font-size:10px;}

Tom RondelloFrlmnk Thursday, January 12, 2012 1:45:22 PM

Thanks both of you. Now I have something more on my plate to do on this cloudy day.
I may even have this saved or bookmarked. lol My shoulder socket hurts much less though! yes It seems I hardly do anything w/o at least the long term analgesic effect being considered.
doh

It used to be I'd get done with 2 or 3 books by the end of winter now 2 or 3 are done with me.

RachelRachelJuleiane Friday, January 13, 2012 12:58:38 AM

up
My brain cells are not working knockout have to keep trying.

Sami Serolaserola Friday, January 13, 2012 7:09:38 AM

Tom, you are welcome smile

Rachel, you may want to study this first: http://www.w3schools.com/html/html_tables.asp

All, the drawback of using some HTML like TABLE and DIV is that it will disable line breaks after those HTML tags. Therefore you need to use also BR for forced line break or P tags for paragraphs.

Tom RondelloFrlmnk Friday, January 13, 2012 12:09:48 PM

Got a back pack repaired yesterday, but, no coding. I've yet to get the file system on this Droid organized.
I'm prioritized, budgeted and crawling along.

http://codeyear.com/ "found", or visa versa, that on CNN this morning!

Tom RondelloFrlmnk Tuesday, January 24, 2012 3:13:44 PM

I don't know why you say collage, I say rummage. bigsmile

I hope Kelisha feels better, I do.

Tom RondelloFrlmnk Tuesday, January 24, 2012 3:16:46 PM

I hafta use dsktp!?

maybe mini will crash write for me, the battery is still warming up to the idea

Tom RondelloFrlmnk Tuesday, January 24, 2012 3:27:56 PM

Nope, I'm still expecting the box to pop open into greater stability.

:later: :daze:

Sami Serolaserola Tuesday, January 24, 2012 6:24:00 PM

Originally posted by Frlmnk:

I don't know why you say collage,


http://www.thefreedictionary.com/collage
That's why.

Tom RondelloFrlmnk Tuesday, January 24, 2012 6:53:56 PM

I haven't gone to the link yet Sami, I've been too busy installing already installed (?) updates from HTC. Say fromage!


Sue Forbes was from Manasquan but you often make me wonder these days. May eye?

Tom RondelloFrlmnk Tuesday, January 24, 2012 7:51:23 PM

Gotcha on my Kindle now Sami! Thanks again.

Sami Serolaserola Wednesday, January 25, 2012 5:29:03 AM

At least these codes are supposed to be used for collages, not just for "jumble of things".

Tom RondelloFrlmnk Wednesday, January 25, 2012 12:14:58 PM

Often chronological is about as good as I can get. lol

I'm not sure when or if I'll ever put them to use, but, your experiments with the blog layout and software gives me a framework.

It's difficult when the day to day weather determines my schedule.

Sami Serolaserola Wednesday, January 25, 2012 12:30:04 PM

Originally posted by Frlmnk:

Often chronological is about as good as I can get.


It very much depends on the compositions what is best arrangement. I sometimes direct the movement towards the center of the collage. But most important is to have collection where pictures somehow support the same theme aka are not just arbitrary selected.

Tom RondelloFrlmnk Wednesday, January 25, 2012 12:39:16 PM

What if the pictures select me?

Do I have to move to have it happen again or just get reincarnated?

(your smiles menu won't pop down and if I try switching between apps I gotta reopen the browser so - I don't get too graphic these days. )

Sami Serolaserola Wednesday, January 25, 2012 12:57:29 PM

I do not mean pictures not taken yet. I speak of collage based on already taken pictures. Exhibition is much more pleasant experience if pictures support each other.

Tom RondelloFrlmnk Wednesday, January 25, 2012 6:00:51 PM

I meant this one doh

I really wish I could leave my power, modem and computer at least setup if not booted and running. Everytime I resetup it's like all different it seems bomb
Getting that organized seems impossible!

Deb Plattdebplatt Tuesday, January 31, 2012 2:54:58 AM

Very helpful post. I'll have to try this out some time.up

Sami Serolaserola Tuesday, January 31, 2012 5:51:54 AM

I still should update this article a little. The percentages on these tables are calculated for pictures with 3:4 aspect ratio. See also this for introduction: http://my.opera.com/serola/blog/2012/01/16/some-more-tables

Write a comment

New comments have been disabled for this post.

Sub pages

More around MyOpera