Support » Plugins and Hacks » Displaying Photos in Blog

Displaying Photos in Blog

  • 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!

Viewing 15 replies - 1 through 15 (of 23 total)
  • 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/).

    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.

    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.

    *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.

    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?

    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.

    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!

    I’m on the same quest. Here’s what I’ve found:
    Let me know how it goes.

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

    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.

    If you’d like to see the output on my blog:

    I’ve been doing a server-side version of this.
    I kind of mashed the post page together with the upload page, producing this:
    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.

    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.

    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.

    Here’s a pop-up window that resizes (via JS) to match the dimensions of the image:

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘Displaying Photos in Blog’ is closed to new replies.