WordPress.org

Ready to get started?Download WordPress

Forums

WP Favorite Posts
[resolved] Show Favorites page in grid?? (25 posts)

  1. asiainorama
    Member
    Posted 1 year ago #

    Hi, I´m aplicating this metod for show tumbails in favorites page.
    But now I need show this tumbails in grid (3 or 4 columns)
    Some help please??

    http://wordpress.org/extend/plugins/wp-favorite-posts/

  2. ksaffy
    Member
    Posted 1 year ago #

    You can do it very easily with CSS styling, e.g. for a ul list. Then just add the ul list class to the template file with the method you're currently using.

    I'm using a 4 column grid style format here:
    http://www.classicgrand.com/gigs/

    All it is, is CSS and I've used the same format for the favourites page.

    For example, this is my code in the favorite posts wpfp-page-template.php

    http://pastebin.com/dAqKFX3X

    My list class is favorite_thumbnails.

  3. asiainorama
    Member
    Posted 1 year ago #

    Hi ksaffy, thank you very much for your help.
    Really I don´t know programing very well.
    I am change the code of wpfp-page-template.php for your code and this is the result:
    Fatal error: Call to undefined function em_get_event() in /public_html/wp/wp-content/plugins/wp-favorite-posts/wpfp-page-template.php on line 3
    I need that favorites page show the same that my other pages.
    Can you help me a little more??

  4. ksaffy
    Member
    Posted 1 year ago #

    OK, don't copy this section

    <?php
    global $post;
    $EM_Event = em_get_event($post->ID, 'post_id');
    ?>

    As this is a global declaration for something that's not related to favorite posts.

    So all you want is:

    <?php
    echo "<div class='wpfp-span'>";
        if (!empty($user)):
            if (!wpfp_is_user_favlist_public($user)):
                echo "$user's Favorite Posts.";
            else:
                echo "$user's list is not public.";
            endif;
        endif;
    
        if ($wpfp_before):
            echo "<p>".$wpfp_before."</p>";
        endif;
    
        echo "";
        echo "<div class='box'>";
       if ( is_user_logged_in() ) {
       global $current_user;
          get_currentuserinfo();
          echo '<h5 class="sub">Welcome ' . $current_user->display_name . "!</h5> ";
    } else {
        echo '<h5 class="sub">Welcome, visitor</h5>';
    }
        echo "Use this space as your own spot on example.com to save the gigs and events that matter most to you! Just click  <img src='http://www.example.com/heart.png' alt='favourite gigs' width='11'> add to my gigs on the event page of any gig you want to save.<br><br>Add as many as you like and make it your own! <br>";
     echo "</div>";
    
         if ($favorite_post_ids):
         $favorite_post_ids = array_reverse($favorite_post_ids);
    
            foreach ($favorite_post_ids as $post_id) {
                $EM_Event = em_get_event($post->ID, 'post_id');
                $p = get_post($post_id);
                $l = get_permalink($post_id);  
    
                echo "<ul id='favorite_thumbnails'><li>";
    
    echo "<a href='".get_permalink($post_id)."'>";
    echo get_the_post_thumbnail ( $post_id, '270x150');
    $EM_Event = em_get_event($post->ID, 'post_id');
    $d = date_i18n(get_option('dbem_date_format'), $EM_Event->start);
            echo "<br>";
    echo "<span><a href='".get_permalink($post_id)."' title='". $p->post_title ."'>" . $p->post_title . "</a></span>";
    wpfp_remove_favorite_link($post_id);
    
                     echo "</li></ul>";
                    echo "</a>";
            }
        else:
       endif;
        echo "";
    echo "<br class='clear'>";
        wpfp_clear_list_link();
    echo "</div>";
        wpfp_cookie_warning();
    ?>

    That should sort your fatal error. Then you need to get your styles sorted for ul list. Are you ok with CSS? I can offer you some advice on how to style your list if you want.

  5. asiainorama
    Member
    Posted 1 year ago #

    Wow!!! Fast response!!
    Here my new results:
    Welcome admin!

    Use this space as your own spot on example.com to save the gigs and events that matter most to you! Just click add to my gigs on the event page of any gig you want to save.

    Add as many as you like and make it your own!

    Fatal error: Call to undefined function em_get_event() in /home/myzap815/public_html/wp/wp-content/plugins/wp-favorite-posts/wpfp-page-template.php on line 31

    Tanks ;D

    PD: I´m using "Pinboard" template.

  6. asiainorama
    Member
    Posted 1 year ago #

    News:
    I was erase lines 31 and 38 and now work, but I see the list (left) and images (right).
    And my Categories section is a grid (4 colums).
    Can I see Favorites the same that Categories?

  7. ksaffy
    Member
    Posted 1 year ago #

    Ah, yes sorry, everything EM related will throw out a fatal error for you. Remember to change the example.com to your own domain (I just used that as a placeholder domain for you). You'll need to define your ul list css. Something like this should give you your grid style. You may want to change your thumbnail image size. I have defined thumbnails of 270x150 each time images are uploaded to my site and that's the size I use for fav posts. You may want to use a different size.

    #favorite_thumbnails{list-style-type:none;list-style-position:inside;padding:0;margin:0}
    #favorite_thumbnails li{float:left;margin:0;padding-left:7px;padding-right:7px;padding-top:2px;padding-bottom: 2px;display:block;opacity:1}
    #favorite_thumbnails li a{border:0 none;line-height:normal;font-size-adjust:none;font-stretch:normal;clear:right}
    #favorite_thumbnails li a+a{position:relative;top:-50px;display:block;padding-left:10px;padding-top:5px;padding-bottom:0;padding-right:0;margin-left:0;width:auto;height:auto;background:#000!important;overflow:hidden;height:40px;color:#FFF!important;text-decoration:none;font:12px Arial;text-transform:uppercase;font-weight:800;opacity:.8}
    #favorite_thumbnails img{padding:2px;margin:0;border:0 none}
    #favorite_thumbnails img:hover{opacity:.3;transition:opacity .5s linear}
  8. asiainorama
    Member
    Posted 1 year ago #

    Incredible!!! Your code work fine for me.
    Thank you for your patient and help me.
    Are you an expert programer??
    I´m working in a new proyect and is posible that I need colaborators.
    If you are interested we can contact us for email.

  9. ksaffy
    Member
    Posted 1 year ago #

    Glad you got it working. I am an expert programmer and web designer, but I have too many projects ongoing at the moment to take any more on. Good luck with yours! :)

  10. asiainorama
    Member
    Posted 1 year ago #

    Ok, nice to meet you and thanks for your help.
    If you are interested in other moment I can pay for your work.
    A greeting.

  11. sydneycraig
    Member
    Posted 1 year ago #

    thanks for the code - works great, but it takes the full size image...
    could i specify that it takes, say the "featured image" that each post has?

    thanks

  12. ksaffy
    Member
    Posted 1 year ago #

    You need to check your theme for your thumbnails. The code

    echo get_the_post_thumbnail ( $post_id, '270x150');

    pulls the thumbnail of the featured image that I used in my theme called 270x150. Your own theme will not use the same, so you'll need to define it. It's most likely 'thumbnail'. In which case you'd use:

    echo get_the_post_thumbnail ( $post_id, 'thumbnail');
  13. sydneycraig
    Member
    Posted 1 year ago #

    @ksaffy genius :)

  14. Babu
    Member
    Posted 1 year ago #

    @ksaffy: It's not working for me...I replaced your code completely in wpfp-page-template.php. i didn't get any favourite post list.

  15. ksaffy
    Member
    Posted 1 year ago #

    You don't replace the above input code completely as this is for my theme and my associated plugins. You need to remove all references to EM and events. If you don't know what you're doing with php, you maybe shouldn't tamper with it. Below is an edited script. Remember, this is for my thumbnail reference and also css code references that applies to my theme.

    <?php
    echo "<div class='wpfp-span'>";
        if (!empty($user)):
            if (!wpfp_is_user_favlist_public($user)):
                echo "$user's Favorite Posts.";
            else:
                echo "$user's list is not public.";
            endif;
        endif;
    
        if ($wpfp_before):
            echo "<p>".$wpfp_before."</p>";
        endif;
    
        echo "";
        echo "<div class='box'>";
       if ( is_user_logged_in() ) {
       global $current_user;
          get_currentuserinfo();
          echo '<h5 class="sub">Welcome ' . $current_user->display_name . "!</h5> ";
    } else {
        echo '<h5 class="sub">Welcome, visitor</h5>';
    }
        echo "Use this space as your own spot on example.com to save the gigs and events that matter most to you! Just click  <img src='http://www.example.com/heart.png' alt='favourite gigs' width='11'> add to my gigs on the event page of any gig you want to save.<br><br>Add as many as you like and make it your own! <br>";
     echo "</div>";
    
         if ($favorite_post_ids):
         $favorite_post_ids = array_reverse($favorite_post_ids);
    
            foreach ($favorite_post_ids as $post_id) {
                $p = get_post($post_id);
                $l = get_permalink($post_id);  
    
                echo "<ul id='favorite_thumbnails'><li>";
    
    echo "<a href='".get_permalink($post_id)."'>";
    echo get_the_post_thumbnail ( $post_id, '270x150');
    echo "<br>";
    echo "<span><a href='".get_permalink($post_id)."' title='". $p->post_title ."'>" . $p->post_title . "</a></span>";
    wpfp_remove_favorite_link($post_id);
    
                     echo "</li></ul>";
                    echo "</a>";
            }
        else:
       endif;
        echo "";
    echo "<br class='clear'>";
        wpfp_clear_list_link();
    echo "</div>";
        wpfp_cookie_warning();
    ?>
  16. Babu
    Member
    Posted 1 year ago #

    @ksaffy: yeah actually i'm a python programmer & not a php. But i'm forced to use php for dis project. Kindly look at my question (http://wordpress.org/support/topic/how-to-display-the-favourite-post-list-with-thumbnail-image-pinboard-theme) and if u have any idea reply me

  17. Babu
    Member
    Posted 1 year ago #

    @ksaffy: dis is the link (i.e- using pinboard theme)

    http://demo.onedesigns.com/pinboard/

  18. ksaffy
    Member
    Posted 1 year ago #

    If you add the above code pasted code and add the ul css for favorite_thumbnails (this is required for the thumbnail layout), it should work for you as a grid style layout (3 or 4 column grid).

    CSS:

    #favorite_thumbnails{list-style-type:none;list-style-position:inside;padding:0;margin:0}
    #favorite_thumbnails li{float:left;margin:0;padding-left:7px;padding-right:7px;padding-top:2px;padding-bottom: 2px;display:block;opacity:1}
    #favorite_thumbnails li a{border:0 none;line-height:normal;font-size-adjust:none;font-stretch:normal;clear:right}
    #favorite_thumbnails li a+a{position:relative;top:-50px;display:block;padding-left:10px;padding-top:5px;padding-bottom:0;padding-right:0;margin-left:0;width:auto;height:auto;background:#000!important;overflow:hidden;height:40px;color:#FFF!important;text-decoration:none;font:12px Arial;text-transform:uppercase;font-weight:800;opacity:.8}
    #favorite_thumbnails img{padding:2px;margin:0;border:0 none}
    #favorite_thumbnails img:hover{opacity:.3;transition:opacity .5s linear}

    The only thing you may need to alter on the above pasted code is the call for the thumbnail. I use:

    echo get_the_post_thumbnail ( $post_id, '270x150');

    which pulls the thumbnail of the featured image that I use in my theme called '270x150'. Your own theme will definitely not use the same, so you'll need to define it. It's most likely 'thumbnail'. In which case you'd use:

    echo get_the_post_thumbnail ( $post_id, 'thumbnail');
  19. Babu
    Member
    Posted 1 year ago #

    @ksaffy : Actually i'm not using "WP Favorite Posts" plugin...I'm using "Wp Posts Playlist" plugin and almost i customized what i need but it's not so good and i can't able to make infinite scroll (i.e load more options), also i can't able to keep delete (remove post) option.
    Now i'm going to use "Wp Posts Playlist" plugin in my proj.(which was used by you) but it is possible to make infinite scroll and masonry effect in your code?

  20. ksaffy
    Member
    Posted 1 year ago #

    You can pull off the masonry effect with css and jquery (call to the list), so just adjust your css and add some jquery in your page header. The grid list code above should scroll infinitely as there's no pagination defined.

    This link should help:

    http://wp.tutsplus.com/tutorials/theme-development/using-jquery-masonry-for-pinterest-like-posting/

  21. Tech4Eleven
    Member
    Posted 1 year ago #

    @ksaffy how did you get the heart to change colors when clicked? There's a related post here in the forums but its incomplete. any help is appreciated.

  22. Tech4Eleven
    Member
    Posted 1 year ago #

    i got it. I just used icons (html) in the "Text for add link" and "Text for remove link" fields and it works perfectly. like

    <i class="icon-remove"></i>. helps that Im using bootstrap. (strappress

  23. ksaffy
    Member
    Posted 1 year ago #

    There's various options. I just created div elements for add link and remove link and set the images with css. Glad you got it to work for you :)

  24. dahlia81
    Member
    Posted 1 year ago #

    Hi @ksaffy. Thank you so much. I'm so close to fixing this plugin because of you. I thought I'd add the full code that worked with all the event info taken out. The css really helped too. Thank you.

    <?php
    echo "<div class='wpfp-span'>";
        if (!empty($user)):
            if (!wpfp_is_user_favlist_public($user)):
                echo "$user's Favorite Posts.";
            else:
                echo "$user's list is not public.";
            endif;
        endif;
    
        if ($wpfp_before):
            echo "<p>".$wpfp_before."</p>";
        endif;
    
        echo "<ul>";
        echo "<div class='box'>";
       if ( is_user_logged_in() ) {
       global $current_user;
          get_currentuserinfo();
          echo '<h5 class="sub">Welcome ' . $current_user->display_name . "!</h5> ";
    } else {
        echo '<h5 class="sub">Welcome, visitor</h5>';
    }
        echo "Enter your sentence here and change the icon url. Just click <img src='http://www.example.com/heart.png' alt='favourite gigs' width='11'> my favorites 'Add to My Faves' on the shopping page of any product you want to save.<br><br><br><br>";
     echo "</div>";
    
         if ($favorite_post_ids):
         $favorite_post_ids = array_reverse($favorite_post_ids);
    
            foreach ($favorite_post_ids as $post_id) {
                $p = get_post($post_id);
                $l = get_permalink($post_id);  
    
                echo "<ul id='favorite_thumbnails'><li>";
    
    echo "<a href='".get_permalink($post_id)."'>";
    echo get_the_post_thumbnail ( $post_id, 'thumbnail');
    echo "<br>";
    echo "<span><a href='".get_permalink($post_id)."' title='". $p->post_title ."'>" . $p->post_title . "</a></span>";
    echo "<br>";
    wpfp_remove_favorite_link($post_id);
    
                     echo "</li></ul>";
                    echo "</a>";
            }
        else:
       endif;
        echo "";
    echo "<br class='clear'>";
            echo "<br>";
    		echo "<br>";
    				echo "<br>";
        wpfp_clear_list_link();
            echo "<br>";
    		echo "<br>";
            echo "<br>";
    echo "</div>";
        wpfp_cookie_warning();
    ?>

    Also don't foreget like I did to still create a new page.php template and add this

    <?php
     /*
     Template Name: myfavoritesII
     */
     ?>
    
     <?php get_header(); ?>
    
    <div class="container_12">
    
        <div class="grid_12">
    
    		<?php wpfp_list_favorite_posts();?>
    
    	</div>
    
    </div>
    
    <?php get_footer(); ?>

    Copy exactly your templates page and insert it instead of the loop and posts php.

  25. Infinityjane
    Member
    Posted 1 year ago #

    i followed the above and i get it almost to work.

    i have 2 questions:

    http://inspiration2you.com/?portfolio=portfolio-big
    (its "loading" somtething after the heart and before the text: Add to favorite
    What is it loading? And how can i remove that

    AND

    http://inspiration2you.com/?page_id=1451

    i can not get it to be grid (5 colums) - and i can not put coloured background on the page - do you know how?

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic