XF 1.4 Moving Likes to Control Bar

[Amaury]

I'd like to add a "View Likes" link in the controls bar to the right of Like / Unlike (it's shown differently below, but yeah) that will bring up the like listings overlay (rather than having to wait for four or more people to like the content); in addition, if there are no likes, the link will not display.

How can I accomplish this? I've already managed to hide the likes bar with CSS.

Here's a mockup:



Thanks!

 

[Jeremy]

<a href="{xen:link 'posts/likes', $post}" class="item control OverlayTrigger">View Likes</a>

 

[Amaury]

<a href="{xen:link 'posts/likes', $post}" class="item control OverlayTrigger">View Likes</a>

Which template would I edit?

 

[Optic]

@Maru: the area you want to edit should be in the post template.

You probably want to add your new link just after:

<xen:if is="{$post.canLike}">
<a href="{xen:link posts/like, $post}" class="LikeLink item control {xen:if $post.like_date, unlike, like}" data-container="#likes-post-{$post.post_id}"><span></span><span class="LikeLabel">{xen:if $post.like_date, {xen:phrase unlike}, {xen:phrase like}}</span></a>
</xen:if>

 

[Amaury]

@Maru: the area you want to edit should be in the post template.

You probably want to add your new link just after:

<xen:if is="{$post.canLike}">
<a href="{xen:link posts/like, $post}" class="LikeLink item control {xen:if $post.like_date, unlike, like}" data-container="#likes-post-{$post.post_id}"><span></span><span class="LikeLabel">{xen:if $post.like_date, {xen:phrase unlike}, {xen:phrase like}}</span></a>
</xen:if>

Got it. However, I've run into an issue and a conditional issue:

• It is not showing on my own posts.
• How do I make so it only shows if the post has likes?

 

[Jeremy]

You can't like your own post, so obviously it will not show on your own posts if you include that conditional.

 

[Amaury]

You can't like your own post, so obviously it will not show on your own posts if you include that conditional.

Sorry, let me clarify. The conditional would make it so the "View Likes" link only appears on posts that have been liked. My issue right now is that it's appearing on posts that don't have any likes as well. In addition, the "View Likes" link is not viewable on my own posts, and even on a default style, you can still see how many people have liked your posts.

 

[mike406]

This is what we needed.

<xen:if is="{$post.likes}">
        <a href="{xen:link 'posts/likes', $post}" class="item control OverlayTrigger">{xen:phrase khflare_view_likes}</a>
</xen:if>

 

[Amaury]

This is what we needed.

<xen:if is="{$post.likes}">
        <a href="{xen:link 'posts/likes', $post}" class="item control OverlayTrigger">{xen:phrase khflare_view_likes}</a>
</xen:if>

And in regard to the first part, I completely misunderstood what @Optic said. I placed the code @Jeremy gave underneath the Like/Unlike link within the conditional there, which is why it wasn't showing for people's own posts.

Thank you all for the help.

 

[Amaury]

So @Nights brought up a good point on our site:

Maybe add a like counter to display the number of likes a post has received. I might take a look at this later. I feel like not displaying how many likes a post receives takes away from the aesthetic you're trying to appease with the view likes link. I like the idea but a like counter would be nice to have as well.

How can I accomplish this? Would I add some variable to the phrase to make it appear as View Likes: X?

Also, when you like or unlike a post, the likes bar automatically appears or disappears. Is there any way to get the View Likes link we added to automatically appear or disappear after liking or unliking a post with out having to refresh the page?

 

[Amaury]

In regard to the first question above, I tried adding {count} to the phrase to no avail. I'm assuming I have to edit the phrase I have in the template as well and add something?

 

[Amaury]

I think I got it:

<a href="{xen:link 'posts/likes', $post}" class="item control OverlayTrigger">{xen:phrase khflare_view_likes, 'count={xen:number $post.likes}'}</a>