WordPress.org

Ready to get started?Download WordPress

Forums

Displaying Photos in Blog (24 posts)

  1. sakamuyo
    Member
    Posted 10 years ago #

    First, I have poured through numbers of pages of threads in this forum, searched the forum, searched the wiki, and attempted to find this information before starting a new thread. If I simply missed the post that already tells me what I know, please just point me to it. :)
    I am not looking for a full photo gallery. I am not looking for a full "photoblog."
    Rather, I would like to find an easier way, if it's possible, to upload a photo, display a thumbnail within the post that, when clicked, opens a new window to display the full-size photo.
    Right now, I am saving two image files (small and large), uploading both by FTP, then using html to display the small image where I want it in the post, linking to the larger photo. This method works, but it's a pain in the @ss. If anyone has found an easier way or knows of a hack for 1.2 that will do this for me, please share!
    Thank you!

  2. welsper
    Member
    Posted 10 years ago #

    WordPress can upload images and generate thumbnails for you. Just click the upload tab in the admin interface.
    If you want more functionality, there's the plugin Pictpress (http://www.curioso.org/) that can generate thumbs form a directory and the photoblog hack Pictoralis (http://weblogtoolscollection.com/archives/2004/04/10/wordpress-photolog/).

  3. stickboy3k
    Member
    Posted 10 years ago #

    I just added this to mine: http://weblogtoolscollection.com/archives/2004/03/24/wordpress-javascript-quicktags/.
    I also added this to my .css file: http://weblogtoolscollection.com/archives/2004/04/12/image-alignment-drop-shadows/
    If you check out my site, you'll see the two pictures that I have posted. Made it a lot easier. I just used the built in functionality of Uploading / Thumbnail create to get the images there and used the hacks listed above to add them with drop shadow to my post.

  4. Anonymous
    Unregistered
    Posted 10 years ago #

    I'm trying this, but it doesn't work for me. Does it work from the upload button on the admin menu? I'm not seeing anything different.

  5. sakamuyo
    Member
    Posted 10 years ago #

    *smacks head*
    I looked all over my WP admin for something image or photo related. Never dawned on me to click the "Upload" link. D'oh! Guess I was looking <i>too</i> hard.
    Thanks, guys. That, alone, is a huge improvement for me.

  6. sakamuyo
    Member
    Posted 10 years ago #

    raynchk: It wasn't working for me, either. I opened the new .js file on the server and resaved it directly. All of a sudden, it started working. Maybe try changing the .txt to .js before uploading and see if it does something different?

  7. sakamuyo
    Member
    Posted 10 years ago #

    OK. Been playing with these. Pictoralias is something I saw earlier. Great script for a photoblog, but not what I'm looking for. Thanks, though, for the link.
    The curioso plugin may work if I hack it enough to do what I'm trying to do.
    The other 2 links seem to just be nifty ways of styling the images. It seems to me to be much easier to just create img classes in the css to put the class= right in the image tag and have far fewer div tags.
    All good stuff, just not quite what I'm looking for. (and I'm fully aware what I'm looking for may not exist.) Anyone else has any other ideas, shoot 'em my way.
    Thanks!

  8. sakamuyo
    Member
    Posted 10 years ago #

    Hmm... Yes, I know I'm talking to myself now...
    I'm now using WP to upload, which saves me 2 steps (don't have to physically create the thumb or open the FTP client). I'm still having to type in nasty code for my entry, though, surrounding the img tag with an a tag with javascript that opens a popup window. I'm hard coding the size of the popup in each link, based on the size of the img.
    I'm thinking what I need to do is edit my quicktags so the current img quicktag asks me for more information and spits more out onto the page. It would need to ask me for:
    URL of thumb
    URL of full pic
    Width of pic
    Height of pic
    Name of pic
    With that info, it could generate the code for me, I would think. Now, to see if I can figure out how to hack the quicktags to do that for me. If anyone else thinks that would be easy to hack (I'm a designer, not a programmer) and I haven't updated this, please share!
    Thanks!

  9. elmsblog
    Member
    Posted 10 years ago #

    I'm on the same quest. Here's what I've found:
    http://wordpress.org/support/index.php?action=vthread&forum=10&topic=6140&page=0
    Let me know how it goes.

  10. doug
    Member
    Posted 10 years ago #

    Shouldn't PHP be able to grap the width and height from the image itself?

  11. sakamuyo
    Member
    Posted 10 years ago #

    w0000t!!!!
    I DID IT!!!!!
    I changed the img portion at the bottom of the default quicktags.js to the following:
    function edInsertImage(myField) {
    var myValue = prompt('Enter the URL of the image', 'http://');
    if (myValue) {
    myValue = '
    + myValue
    + '" onclick="window.open(\''
    + myValue
    + '\',\'popup\',\'width=' + prompt('Enter image width', '')
    + ',height=' + prompt('Enter image height', '')
    + ',scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0\'); return false"'
    + '>'
    + '<img src="' +prompt('Enter the URL of the thumbnail', 'http://')
    + '" alt="' + prompt('Enter a description of the image', '')
    + '" />
    ';
    edInsertContent(myField, myValue);
    }
    }

    It now asks me for all the info and spits out the html. Still a bit of a kludge. Next step will be to see if I can have the javascript pull the height and width of the image from the image so I don't have to input it (don't know if this is possible). Then, I'd like to see if instead of entering the URL, I can have the script know the path to my image folder and only enter the filename for the big image. the script can then auto insert the "thumb-" portion for the thumbnail. That would take me back to only having to enter the filename and a description.

  12. sakamuyo
    Member
    Posted 10 years ago #

    If you'd like to see the output on my blog:
    http://tellitinlove.com/archives/2004/05/28/wp-testing/

  13. RobotHero
    Member
    Posted 10 years ago #

    I've been doing a server-side version of this.
    I kind of mashed the post page together with the upload page, producing this:
    http://www.horriblepain.com/blogmods/postimage.phps
    It doesn't do much more than save you the trouble of copying and pasting the code from upload.php. You upload the file, and it then brings up the edit form with the image code already typed in.
    I'm planning on getting it to produce the thumbnail code or something.

  14. sakamuyo
    Member
    Posted 10 years ago #

    Interesting....
    That, indeed, would be a great idea. It wouldn't be impossible to create an "upload image" tag that let me browse my computer, uploaded the image, inserted the URLs for the image and it's thumb, and generated the code for the post. The only thing we're missing in this concept (in my concept, that is) is the dimensions of the full-size image. We could still input that manually, but it would be so much better if it could be done automatically.
    Unfortunately, this is beyond my programming ability.

  15. sakamuyo
    Member
    Posted 10 years ago #

    Let me think this out loud just a bit more, to get it straight in my head:
    A quick tag that:
    1) Calls a script that:
    1.a) Let's me choose an image on my computer.
    1.b) Uploads the image
    1.c) Creates a thumbnail
    1.d) Returns four variables:
    1.d.i) Image URL
    1.d.ii) Thumb URL
    1.d.iii) Image Width
    1.d.iv) Image Height
    2) Asks for an Image Description
    3) Using the 4 returned variables and image description, creates the code (basically, as given in my code snippet a few comments up) for the WP entry.
    So... If it's technically possible (I don't have a clue about this) to have a js script call a php file and have the php file return variables to the js script, this could be done.
    If not, then it would definitely be possible to create a new page for a photo entry that didn't need any js, but just used the php to upload and directly enter the output code into the textarea. This may be easier. The js method, if possible, would allow for multiple photos in one entry.

  16. RobotHero
    Member
    Posted 10 years ago #

    Here's a pop-up window that resizes (via JS) to match the dimensions of the image:
    http://www.sitepoint.com/article/1022

  17. sakamuyo
    Member
    Posted 10 years ago #

    Interesting... If that works, it takes away the most complicated part of this whole thing. Hacking up the quicktags.js file to only need the filename of the original is easy enough.

  18. sakamuyo
    Member
    Posted 10 years ago #

    w00t!
    Taking the code from that sitepoint article and reworking it to fit what I'm doing, I now have javascript that only requires me to enter the filename of the original and does everything else I need. Only trouble is that the popup window isn't resizing in firefox. Does work in IE.
    I'm testing this script: here
    Could you give a look in your browser and see if the popup is resizing?

  19. sakamuyo
    Member
    Posted 10 years ago #

    Verified working in IE 6 and Moz 1.6 for Windows.
    Verified non-working in Firefox 0.8 for Windows.
    Yes, I understand firefox users, on a global scale, are a small percentage. However, IE only accounts for 41% of traffic to my site. The other 59% is made up of firefox and Mac or Linux users. Cross-browser functionality is important to me.

  20. sakamuyo
    Member
    Posted 10 years ago #

    ARGH!!!!
    Another V8 moment. :(
    I did not have firefox setup to allow javascript to resize windows. Once I enabled that feature, the script worked perfectly. For my purposes, the hack works. I don't mind first uploading and then posting. Here is the final code in my quicktags.js file:
    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', '')
    + '" />
    ';
    edInsertContent(myField, myValue);
    }
    }

    A couple notes: This assumes images are being uploaded to the /images directory at the web root, using relative URLs. It also assumes "thumb-" naming of the thumbnail. This works for me, since that's how the file uploader is set to work. Your needs may vary.
    In addition, you will need a file named popup.htm. You can just copy directly the code from the sitepoint article linked to above by RobotHero.
    I may still play with this for a little while. Anyone knows how to clean this up or enhance, please share. After I've used it for a bit, I'll post an entry with full hack instructions on my blog and figure out where (wiki? new hacks thread?) is appropriate to link to it so others may benefit. I can't be the only one who would like this.
    Thanks, all!

  21. kkamrani
    Member
    Posted 10 years ago #

    Sakamuyo - Firefox is working for me and I am running .08 on Windows XP.

  22. sakamuyo
    Member
    Posted 10 years ago #

    Yeah. Started working for me once I checked the option in my preferences to allow javascript to resize windows. :)
    Thanks for confirming!

  23. Anonymous
    Unregistered
    Posted 9 years ago #

  24. DuneBlog
    Member
    Posted 9 years ago #

    @sakamuyo: would you please eMail me or post your valide URL to see your work integrating a photo plugin? Your current URL at http://tellitinlove.com/ does not show much. Thanks and read you later.

    Eddie

Topic Closed

This topic has been closed to new replies.

About this Topic