West Seattle Blog...

WSB Forum » Open Discussion

1. DP
   Member Profile

   

   Now and again I read a comment to the effect that some WSB member would like to insert a graphic into her post, but she doesn't know how.

   Fear not, Blogizens: I'm going to tell you how to do it. But first you must promise to read my caveats following the step-by-step instrux below.

   Do you promise?
   OK, good.

   Step 1) Find the "address" of your chosen graphic on the Internet.

   Step 2) Type the following line of html code, using the specific info for your image file:

   

   Type everything exactly as you see it above, changing the text between the quotation marks to the exact location and name of your image file. Note: generally, the location of your image will start with http://www. but this is not always the case. Not all Web sites begin with "www" for example.

   Step 3) View your post to verify that you put in the html correctly, making corrections as necessary.

   Example:

   For the example below, I uploaded an image file called "zaius_cowboy.jpg" on my personal Web site (roominate.com), in a directory called "blogg." To insert the image into the current post, I typed a line of html code pointing to the image file's exact location.

   The specific line of html code I typed looks like this:

   

   — and when I saved my post, the Blog software automatically inserted the graphic, which looks like this:

   

   It's as simple as that.

   The key points to remember are that you have to point the line of html code to the exact location of your graphic, and you have to use the exact syntax I listed above. If you leave out the quotes, or the angle brackets, or if you get just one of the letters in the directory or file name wrong, the insertion will fail and the Blog software will either display a little red "x" (indicating that it can't find your picture at the location you listed) or it will delete your line of html code all together (indicating that you have a fatal error in your html code).

   The good thing about the WordPress blog software is that you can make a mistake inserting a graphic and it will leave the rest of your post intact. The bad thing is that it won't tell you where you went wrong with your code.

   That's enough info for one post. Stay tuned, and I'll give you some caveats and additional info below. Then I'll be taking questions from the audience.

   Apologies in advance for anything I might have overlooked at this point.

   –David

   Posted 1 year ago #         

2. DP
   Member Profile

   

   Caveats:

   1) Use good taste and mind the Blog's rules about offensive or defamatory content.

   2) Don't use any image that might present a copyright issue. In other words, don't use any image that is owned by someone who MIGHT object to your use of it. (Examples include art photos, trademarked cartoon characters, etc.)

   3) Don't insert graphics that are too wide to display on screen. The limit on my browser is 530 pixels wide; your mileage may vary. Unlike an avatar upload, regular image uploads will not be automatically "trimmed" by the Blog software. If you need to shrink a file to make it fit, use an image-manipulation program like PhotoShop.

   4) Keep your file sizes small. Large files (>100K) may cause your posts to load slowly on older computers or computers with low-speed connections. Here too, some specialized software could come in handy.

   5) Be vigilant about the possibility of a "broken link" whenever you link to a file on someone else's Web site. A broken link (indicated by a red "x" where the image should be on screen) results when the Web master moves or deletes the file you linked to. The best way to avoid broken links is to put images on your own Web site or domain; however, this may not be an option for most of us.

   6) Some Web sites present difficulties for linking. Scrapbook sites like "Picasa" assign addresses to files in a way that makes them difficult to link to. Just something to be aware of.

   That's all I can think of right now.

   –David

   Posted 1 year ago #         

3. biankat
   Member Profile

   
   
   

   Posted 1 year ago #         

4. austin
   Member Profile

   

   

   I had to take the spaces out.

   Posted 1 year ago #         

5. DP
   Member Profile

   

   austin: Yeah, baby! I like your style!!

   Keep trying, biankat. If you want, you can use the same line of code I gave you in my sample. (Unfortunately, I can't repeat the code verbatim here, or WordPress will compile it and translate it into a picture.)

   Also, you can send me the code you're using at DP_Editor at comcast.net and I can check it for you.

   Posted 1 year ago #         

6. SarahScoot
   Member Profile

   

   Biankat, to clarify Austin's note about the spaces in the code: you probably just need to delete the spaces immediately inside the start/end "carrot" brackets. So instead of < img... /img> just do <img.../img>

   Posted 1 year ago #         

7. Ken
   Member Profile

   

   To see this if you ever forget these instructions, just view - source from the firefox menu and look for the tag "img" in the code.

   

   Posted 1 year ago #         

8. biankat
   Member Profile

   

   thanks guys. i think the problem is that i'm not pulling the image from a proper source. i've tried my facebook photos and also tested via a flickr account. should it even work with those sites?

   Posted 1 year ago #         

9. DP
   Member Profile

   

   I suspect you are right, bianka. If I recall aright, Facebook and flickr image addresses are not like other addresses. For example, many pages on Facebook are not "public" pages, since you must have a Facebook account to see them. Hence, you cannot link directly to these pages from other sites.

   (Sorry.)

   If you send me the address you're trying to link to, I can verify whether you're using a good address or not. Or just put the address directly into your next post.

   Posted 1 year ago #         

10. Carson
    Member Profile

    
    
    

    Posted 1 year ago #         

11. biankat
    Member Profile

    

    Hi DP :)

    Here's the flicker link I was trying to test:
    http://www.flickr.com/photos/comrentwest/4457592687/

    Posted 1 year ago #         

12. DP
    Member Profile

    

    OK, I'll try it:

    

    No go.

    The problem with this address is that Flickr is masking the actual name of the Camstrap photo file. In any image file you insert into a post, the last bit of the file name should be .gif, .jpg, .png, .bmp or some other standard image file extension.

    Notice that in the link you gave me there is no such extension. Instead, there's just a series of numbers with a slash at the end, indicating that you are still at the level of a file directory, and not at the level of a file name.

    The Flickr Web site might be doing this for a variety of reasons. It might be deliberately preventing people from cross-posting, for example, or it might have to leave you at the directory level in order to give you multiple views of the photo. The address you listed seems to be the address of a collection of photos, rather than being the address of a single one.

    I don't think there's an easy workaround for this, but I'll keep my eyes peeled for one, just in case.

    Again, any photo you insert into a post should end with the extension .gif, .jpg, .png, .bmp and so on, depending on what the WordPress software can handle. All standard image files should work. There might be some, like .cdr (CorelDraw) that don't.

    Hope this helped.

    Posted 1 year ago #         

13. miws
    Member Profile

    

    So, apparently nobody ever taught those Flickrs how to share.... ;-)

    Mike

    Posted 1 year ago #         

14. DP
    Member Profile

    

    I flk my nos at Flickr.
    I flk a boogr on thm.

    Posted 1 year ago #         

15. miws
    Member Profile

    

    H h h h !

    Mik

    Posted 1 year ago #         

16. biankat
    Member Profile

    

    :) I was thinking exactly that as well. Thanks for the information and insight, DP!

    Posted 1 year ago #         

17. Carson
    Member Profile

    

    

    took me a few tries...

    Posted 1 year ago #         

18. Forest
    Member Profile

    

    Posting an image via an online address is called "hot linking" (some call it bandwidth theft) because that relocated image still connects to the original website and uses its internet power. Try to avoid doing it.
    Instead of hot linking from a specific web address, right click the image you want and save it to your computer with a new file name. The new image file won't have an internet address attached to it, so it can be uploaded from your computer to a website without draining the website where you originally found the image.

    Posted 1 year ago #         

19. charlabob
    Member Profile

    

    and don't forget the copyrights ;-0

    Posted 1 year ago #         

20. biankat
    Member Profile

    

    I was under the impression that the image had to be hosted somewhere on the web. If what forest says is correct, how do you enter the location of a pic from your computer?

    Posted 1 year ago #         

21. Kevin
    Member Profile

    biankat, most folks who link to their pictures will usually have some web space somewhere. This might be on a web site that you might set up such as http://www.biankat.com or something similar. Once you register a web address, then the next step is to find a web service provider to "host" it for you. At this point it is no different than renting a small office, or a storage locker. You are renting space on the web.

    You MAY already have some web space you can use depending on who your internet provider is. For example, Comcast customers are allocated a small amount of space where they can set up a personal web site. Check with your provider and see if they offer space.

    The only way to link directly to your own computer is if your computer is set up as a web server. It can be done, but SO much easier to just rent some space somewhere.
    .

    Posted 1 year ago #         

