WP 1.2 Photo Display Hack

looks like a good hack, but your link to the hack doesn’t seem to work for me.
my browser resizes to almost nothing, and i see a black page with two broken images on it.
same when i download the source and view it.
is this a WP plugin or what?
dss

No. Not a plugin. A hack.
The link in the above post should just take you to an entry on my site. Nothing special about it.
Clicking on the image in the entry on my site will open a popup window, displaying an image.
Clicking on the link in the entry on my site to the hack takes you to a plain text page. Left-click the link to view the text in your browser. Or, right-click and save target to save the text file and view it in your text editor.
If any of the above is not working for you, please explain exactly what you are clicking (What is the URL to the page you are currently viewing? What is the text of the link you are clicking? etc.). Please also include your operating system, browser, and browser version.
The hack has been tested in windows on IE 6, Mozilla 1.6, and Firefox 0.8.

Just tried it. I had to change a few ‘ into ' so it could work though. Good job! Now it would be even greater if you could choose a picture from a gallery so I would not have to know the name of the picture. Anyway, it helped!

Yeah. If you copy/paste (which I’m assuming most will do), be careful about characters being converted like that.
Select from a gallery, eh? More work than I have time for this week, but it’s a nifty idea if someone wanted to take it on. ??
Another idea would be to combine the upload process and make it 1-step.

I haven’t tried it yet, but did a quick look at your demo. It looks good and I will try it out later this week.
Within MT (yes, another one of those converts) it was very easy to get a popup with this code which until now I’m just copying into new posts and uploadig the files seperate through a ftp-program:
<img src="https://www.spoenk.nl/weblog/archives/200405/bootje-klein.jpg" border="0" />
Would it be possible to integrate something like that into the hack? Or is that much more complicated to make?

strange…
it views fine, as a text file now…
…hmmm.
thanks!

dss: Cool. I knew others were getting to it just fine and couldn’t find anything wrong. I’ll stop looking. ??
moxie: can you explain what behavior you are looking for? You can hack the quicktags.js script to do whatever you want, so sure, it’s possible. If you just want to be able to enter that code, it would probably be easier to create a new quicktag in the file that, when clicked, gives that output.

can’t get it to work.
a) the ' needed in the window.open() are giving me problems, they make all quicktags disappear. How does one code .js to see the ' as that and not as ‘what needs to be quoted’ ?
b) even when adding these ' manually, it will not open the image but just a black window.

The single quotes need to be “escaped” out. You do this by putting a \ in front of the ‘. So, the ‘ that need to be output into the html should all look like: \’

If you give a link to an entry you have that has the code in it, I’ll take a look at the final output and see if I can help make sense of it.

Sakamuyo, you ask about the behaviour I’m looking for? Well, in the end I think I’m looking for the most userfriendly way of uploading and inserting an image in my posts :).
This would be perfect (in the end…):
1. With the cursor at a position in the post where I want to have the thumbnail placed…
2. Click and browse to an image (large format, which will finally be the popup) which is then uploaded…
3. and automatically converted into a thumbnail image of which the code (including the link to the scaled popupwindow with the larger image) hops into place where I left the cursor…
?? Hahaha. It’s possible, and I’m not saying it’s easy. Especially while I’m the one who has little knowledge of PHP and is fully dependent of what people like you accomplish. But I really think this would be the most intuitive way of adding images. Basically it only needs two clicks and no copying.
You asked for it ?? ??
The way it worked in MT was something in that direction, although MT worked with real html-pages that were created. And I’m not saying popups are always favourable, but until now all my posts and images work that way.
But to be honest I still haven’t found the time to try out your plugin. I really will this week. This I’m typing from work, so…. back to work!

Thanks for explaining, moxie!
I agree that that would be an optimal solution. It’s beyond my programming skills, though. I’m a designer and know enough about programming to be a good hacker, but I am not a programmer.
If someone out there wants to take this on, it would be a great idea! Otherwise, it might be something I get around to at some point.
I like popups for images and comments. It lets people see that bit without losing where they are on the page. Plus, I don’t have to worry about whether the size of the image will “break” the rest of the page. So, that’s how I coded it. ?? I do understand there are others who don’t like such things. For those who turn off javascript completely, the code is written in such a way that the link becomes a simple link to the larger image.
Theoretically (meaning: I’ve never tried this, but it makes sense to me), if you removed the portion of the popup.htm script that does the resizing and then removed the
,'popup','width=550,height=413, scrollbars=no,resizable=no,toolbar=no, directories=no,location=no,menubar=no, status=no,left=20,top=20'
piece from the quicktags.js code, you would then be setup to open the page in a regular browser window. You could then lay out popup.htm like your standard index page so that the image would be displayed on a page that looked like the rest of your site.

Thanks about the escape symbol info. I had actually used this at first but it still didn’t work – probably had missed one along the way. Finally I made sure to have each one on its seperate line to ensure all are set correctly. The code then worked but the popup was black. I then changed the code a bit to work with a popup.php file I had been using in the past and now it all works fine. Making it run was a good learning lesson for me!

Right on!
FWIW, escaping the ‘ marks was the toughest part for me, too. Miss just one and it throws everything off.

That work:
function edInsertImage(myField) {
var myValue = prompt('Enter the filename of the image', '');
if (myValue) {
myValue = '
+ myValue
+ '" onclick="window.open(\'/popup.htm?/images/'
+ myValue
+ '\',\'\',\'resizeable=1,width=200,height=200\'); return false"'
+ '>'
+ '<img src="/images/thumb-'
+ myValue
+ '" alt="' + prompt('Enter a description of the image', '')
+ '" class="photo"'
+ ' />';
edInsertContent(myField, myValue);
}
}