WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to make spoiler images? (18 posts)

  1. Aseenus
    Member
    Posted 4 years ago #

    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?

  2. Aseenus
    Member
    Posted 4 years ago #

    bump

  3. buddha trance
    Member
    Posted 4 years ago #

    This tutorial works wonderfully. Once set up, the thumbnail is generated automatically.
    http://www.problogdesign.com/wordpress/automatic-wordpress-thumbnail-without-custom-field/

  4. Aseenus
    Member
    Posted 4 years ago #

    Thanks heaps mate :)

  5. Aseenus
    Member
    Posted 4 years ago #

    I'm actually having a problem calling the images though.. I put in <img src="http://www.xin-gaming.com/wp-content/uploads/2009/12/muru.jpg" 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 150x150 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?

  6. buddha trance
    Member
    Posted 4 years ago #

    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.

  7. buddha trance
    Member
    Posted 4 years ago #

    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?

  8. Aseenus
    Member
    Posted 4 years ago #

    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”;}`

  9. therealmichaelkirschner
    Member
    Posted 4 years ago #

    I know that theme that's Arthemia

  10. buddha trance
    Member
    Posted 4 years ago #

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

    <?php
    // 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;
    $start=$imgEnd+1;  
    
    $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
    ?>
  11. buddha trance
    Member
    Posted 4 years ago #

    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">
    </a></div>

    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.

  12. buddha trance
    Member
    Posted 4 years ago #

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

  13. Aseenus
    Member
    Posted 4 years ago #

    Never mind thanx mate I got it fixed :D

    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

  14. buddha trance
    Member
    Posted 4 years ago #

    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.

  15. Aseenus
    Member
    Posted 4 years ago #

    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?

  16. Aseenus
    Member
    Posted 4 years ago #

    Ignore the how to get the "read more" up with excerpt's I got that working :)

  17. buddha trance
    Member
    Posted 4 years ago #

    Great you got that working!

    The alignment is in the css. Did you add it to your theme style.css?

    this is what I have, you can test it and see if it aligns better this way (play with padding and margin):

    .thumbnail a:link, .thumbnail a:visited {display:block; float:left; padding:2px; background:#C4C4C4; width:150px; height:150px; margin:5px 8px 0 0;}
    .thumbnail a:hover, .thumbnail a:active {background:#000;}
  18. Aseenus
    Member
    Posted 4 years ago #

    Thanks a lot champ, I got it working exactly how I wanted, really appreciate it! :D

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.