HowTo: Adding pictures to posts

LOL! No, you haven’t had it with me. Perhaps I should have been more specific. I used “we” to refer to all of us here on BLF. The “how to post an image” question is one of the first ones I ever answered on BLF, and it’s likely one of the most often asked questions. It continues to pop up regularly, despite the many good how-to posts on the subject.

and again, Thank You Dim! It's been very helpful to be able to control the addition of pics, I have yet to get a mouseover to work, but am fixing to try yet one more time....

Edit: It's always something though. I can use the simple post editor and post a picture with the percentage sizing, adding a direct link for a click to enlarge option OR I can use the advanced editor do a mouse-over. But I cannot do both. And once I have switched to advanced, it's not letting me easily switch back to simple. I logged out. I cleared my cache, logged back in (twice) to no avail, still stuck in the advanced editor and cannot add the optional link to enable a click to enlarge functionality. Why must it be so mindboggingly difficult?

That one I know, from personal pain.

The Root Cause is the tendency of people who hire programmers — non-technical, nevermind illiterate of programming languages — of demanding irrelevant BS like piss tests, wallpaper, how pretty their resume was, etc.; instead of demanding Logic, Reason, & Math skills and an honorable Work Ethic.

It’s a simple Calculus. Irrelevant concerns lead to irrelevant decisions, but there’s no one there to correct them, since most people have been led to believe “it works on your PC, it must be my fault”!. Users don’t cause errors, they discover them. Getting you guys to believe it’s your fault was the greatest trick any code-monkey ever pulled!

I wasted huge amounts of time (apparently) learning how to write excellent, bulletproof, efficient code in a variety of languages… Now I have to move overseas to get to use any of that to earn my keep.

Bottom line, when it ain’t working, just DON’T FORGET: It Ain’t You! Just because you find a bug, doesn’t mean you spawned it! Push it back to the guy who wrote it to fix.

(Yes, the subtle hint here is, if we can somehow get the BLF middleware coders to process images in a consistent manner — no matter whether linked through the “Link” button or the “Image” button — it’s a real “win-win” because everyone who uses this middleware is having the same problem, which, if fixed, would count as a “major enhancement” by the Marketeering Department.)

Each “image” is 2 shots from a 21MP camera, so yeah a bit over 21MB each for the double wide shot. It’s not just flashlights that I like powered up! :wink: You should see the RAW files!

But yeah, not a good file for a mouse-over. I’ll kill it em off or substitute the pics. Sorry bout that.

Clicked it to see what you’re talking about and had the full image in less than 2 seconds.

I know we’re a world of I-want-it-and-I-want-it-now, but some things just have to be considered to have their limits. Like “smart” phones. I guess if I used one, I’d know their limitations.

Removing pics….

Edit: So now it’s YOUR posts causing the delays. lol

Mouseover comparisons between the HD2010 vs M3 and Stock S2200 vs Modified K3 the left side is zoomed in at 105mm, the right side is 24mm to show beam pattern.

Since the ability to go look at it full sized for detail is not present in a mouseover, when I know I’m going to do the mouseover I need to downsize the pictures dramatically. These are still larger than they need to be by 3x. I took em from 22MB to 1.75MB at 3076 wide….wasn’t thinking that they wouldn’t be linked. A 1024px, is ample and then some for a mouseover.

But what about switching from simple to advanced mode? I wonder why we can’t put the optional direct link in when in the advanced mode, or just use the original insert picture icon (it doesn’t work in advanced mode). This time, leaving the thread and going back into my account to switch to simple actually worked….when I came back in I’m no longer in advanced mode as I was previously.

So now it’s easy to link an image while sizing it to fit the screen, like this one…

This image is almost 12MB, a click will open in a new window, another click will show full sized. So does this mean that even to see the 45% version in this thread, the forum has to download the 11.7MB full sized image? I left this one full sized again to figure out what’s going on here, normally I resize to about 8MP and some 3MB.

Sorry, forgot to answer interest…from left, the HD2010, the K3, MagLight with 5xXR-E at 8.4V, S2200, M3

Okay. URLs… In the “Insert Image” dialog, if you put the URL of a smaller (filesize in bytes) image, that has all the visual information in it, but not, say, the JPEG compression - you know how to shrink files - (But leave its ‘x’ and ‘y’ as-is so it’s super-clear in “100%”…) put that in the “Image” URL at the top, then the URL to the ginormous one in the lower URL box…

It will mean carrying two “copies” of the image, but the smaller “thumbnail” should load quicker & spare our poor “smart”-phone BLF Buckaroos.

Having the “2S2P” pix like that makes “beamshots” suddenly interesting to me…

(Edit) BTW!!! Those swirly lines in your beams? BUGS???

I was told (on here somewhere) that bugs aren’t attracted to LEDs… ???

Quote the message for the details, but the parameter is “onclick”.

As in: onclick=“this.src=‘http://budgetlightforum.com/sites/budgetlightforum.com/files/pictures/picture-5670.gif’;”

So, just like a forward-clicky mouseover, no?

An interesting side note: the “width=”100%“” keyword constrains them all. So after all that fuss over size, look how stinking easy it turned out to be! Sheesh!

PS: Thanks for helping me learn new stuff!
(and don’t forget “onmouseout” to reset the thumbnail (or not, as you see I did not). MANY thanks to our Sun-God, Helios- for cluing me in to that cute little trick!)

Bright is bright, the bugs could care less! Yeah, they swarm to the light regardless of what’s making it.

The forward click to a third image is pretty darn cool, have no clue how you did it…I know I know you told me, but the secret decoder microphone was shorted and all I heard was the teacher in Charlie Brown’s class. :wink: You’re speaking code to an uncoded native. Like going to the Mexican restaurant and the waitress speaks Spanish, all well and fine, except for the small detail that I DON’T! EnchiladO, TacO y uno el CokO pour flavour. (horrible example, I know, as I am very good at ordering Mexican food! :slight_smile: I tell Jose, surprise me! lol, he never lets me down! Seriously, Jose is a friend of mine running Corona’s de Oro, best ever Mexican food…not Tex Mex [well maybe that’s on the menu, which is why I order directly from Jose] but El Salvadoran style home cooking, oh yeah! Double up on the Habanero my friend!)

I’ll continue to create an animated GIF in Photoshop if I need 3 or more images. :wink: I kept those separated as they’re apples and oranges. The 2 de-domed XM-L class lights and the 2 MT-G2 class lights. As you see, the smaller emitter don’t really hold a candela to the larger die. lol

At least now I can finally do a simple mouseover! Hooray! lol (I’ll dream of Pollo Chipotle tonight, almost assuredly)
!!

I should have just described what I did. The “onmouseover” that you already do, just select all of it from the ‘o’ in onmouseover to the space after the last “. Copy that, click after the space to stop the selection & Paste it back in there, then change the ”onmouseover” to “onclick”. It works exactly the same — loads any image, just “on” a different event. Now you’ve got me wondering if there are more…

You could have one picture for the “img src” part (what’s shown on a page load), a second image for the “onmouseover” when we first point at it, a third for “onmouseclick” and a fourth for “onmouseout”. I hope you noticed I put the brightest picture I borrowed from you on the mouseclick…

Unfortunately, the only ones we can’t look at up close are the first one and the “onmouseout” one, but right-click->View Image on the other two still brings up the full size image! Cool!

I hope you’re still reading…

I set out to show the technique in a helpful way.

You’ll need to use the Quote button to see the details, but if you want to use Mouseovers and still give access to the ‘right-click->View Image’ trick, use the onclick to put the mouseout image back! In essence, all you need to do is replicate the entire onmouseout parameter, then change the word to onclick…

Img src and mouseout = LOL smiley, mouseover = Evil smiley:

Notice how it won’t give you right-click access to the LOL smiley unless you left-click on it…

Here it is IRL, showing a nifty knot I invented , and this seems the best way to show off this GITD lanyard I made .

Thank you again for pushing me into this!

Dim

O.K., REALLY DUMB QUESTION… What is a URL?? :~ How do I find the image URL? I don’t seem find anything that even looks like what I think it is, from Picasa, or on my exported images from Picasa. HELLLLP!!

You can dig up dictionary definitions, and as you can see this has been ground exceedingly fine in this thread, so I’ll just stick to what matters in this context & leave the rest to you.

“URL” == “Uniform Resource Locator”. It’s the “address” or Location of a “Resource” such as a file or folder on the Internet. It’s “Uniform” in the sense that they are all constructed according to standards called the HyperText Transport Protocol or HTTP. It begins with “http:” and ends in “.jpg” or some other extension like “.gif” or “.htm”. If you look at Post #40, the URL is this part:

If you just want to see one, there’s always one “in your face” when you’re online. It’s the string of text in the Address Bar of your browser.

The unfortunate thing we’ve discovered about some picture hosting sites (IDK about Picasa — never used them) is, they make it quite difficult to get that URL for just the picture you want, which wrecks your post if you use the link they give you.

Take a moment and go find your picture in another window… We’ll wait…

Sorry. Old joke. When you have your picture visible, point the mouse at it, right-click to pop up the menu and then left-click the words “Copy Image Location”. If you’re using Internet Exploder, you’ll have to figure it out. Now, go open a Notepad & Paste what you just Copied… Ta-DAAA! That’s the URL of your picture!

Now Enter a few blank lines & go back to Picasa. Copy the “link” they give you and Paste it in the Notepad under your URL… Same? Cool. Different? Picasa just “gotcha”. If Picasa’s “link” ends in “.htm” or “.html”, you won’t be able to use that here except as a Link (the Globe-With-Chain icon)

As usual, thanks for asking. More questions get more answers, especially on BLF. And forget that myth about “dumb questions”!

Dim

Hello. I was reading this thread and when I start a new thread it doesn’t give me a choice of ‘advanced post editor’, it really doesn’t give me the simple post editor either, just the basics of inputting the URL, and sizing.

How do I get to the Advanced Post Editor in order to do a mouse over?

Much appreciated if u can help, thanks.

patrick

Just under the input box are the words ” input format” click on that to get the advanced post editor.

Thanks Rufusbduck. I saw that in time, clicked on it, and then did a face plant ….duh!

I am doing more reviews, and it really takes a LONG time to do each individual pic. :Sp

Is there a way to bulk upload photos on a thread :quest:

Thanks - this will make posting easier and better - no more super size or micro size photos.

I keep a .txt file in my My Documents folder where I keep the “tricks” like mouseover stored. I also store URLs there, since a couple of the online storage sites I use like to move my pictures about without telling me.

It’s easier for me to copy & paste URLs into the .txt file, then copy & paste the works into this BLF Comment: box. Of course, I still Preview a thousand times to get everything perfect, but the initial load is easier (for me) this way.

If you’re just doing a string of pictures, one file should do, but if you wanted to have a caption (above or below), you could just have one .txt file & get each picture “right” in it, then copy & paste it into its place in the Comment: box.

Oh, and the mouse isn’t your friend in any of this!! I’d suggest you learn and use keyboard shortcuts for jumping to the Address bar of your browser, for switching between programs, and for Copy & Paste…

Just thinking out loud here, mostly. Is there any specific part of the process that seems more onerous than the rest?

All questions help everyone learn and teach, and I (for one) would love to see what you’ve done!

Dimbo