WordPress.org

Forums

WP Favorite Posts
add image thumbs into favourites page (12 posts)

  1. sydneycraig
    Blocked
    Posted 3 years ago #

    hi, how do i add image thumbs into
    1 - the main {{wp-favorite-posts}} page
    2 - the widget

    also, if possible how can i then set a size for these image thumbs and align them in a grid

    thanks

    great plugin :)

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

  2. coolkaboodle
    Member
    Posted 3 years ago #

    anyone???

    thanks

  3. SpikeTheLobster
    Member
    Posted 3 years ago #

    You can do the thumbs-on-a-page by building a separate page template (page-my-favorites) and not using the shortcode. I don't know for the widget, but I suspect it'd be similar.

    Here's the useful parts of the template I use for this, with no guarantees it'll work anywhere else (I'm no pro). This shows the faves in pages of 20 ($post_per_page) and uses a previous.png and next.png from an images folder in the active theme directory:

    <div class="page-header">My Favorite Pictures</div>
    		<div class="entry-text"><?php wpfp_clear_list_link(); ?></div>
    		<?php $favorite_post_ids = wpfp_get_user_meta() ?>
    		<?php if ($favorite_post_ids):
    			$favorite_post_ids = array_reverse($favorite_post_ids);
    			$post_per_page = 20;
    			$page = intval(get_query_var('paged'));
    			query_posts(array('post__in' => $favorite_post_ids, 'posts_per_page'=> $post_per_page, 'orderby' => 'post__in', 'paged' => $page)); ?>
    			<div id="fave_posts_thumbnails">
    				<?php while ( have_posts() ) : the_post(); ?>
    					<div class="thumb-gallery"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute() ); ?>"><?php the_post_thumbnail(thumbnail); ?></a><br><div class="remove-link"><?php wpfp_remove_favorite_link(get_the_ID());?></div></div>
    				<?php endwhile; ?>
    			</div>
    			<div style="clear:both;"></div>
    
    			<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } else {
    					$imageloc = get_bloginfo('template_directory');
    					next_posts_link( __( '<div class="nav-previous"><img src="' . $imageloc . '/images/next.png"></div>', 'thisis' ) );
    					previous_posts_link( __( '<div class="nav-next"><img src="' . $imageloc . '/images/previous.png"></div>', 'thisis' ) );
    			}
    			wp_reset_query();
    		else: ?>
    			<div class="entry-text">
    				<?php echo $wpfp_options['favorites_empty']; ?>
    			</div>;
    		<?php endif; ?>
    
    	</div>
        <?php wpfp_cookie_warning();
    	wp_reset_postdata(); ?>

    You'll need a few CSS entries as well, notably fave_posts_thumbnails, thumb-gallery and remove-link. Mine are built to show five 75x100 thumbnails per row, with grey borders which go green on focus, opacity change for the image and a grey remove link which goes red on hover. They look like this:

    #fave_posts_thumbnails {
    	list-style-type: none;
    	list-style-position: inside;
    	padding: 0pt;
    	width: 495;
    	margin: 10px auto 0px auto;
    }
    
    #fave_posts_thumbnails li {
    	float: left;
    	margin: 0px 10px 0px 0px;
    	padding: 5px;
    	display: block;
    	border: 2px solid #c0c0c0;
    	border-radius: 5px;
    	background-color: #FFFFFF;
    }
    
    #fave_posts_thumbnails li:hover {
    	opacity:70;
    }
    
    #fave_posts_thumbnails li a {
    	border: 0pt none;
    	line-height: normal;
    	font-size-adjust: none;
    	font-stretch: normal;
    }
    
    #fave_posts_thumbnails li a+a {
    	display: block;
    	width: 110px;
    	overflow: hidden;
    	height: 75px;
    	color: #333333;
    	text-decoration: none;
    	font: 12px Arial;
    }
    
    #fave_posts_thumbnails img {
    	padding: 0px;
    	margin: 0px;
    	border: 0pt none;
    }
    
    .thumb-gallery {
    	border: 2px solid #c0c0c0;
    	border-radius: 3px;
    	margin: 5px;
    	padding: 3px;
    	float: left;
    }
    
    .thumb-gallery:hover {
    	border: 2px solid #6bff52;
    	border-radius: 3px;
    }
    
    .thumb-gallery img {
    	max-width: 75px;
    	max-height: 100px;
    }
    
    .thumb-gallery img:hover {
    	opacity: 0.7;
    }
    
    .remove-link  a { /* For favorites page */
    	float: right;
    	font-size: 12px;
    	text-decoration: none;
    	color: #808080;
    }
    
    .remove-link a:hover {
    	text-decoration: none;
    	color: #ff0000;

    Hope it helps. I've only built one theme from scratch (the one this is in), so I'm sure there are more efficient ways to do it... but this works on my site. :)

  4. dianay04
    Member
    Posted 2 years ago #

    Thank you very much SpikeTheLobster! this worked perfectly, just had to change some css.

  5. SpikeTheLobster
    Member
    Posted 2 years ago #

    My pleasure: just glad it worked without too much effort for you!!

  6. horatio3666
    Member
    Posted 2 years ago #

    Hi SpikeTheLobster,

    Is there a way that I can display the post title in your code?

    I have been trying but I can't make it work!

    Thanks!

  7. TIEro
    Member
    Posted 2 years ago #

    Er... probably. :)

    (Imagine a 10-minute pause here, while I go and try it!)

    This line in the code determines what is displayed:

    <div class="thumb-gallery"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute() ); ?>"><?php the_post_thumbnail(thumbnail); ?></a><br><div class="remove-link"><?php wpfp_remove_favorite_link(get_the_ID());?></div></div>

    Basically, that says:

    • Set the thumb-gallery class (div)
    • Link points to the post permalink URL (a href)
    • Show the thumbnail (the_post_thumbnail)
    • Line break (br)
    • Set the remove link class for text (div)
    • Place remove link (wpfp_remove_favorite_link)
    • Close classes (div, div)

    So including the title (and a line break so it puts the title above the thumbnail) means adding a bit in front of the "Show the thumbnail" php. It looks like this, at its simplest:

    <div class="thumb-gallery"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute() ); ?>"><?php the_title(); ?><br><?php the_post_thumbnail(thumbnail); ?></a><br><div class="remove-link"><?php wpfp_remove_favorite_link(get_the_ID());?></div></div>

    The problem with that is that it can mess up the layout by making the picture boxes a different size, if the title is more than a dozen or so letters long. The page still displays fine (or did for me) but just looks less tidy.

    I suspect you could work around that with CSS (something about font alignment or justification or similar). Or by having bigger thumbnails. :)

    For example, you could add another div for the title (called "insert class here" in the code below):

    <div class="thumb-gallery"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute() ); ?>"><div class="insert-class-here"><?php the_title(); ?></div><br><?php the_post_thumbnail(thumbnail); ?></a><br><div class="remove-link"><?php wpfp_remove_favorite_link(get_the_ID());?></div></div>

    Hope it helps!

  8. horatio3666
    Member
    Posted 2 years ago #

    Worked a treat!

    Thank you so much, I really appreciate the time you took to help!!

  9. EugeneWebLab
    Member
    Posted 2 years ago #

    Thank you, very much! your code is very usful for me!

  10. ivbscorp
    Member
    Posted 2 years ago #

    Ok I got this to work but not within Buddypress... any thoughts here? I'm using this plugin, BuddyPress Custom Profile Menu to add a tab for whatever page you set. I set it to show the favorites page, and it works for the shortcode, but not for this custom page template.

    Any thoughts would be very much appreciated!

  11. ivbscorp
    Member
    Posted 2 years ago #

    Also, this won't show my custom post types.

  12. TIEro
    Member
    Posted 2 years ago #

    No idea, I'm afraid. I don't use BuddyPress or custom post types with it. You'd have to open a support question for the author, I guess.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • WP Favorite Posts
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic