|
|
|
|
Good evening, Kibbitzers! Last Thursday, when I had a ticket to a Broadway show (thus apparently calling down the polar vortex upon New York City, but that's another story), our friend palantir posted a marvelous diary about clouds. We all learned a lot about clouds, but when I saw the diary, I thought, "WOW! You can use an image as the background of a table??" palantir is an html wizard with the eye of an artist, and he knows many tricks for making fancy effects with the limited set of html that is allowed inside Daily Kos. Now when I see him use one, I immediately steal his code and figure out how to work it, so I can write about how you can do the same thing in the comfort of your home, without the aid of a rock-crusher.
Join me below the orange antimacassar, and we'll see how to make pretty boxes with pictures as their background.
|
|
|
|
|
|
The first thing we will need is an understanding of how to make boxes like this. nomandates wrote a good introductory diary about how to make a table with just one row with one cell, which is all these boxes are. You might review that if you're unsure. Now, you'll recall (especially if you just peeked) that when we make a <table> tag to form a box, we can put "attributes" into it, like border="1", for instance, to describe how the table should look. We can also dye our box a solid color by using the background color attribute bgcolor. As it turns out, there is also a background attribute. After its equal sign, we can put the code for a picture which will become the box's background, and we can tweak up the picture's size just the way we can if we post it normally.
|
|
|
|
|
|
You'll no doubt have noticed that palantir's choice of cloud photos as background was a very wise one, because any photo that is at all dark, or contains much detail, is going to make it difficult to read text that appears on top of it. If you have in mind to use your photo-background box as a frame for something like a video or another picture, or if you plan to put a blockquote in the middle of it to hold your text, then it's of less concern. You can see that my nice leaves work well in this capacity, but without the blockquote, they'd be a disaster for the readability of this text. I could also, of course, nest another table in here, with a background color of my choice.
|
|
|
|
|
|
|
So, let's choose a picture from an approved photo host. Mine happens to be Flickr, but you can use any, as long as they are allowed by Daily Kos, including the DK image library.
Below is my chosen Flickr photo, of a nice sunset over New Jersey. Beneath it is the code I would grab if I wanted to post it here. The bolded portion of that code is the part we're interested in for today's arts-and-crafts project. We will throw the rest away. Code presented to you will vary from one host to another, especially with DK image library, but there will always be a section like the bolded section.
Note that Flickr gives numerous size choices, and those sizes are the maximum size the picture correctly displays at. I've picked the "Medium 640" size, because 600 pixels is the maximum width of a diary and I want the box to fill the whole width of my diary. Your photo host may handle size differently.
|
|
|
<a href="http://www.flickr.com/photos/htctenor/9411479545/"><img src="http://farm8.staticflickr.com/7297/9411479545_d1e7be81f9_z.jpg" width="640" height="382" alt="100_5913"></a>
That's awfully busy-looking code, isn't it? One reason Cranky Users and New Diarists always seem to run out of steam before we write about how to post pictures is that the exact details of what you get when you grab the code for a picture vary so much from host to host. But basically, the part that starts with <img and ends with the next > after that is the picture. Everything else is extraneous in our quest to make pretty boxes. (In the case of code from outside hosts, like what I've shown above, everything else is a link that takes you to their page when you click on the picture.) |
So let's grab just that part of the code I mentioned:
<img src="http://farm8.staticflickr.com/7297/9411479545_d1e7be81f9_z.jpg" width="640" height="382" alt="100_5913">
We don't want to keep the height or alt parts for this purpose, and we don't need the img part or the pointy brackets either, so now we're left with:
src="http://farm8.staticflickr.com/7297/9411479545_d1e7be81f9_z.jpg" width="640"
Now we'll make two more changes to what's here: we'll reduce the width to 600, so it fits in our diary, and where it says "src", we'll change it to say "background":
background="http://farm8.staticflickr.com/7297/9411479545_d1e7be81f9_z.jpg" width="600"
Now this code is ready to go inside our <table> tag! The completed table will look like this:
<table background="http://farm8.staticflickr.com/7297/9411479545_d1e7be81f9_z.jpg" width="600"><tr><td> ...my content...
</td></tr></table>
Now I start writing. The box will get as tall as the text I write, so if I don't say much, the whole picture won't be shown, and if I say too much, interestingly, my picture will repeat!
As you've already seen, you can put a blockquote on top of the picture at any point.
And as you can see here, I was being rather tricksy in my other boxes, because unless you do something a bit fancier, you don't get wide margins and justified text. If you'd like to know more about that, you can check out palantir's fabulous diary on the topic. Or just call out your questions in the comments! And, you're most welcome to try this out in the comments, but remember, maximum width there is only 500 at the left margin, and less as you move rightward. Have fun! Or, you know, just post recipes. ;)
|
|
|
|
|
Kitchen Table Kibitzing is a community series for those who wish to share part of the evening around a virtual kitchen table with kossacks who are caring and supportive of one another. So bring your stories, jokes, photos, funny pics, music, and interesting videos, as well as links—including quotations—to diaries, news stories, and books that you think this community would appreciate. Readers may notice that most who post diaries and comments in this series already know one another to some degree, but newcomers should not feel excluded. We welcome guests at our kitchen table, and hope to make some new friends as well.
|
|