22. Carson
    Member Profile

    

    or use a free image hosting service like, um, imageshack.com its simple, its easy and its free

    Posted 1 year ago #         

23. DP
    Member Profile

    

    As we see, there are lots of places on the Web to store pictures. The point, however, is that any image you want to put into a post on the Blog needs to exist somewhere on the Web before you can do that. In other words, you can't simply upload a file directly from your computer, like you would with an avatar — and I think that's where some folks were getting hung up.

    Using your own Web domain is the best route, but that's not an option for many folks, because it costs $ and there's assembly required.

    Using dedicated Web space on Comcast (or another ISP) is the next best thing. The space is "free," and it's all yours, but there's still some assembly required.

    An image-hosting service is something I have not tried, but these services usually come with some strings attached (as we saw with Flickr) and may force you to sit through some advertising in exchange for using the service. Once you hit a certain threshold of storage space, the service will probably start hitting you up for a fee.

    Hot-linking will be the easiest way for most folks. It's not exactly a sin in my opinion, as long as you do it in moderation, and site owners who are really concerned about bandwidth loss can take measures to prevent it. If you want to balance out your karma for hot-linking, just post a link to the page itself under the picture. That way, you are offerring viewers a chance to go directly to the site.

    The biggest disadvantage of hot-linking is that you are at the mercy of the site owner, who can do anything he wants to with the image. Any image you hot-link to today could be gone tomorrow.

    Posted 1 year ago #         

24. DP
    Member Profile

    

    Belated UPDATE:

    Kevin, austin, and SarahScoot have all pointed out that I had an errant space in my original code example, so if you had used my code example, it wouldn't have worked. :-(

    Neverthemever. That's life in Blogland, right? — Just acknowledge your mistakes and move on.

    In any event, I have corrected my code examples in the posts above, but just to reiterate, here is the syntax again, in corrected form:

    Generic example of a code line for inserting an image into a post:

    

    — where mywebsite.com is the name of the Web site your image file is on (ideally a site you own, but any stable Web site will do),

    — mydirectory is the name of the directory or subdirectory your graphic is in, and

    — mygraphic.jpg is the name of the image file itself.

    Specific example of an image-file insert line:

    

    If you want to get your feet wet inserting a graphic, just use my code in the second example above and insert it into a reply post on this thread.

    And again, if you're having trouble with this or any other HTML code on the Blog [bold text, italics, or even, God help us, item lists], just drop me a line and we'll get it figured out somehow.

    :-)

    DP_Editor at Comcast.net

    P.S. And, oh yeah, as charlabob would say, don't forget those copyrights . . .

    Posted 1 year ago #         

25. christopherboffoli
    Member Profile

    Forest: From the perspective of a content-creator and copyright holder I have to say that I would PREFER that someone hot-link to one of my images as opposed to right-clicking to download. These days a little extra traffic isn't all that much of a burden, while that act of downloading the image to a local computer and re-hosting it is definitely a violation of copyright law.

    Posted 1 year ago #         

26. DP
    Member Profile

    

    This is a grey area, legally speaking.

    Generally, you should NOT use material that someone else, someone like Christopher for example, produces for a living, because that diminishes the value of the creator's work in the marketplace.

    On the other hand, courts have granted some leeway to Netizens who have used copyright-protected material (in both graphic and text format) for purposes of general commentary, criticism, or satire, particularly when the work used is excerpted rather than presented in its complete form.

    Courts have been harsher with people who try to profit from the work or brand-recognition value of others. So if you have a commercial coffee-related site, for example, and you wanna use the Starbucks logo, better get permission first.

    A recent test case involved Wikipedia's use of the FBI logo for an article on the FBI. As I recall, the Bureau sued (unsuccessfully) to enjoin Wikpedia from using its logo, citing an existing law that was intended merely to keep folks from impersonating FBI agents. So far, the courts have sided with Wikipedia, and the FBI logo stays:

    http://en.wikipedia.org/wiki/Fbi

    By the way, anything you get off Wikipedia (and other sites that use the "Creative Commons" protocol) is free for distribution, but it's generally good manners to credit the source there, too.

    Finally, I should say that the vast majority of stuff you find on the Web nowadays is NOT original material anyway. So by the time you discover an interesting or unusual picture (a cute little kitten, for example) chances are it has already become an Internet "meme" — posted and re-posted and re-re-posted a million times over.

    Posted 1 year ago #         

27. redblack
    Member Profile

    

    photobucket.com is a good alternative for hot-linking: it's free, and it's easy to use. (lots of cut-n-pasties on the right side of the screen.)

    btw, WSB uses wordpress for their code - for posters who want to know basic commands like making bold or italicized text, or adding links to their posts.

    http://codex.wordpress.org/Writing_Posts

    remember: RTFM, and ask questions. we were all noobs at one time. we're your neighbors, and we won't laugh at you.

    much.

    Posted 1 year ago #         

28. miws
    Member Profile

    
    
    

    Posted 1 year ago #         

29. DP
    Member Profile

    

    Send me your code miws. I'll give you some feedback on it.

    Posted 1 year ago #         

30. miws
    Member Profile

    

    I was just testing the "del" tags I'd found after clicking redblack's codex link. They apparently aren't allowed in this Forum (except maybe by Admins.)

    A few weeks ago, I wanted to post something with a line through it, certain I had done so here in the Forums in the past, (but apparently not) and neither <strike>, nor <s> worked, so thought I'd give <del> a shot.

    Thanks anyhow!

    Mike

    Posted 1 year ago #         

31. SlyBanker
    Member Profile

    

    First attempt. Fingers crossed.

    

    Posted 1 year ago #         

32. DP
    Member Profile

    

    Sly: Your insert worked but the display is slow to update. What is your file size on this? (I could check it myself, but I'm too lazy.)

    Did you optimize it on export to JPG format?

    P.S. Nice photo by the way.

    Posted 1 year ago #         

33. austin
    Member Profile

    

    Image post refresher (for my remembering).
    DP the image in question is under 500k. Not that huge but a bit bigger than your previously suggested 100k.

    

    Posted 1 year ago #         

34. SlyBanker
    Member Profile

    

    Thanks.

    Yeah, I optimized it but chose maximum for the quality output which resulted in a 500k file. I just changed it to a little lower quality so it's now an 80k file. Should be a little quicker now.

    Posted 1 year ago #         

35. DP
    Member Profile

    

    Yeah, that definitely helped, Sly, with very little loss in quality.

    My 100K was just a suggestion, by the by, but 500K is clearly pushing it.

    austin, what's the doo-hickey?

    My guess (without peeking at the file name) is that it's some kind of glass appurtenance (such as a cookware lid) that has been submerged under water.

    Either that or it's gotta be an Ion Flux Transfer Chamber of the type that would come in verrry handy for interplanetary space travel.

    Posted 1 year ago #         

36. austin
    Member Profile

    

    The file name will not help you. The tiny pic service creates a random character file name and strips meta/exif data. The item in the center of the photo is about a centimeter across. It's more related to the study of travel through time than space.

    Posted 1 year ago #         

37. Andy
    Member Profile

    Must be clock related, then? I don't know much about timepieces, but I've never had watch that had any parts looking like that.

    Looks a bit like something that might be found in a -ahem- tobacco shop.

    Another question related to the original topic: I just tried to do italics with the usual <i></i> thing, and it didn't work. What's the rub?

    Posted 1 year ago #         

38. miws
    Member Profile

    

    Andy, over here on Forums, using those same brackets, you need to use em in place of i, and strong, in place of b (bold).

    Mike

    Posted 1 year ago #         

39. DP
    Member Profile

    

    Yeah, you can think of it like "dial 'em' for emphasis."

    Mike: does <i> do anything at all?
    Or should it be <me>?

    Hmmm. Does me do anything at all?
    That doesn't sound right somehow.

    I know me do all kind of thing.

    Me get up.
    Me take shower.
    Me blog.
    Me eat cookie.

    

    Nom! Nom! Nom!

    (Cookie gone now.)

    Posted 1 year ago #         

40. DP
    Member Profile

    

    OK, austin, Andy guessed a "watch dial."

    Yay or nay?

    Also, this gibberish about "tiny pic" service and stripping "meta/exif data" suggests that you are using some kind of picture file hosting service. Would you care to tell us more about that?

    Also, did you take the photo yourself? I see some refracted light in the picture, so I'm guessing that's caused either by water or some curved glass surface.

    –David

    Posted 1 year ago #         

41. austin
    Member Profile

    

    It's not a watch dial. I did take the photo, and it does have both water and a curved glass surface in it.

    Tiny pic - http://tinypic.com/ is a free digital media (photo/video) hosting service useful for sticking unimportant* photos into forum posts and whatnot without needing your own web space. Some folks have websites or other online media storage that they can use to host pictures but tinypic requires no commitment beyond a copy + paste of the link they provide you with. You don't even have to sign up, it's just upload and link. *I say unimportant because unlike other image hosting sites that let you keep a library of images to return to, tinypic is more suited to a single use of a link. Helpful for using a specific photo to try to figure out how to insert pictures into your posts on the west seattle blog forums, for example. Carson mentioned imageshack.com in post 22; it does the same thing, or at least something very similar. I can't speak for any kind of resizing or compression that they might do to one's images but I did notice tinypic removed the date/time/camera type information that every digital photo contains. I know photobucket.com does not remove that information, for whatever that's worth.

    Posted 1 year ago #         

42. DP
    Member Profile

    

    Thanks for the info on tiny pic, austin. That's great news for people who want to insert their own images. It sounds like the service might also do some resizing for you.

    OK, more questions about your photo:

    I'm guessing you took this with something other than a camera phone, but you don't need to confirm or deny that.

    ♣ Is the object at the center of your photo an integral part of some food preparation device?

    ♣ Is it something that might be found in the average West Seattle household?

    ♣ Is the object rigid or flexible?

    Posted 1 year ago #         

43. austin
    Member Profile

    

    The new iphones take ok photos even close up from what I understand, however my phone's camera does not. I use a Canon.

    ♥ Not part of a food prep device, but it can go in the kitchen. It sort of looks like a weird gas burner though doesn't it? Or maybe a lid handle to a casserole dish or fancy cast iron pot.

    ♦ That is a tough question. It's not as ubiquitous as a fridge or even a tv, but more common than a firearm (it is not a fridge, tv, or firearm).

    ♠ It is not flexible.

    Posted 1 year ago #         

44. Andy
    Member Profile

    Well, there's glass, so it is at least partially rigid.

    Curved glass. Water. Related to the study of travel through time.

    Some sort of art deco waterboarding device?

    Posted 1 year ago #         

45. Andy
    Member Profile

    I had a a bit of thinkery that it might be a decanter of some sort.

    Posted 1 year ago #         

46. DP
    Member Profile

    

    "Decanter" is a good guess, Andy, but remember, the central object is only a centimeter across. It's like the photographer is deliberately using it as a prism or light-distorting device, rather than studying the object itself.

    austin: Would you say that it is more of a more decorative device? Or is it more utilitarian in its purpose?

    Posted 1 year ago #         

47. SlyBanker
    Member Profile

    

    I was thinking champagne flute or candle holder but I don't see how those are related to time.

    Posted 1 year ago #         

48. Andy
    Member Profile

    I missed the earlier bit about the centimeter.

    Is the water a permanent thing, or can it be drained and refilled?

    Posted 1 year ago #         

49. DP
    Member Profile

    

    Candlestick holder fits (a candle burning down denotes the passage of time) but it would have to be an awfully small candle.

    Posted 1 year ago #         

50. SlyBanker
    Member Profile

    

    Yeah, if that middle part is a centimeter across, it would have to be a pretty small candle. It's the greatest match stick holder ever made.

    Posted 1 year ago #         

RSS feed for this topic

Reply »

You must log in to post.