Support » Fixing WordPress » How to make spoiler images?

  • Resolved Aseenus


    I’m working on a wp theme for my major project that I’m building from scratch, I’m also working on this other site as a minor project that I’m not putting too much time into however I found a very nice feature on the minor project, It’s this random theme I found somewhere and it has Image spoilers where you upload an Image and when you put the Image in a post no matter what the size it will automatically be scaled down and sits on the left of the post.

    It’s a very nice feature that I would love to learn how to implement, here’s the minor project site with the image spoilers if you don’t get what I’m talking about, how would I go about doing this?

Viewing 15 replies - 1 through 15 (of 17 total)
  • bump

    This tutorial works wonderfully. Once set up, the thumbnail is generated automatically.

    Thanks heaps mate 🙂

    I’m actually having a problem calling the images though.. I put in <img src="" alt="muru" title="muru" width="540" height="369" class="alignnone size-full wp-image-597" /> and The image shows as a big picture instead of thumbnail.

    It’s kind of weird because theres a thumbnail spot there, its empty but its 150×150 and its wrapping text around it but not calling the picture to it. Also I’m only getting one of the posts with a thumbnail none of the others have it, is there a way to get every single one of them with a thumbnail?

    Can you post the url of your blog to see what you are trying to implement? I may have misunderstood the initial question. The way I set it up, is so that the image (normal size) from the post, becomes automatically a thumbnail on the front page.

    Also I’m only getting one of the posts with a thumbnail none of the others have it, is there a way to get every single one of them with a thumbnail?

    If the problem is that some posts don’t have images, you can set a default thumbnail for those. One of the comments on that tutorial’s site had the solution:

    To display a default image, when there is none attached to the post:
    Simply add the code bellow BEFORE $more = 0;
    else {echo “wp-content/themes/YourTheme/img/default-image.png”;}

    Is this what you meant?

    No you understood the question right, that is what I wanted. this is the link to my site

    The thing is on the top post it’s automatically setting a image place holder even though its not taking the image where as with the rest it’s not doing anything.

    Where would I add this code? `$more = 0;
    else {echo “wp-content/themes/YourTheme/img/default-image.png”;}`



    I know that theme that’s Arthemia

    OK, let me take a look at my set up.

    To create a default thumbnail you add that line
    else {echo “wp-content/themes/YourTheme/img/default-image.png”;}
    BEFORE the line that says
    $more = 0; (from the code in the tutorial that you added to functions.php

    here is the entire code to add to functions.php of your theme (if you don’t have such file, just create it and upload it in your theme directory). Replace YOURTHEME with the actual name of the theme you are using and upload the image thumb-default.png in the images folder in your theme directory (the file can be any name, or a jpg, just change the path in the code accordingly).

    // retreives image from the post
    function getImage($num) {
    global $more;
    $more = 1;
    $content = get_the_content();
    $count = substr_count($content, '<img');
    $start = 0;
    for($i=1;$i<=$count;$i++) {
    $imgBeg = strpos($content, '<img', $start);
    $post = substr($content, $imgBeg);
    $imgEnd = strpos($post, '>');
    $postOutput = substr($post, 0, $imgEnd+1);
    $image[$i] = $postOutput;
    $cleanF = strpos($image[$num],'src="')+5;
    $cleanB = strpos($image[$num],'"',$cleanF)-$cleanF;
    $imgThumb = substr($image[$num],$cleanF,$cleanB);
    if(stristr($image[$num],'<img')) { echo $imgThumb; }
    else {echo "wp-content/themes/YOURTHEME/images/thumb-default.png";}
    $more = 0;
    //retreive image ends

    Also, did you follow all the steps in the tutorial?
    1 – Get the TimThumb.php Script

    2 – Edit Functions.php (as indicated in the post above)

    3 – The Thumbnail Code
    you need to add

    <div class="thumbnail"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
    <img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php getImage('1'); ?>&w=150&h=150&zc=1">

    just before <?php the_excerpt(); ?>, or <?php the_content(); ?> in index.php of your theme (or home.php, depending on your theme)

    then style with css as desired, as shown in the tutorial.

    As for the default image, you create one to match the style of your blog 150×150 px (this will be used as a thumbnail for all posts without an image).

    Never mind thanx mate I got it fixed 😀

    I was just wondering though.. it’s showing both my big image and small image in my thumb, how can I get it to only show the thumb and when you go inside it shows it big or not at all? :S

    Oh yeah and most of my text is not wrapping around my image or sliding to the right etc, how can I get that going so the image is on the left and text on right

    It looks like you got the text wrapping ok (looking at the default thumbs). That is done via css, starting with the examples in the tutorial.

    As for the big image showing… odd… try to replace the_content with the_excerpt in index.php of your theme (where the loop is). Maybe it’s a plugin creating that problem. Or you have something in your post custom fields? It’s the big image that is not allowing the text to wrap.

    Ah, that worked a charm, thanks 🙂

    Last 2 things, I’m sorry that I’m draining you, you have been a huge help and I appreciate it a lot, how can change the length of excerpts and how can I say “read more” that’s clickable as apposed to just … at the end just like having the <!–more–> tag?

    And you see on my page how the images are not exactly aligned with the text (the top of the image and the top of the text) how do you suppose I could style it to make it even?

    Ignore the how to get the “read more” up with excerpt’s I got that working 🙂

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘How to make spoiler images?’ is closed to new replies.