WordPress.org

Ready to get started?Download WordPress

Forums

WP 1.2 Photo Display Hack (33 posts)

  1. sakamuyo
    Member
    Posted 9 years ago #

    This WP Photo Hack makes use of the existing WP Upload feature and quicktags to simplify adding photos to your posts. With the hack, inserting a photo takes two steps:

    1. Use the "Upload" feature to upload your pick, allowing WP to create a thumbnail.
    2. Use the "img" quicktag in the post editor, entering the filename of the photo you uploaded and a description.

    The hack will display the WP created thumbnail in your post, as a javascript link to a popup box that displays the full-size image. The popup automatically resizes to the size of the image. For visitors without javascript enabled, a simple link to the image is created.
    Hack and demo available here: WP 1.2 Photo DisplayHack
    Questions, comments, or help, please comment here.

  2. dss
    Member
    Posted 9 years ago #

    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

  3. sakamuyo
    Member
    Posted 9 years ago #

    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.

  4. Anonymous
    Unregistered
    Posted 9 years ago #

    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!

  5. sakamuyo
    Member
    Posted 9 years ago #

    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.

  6. Jack
    Member
    Posted 9 years ago #

    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="http://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?

  7. dss
    Member
    Posted 9 years ago #

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

  8. sakamuyo
    Member
    Posted 9 years ago #

    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.

  9. Anonymous
    Unregistered
    Posted 9 years ago #

    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.

  10. sakamuyo
    Member
    Posted 9 years ago #

    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: \'

  11. sakamuyo
    Member
    Posted 9 years ago #

    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.

  12. Jack
    Member
    Posted 9 years ago #

    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!

  13. sakamuyo
    Member
    Posted 9 years ago #

    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.

  14. Anonymous
    Unregistered
    Posted 9 years ago #

    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!

  15. sakamuyo
    Member
    Posted 9 years ago #

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

  16. Lucky
    Member
    Posted 9 years ago #

  17. Anonymous
    Unregistered
    Posted 9 years ago #

    When I used ' as somebody else had pointed out further up, it just printed(echo) this 1:1 in WP. But if I come again across a similar situation, I'll definitely will try your solution of \ too ;-)

  18. Anonymous
    Unregistered
    Posted 9 years ago #

    Hm. I seem to have a problem creating the thumbnails (whether I am using the plugin or not). I get an error message "file type not supported". Any clues?

  19. sakamuyo
    Member
    Posted 9 years ago #

    I'm not an expert in this area, but I'll try to help. :)
    First, check your settings through the admin options and make sure you have upload enabled and the file type you are uploading is listed.
    Second, and especially if the main file uploads and the problem is only with generating the thumbnail, it might be that your webhost does not support this. I believe WP uses something called "GD" to do image manipulation. (Someone else please chime in if I'm wrong!) I would check with your webhost to see if they support GD. And, if so, if they can look at the script to make sure that part is working properly.
    If you end up having to manually create your thumbnails and upload them individually, make sure they use the "thumb-filename.jpg" format. For example, if your big picture is called "sailboat.jpg", then name the thumbnail "thumb-sailboat.jpg". Upload both to your images/ directory. If you do that, the quicktag will still work to generate the html code for your post.

  20. bwinter
    Member
    Posted 9 years ago #

    I cannot get this one to work at all. I do not understand what is meant by the escape characters not workign ?? I have put a \ in front of every ' in the code and it dont work....please help !

  21. sakamuyo
    Member
    Posted 9 years ago #

    You do not want to put a \ before every ' in the script.
    I was going to tell you to look at the hack, itself, and make sure you have a \ everywhere it does. I noticed it was missing the needed \'s. My apologies to everyone. It has been fixed. Please go look at the updated page, as it has the proper escapes.

  22. Anonymous
    Unregistered
    Posted 9 years ago #

    The problem causing the quicktags to disappear, i believe, is the semicolon juz befor the word "Return false"

  23. sakamuyo
    Member
    Posted 9 years ago #

    That semicolon is supposed to be there. If you give me the URL to your quicktags.js file, I'll take a look at it for you.

  24. Anonymous
    Unregistered
    Posted 9 years ago #

    there should be a \ right before the ;

  25. sakamuyo
    Member
    Posted 9 years ago #

    I don't have a \ before the semicolon in mine, but if it works for you, go for it!

  26. Anonymous
    Unregistered
    Posted 9 years ago #

    thanks!
    I have another problem here..
    the url that popsup always is http://www.domain.com/images/pic.jpg instead of http://www.domain.com/wordpress/images/pic.jpg.
    and if I attempt to change the /images/ into /wordpress/images/ the quick tags would all disappear again. This is such a strange problem =/

  27. sakamuyo
    Member
    Posted 9 years ago #

    Depending on how your webhost is setup, you might have to hardcode the entire "http://www.domain.com/wordpress/images/" part. There's probably a nice way to use a WP tag to insert the base directly, but I don't know what that would be.

  28. thomasso
    Member
    Posted 9 years ago #

    Well, I installed this hack a couple of days ago, and I know this thread is very old, but I did like the idea very much. I like it so much that I spent some time looking at the JaveScript that I added some helpfull additions to the hack to give it flexability rather then just a image planted at the end of a comment. I give the choice whether you want word-wrap options like: positioning, Hspace and Vspace for wrpping the text around the thumb-nail image.
    You are prompted 5 times in this hack:
    1) for the image file.
    2) for the alt. text you want to add.
    3) for the posistioning or Alignment of the image, either Left, Right or Middle.
    4) for the Horizontal value in number of pixles for the word-wrap.
    5) for the Vertical value in number of pixles for the word-wrap.
    I’m still playing with it. Please let me know whe you think?
    here is the hack so far, I hope you don’t mind :):
    //START OF SCRIPT//
    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"'
    + ' Align=' + prompt('Enter either: Left, Right, or middle for positioning', '')
    + ' Hspace=' + prompt('Enter horizontal value in # of pixles for text-wrap', '')
    + ' Vspace=' + prompt('Enter Vertical Value in # of pixles for text-wrap', '')
    + ' />
    ';
    edInsertContent(myField, myValue);
    }
    }
    //END OF SCRIPT//

  29. Anonymous
    Unregistered
    Posted 9 years ago #

    I feel so silly... I have been trying to get this hackto work all day. I have double and triple checked the code, paths and escaped charecters. When I use the img quicktag to insert the image I just get the standard image, nothing else in the code or elsewhere. Can anyone help, please?

  30. sakamuyo
    Member
    Posted 9 years ago #

    If you post the link to your blog and path to your quicktags file, I'l be happy to take a look.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.