Please or Register to create posts and topics.

Change available reactions

Page 1 of 2Next
Asgaros@asgaros
4,410 Posts
Developer
#1 · May 24, 2019, 4:52 pm

Asgaros Forum v1.14.9 introduces the new asgarosforum_reactions filter which can be used to change the available reactions inside of posts.

 

Add Reaction

The following example (code must be added to the themes functions.php file) shows how a new heart-reaction can be added to the reaction-area:

function add_reactions($reactions) {
  $reactions['heart'] = array(
    'icon' => 'fas fa-heart',
    'screen_reader_text' => __('Click for heart.', 'asgaros-forum')
  );

  return $reactions;
}
add_filter('asgarosforum_reactions', 'add_reactions');
  • hearth: This is the unique slug which is used as an identifier for the added reaction
  • fas fa-heart: This is the icon-class of one of the available FontAwesome icons

To add a color-styling for the added reaction, the following css-rule can be added to Forum -> Appearance -> Custom CSS based on the unique slug of the reaction:

#af-wrapper .post-reactions a:hover .heart,
#af-wrapper .post-reactions .heart .reaction-number,
#af-wrapper .post-reactions .heart .reaction-active {
    color: rgba(233, 30, 197, 1);
}

 

Remove Reaction

The following example (code must be added to the themes functions.php file) shows how the dislike-reaction can be removed from the reaction-area:

function remove_reactions($reactions) {
  unset($reactions['down']);

  return $reactions;
}
add_filter('asgarosforum_reactions', 'remove_reactions');

 

Click for thumbs down.0Click for thumbs up.4
N3k0, RUSev and 2 other users have reacted to this post.
N3k0RUSevtehnicusheavietnam
If you want to support the development of Asgaros Forum, you can leave a good review or donate. Thank you very much!
N3k0@n3k0
95 Posts
#2 · May 31, 2019, 7:29 pm

Love this function, add more personality for each forum 😀

A suggest, how about add a toolbox hover in each icon and display “I Liked”, “I Dislike”, “Loved!”, “custom text for each icon you add”

And i want to add some nice hover effect, something like facebook, but i can make this works :P, example

#af-wrapper .post-reactions .heart,
#af-wrapper .post-reactions .heart .reaction-active {
  	transition: transform .5s; /* Animation */
}

#af-wrapper .post-reactions a:hover .heart {
  transform: scale(1.5);
}

Cheers!

Click for thumbs down.0Click for thumbs up.0
RUSev@rusev
104 Posts
#3 · May 31, 2019, 8:26 pm

Hi @asgaros

Pardon me!

I hope this is due to errors on my site?

Or I should pay attention to this.

Thank you!
Click for thumbs down.0Click for thumbs up.0
Last edited on May 31, 2019, 8:29 pm by RUSev
Asgaros@asgaros
4,410 Posts
Topic AuthorDeveloper
#4 · June 2, 2019, 12:17 pm

Hello @rusev

What you actually mean? Does the example-code produce errors on your site?

Click for thumbs down.0Click for thumbs up.0
If you want to support the development of Asgaros Forum, you can leave a good review or donate. Thank you very much!
Apos37@gogrw
35 Posts
#5 · October 14, 2019, 8:54 pm

This is a great option! Thanks for sharing. Is there a way to add these reactions to the recent topics widget so people can like/dislike them from there instead of having to go all the way into the post?

Click for thumbs down.0Click for thumbs up.1
SolarFlare has reacted to this post.
SolarFlare
Apos37@gogrw
35 Posts
#6 · October 14, 2019, 9:49 pm

I was able to mimic the Facebook reaction icons as closely as possible. Would be nice to actually be able to use an image instead of the font awesome icons, but this is the next best thing:

Here is the PHP I used:

function add_reactions($reactions) {
      $reactions['heart'] = array(
        'icon' => 'fas fa-heart',
        'screen_reader_text' => __('Love', 'asgaros-forum')
      );
      $reactions['laugh'] = array(
        'icon' => 'fas fa-grin-tears',
        'screen_reader_text' => __('Haha', 'asgaros-forum')
      );
      $reactions['surprise'] = array(
        'icon' => 'fas fa-surprise',
        'screen_reader_text' => __('Wow', 'asgaros-forum')
      );
      $reactions['sad'] = array(
        'icon' => 'fas fa-sad-tear',
        'screen_reader_text' => __('Sad', 'asgaros-forum')
      );
      $reactions['angry'] = array(
        'icon' => 'fas fa-angry',
        'screen_reader_text' => __('Angry', 'asgaros-forum')
      );
      return $reactions;
}
add_filter('asgarosforum_reactions', 'add_reactions');

 

And the CSS:

#af-wrapper .post-reactions .reaction-icon::before,
#af-wrapper .post-reactions a:hover,
#af-wrapper .post-reactions .reaction-active {
    font-size: 30px !important;
    text-shadow: 1px 1px #000000;
    transition: transform 2s;
}
#af-wrapper .post-reactions .reaction-number {
    font-size: 10px;
}
#af-wrapper .post-reactions a:hover .down,
#af-wrapper .post-reactions .down .reaction-icon::before,
#af-wrapper .post-reactions .down .reaction-number,
#af-wrapper .post-reactions .down .reaction-active {
    color: #D5234C;
}
#af-wrapper .post-reactions a:hover .up,
#af-wrapper .post-reactions .up .reaction-icon::before,
#af-wrapper .post-reactions .up .reaction-number,
#af-wrapper .post-reactions .up .reaction-active {
    color: #548DFF;
}
#af-wrapper .post-reactions a:hover .heart,
#af-wrapper .post-reactions .heart .reaction-icon::before,
#af-wrapper .post-reactions .heart .reaction-number,
#af-wrapper .post-reactions .heart .reaction-active {
    color: #F55064;
}
#af-wrapper .post-reactions a:hover .laugh,
#af-wrapper .post-reactions .laugh .reaction-icon::before,
#af-wrapper .post-reactions .laugh .reaction-number,
#af-wrapper .post-reactions .laugh .reaction-active {
    color: #FFDA6A;
}
#af-wrapper .post-reactions a:hover .surprise,
#af-wrapper .post-reactions .surprise .reaction-icon::before,
#af-wrapper .post-reactions .surprise .reaction-number,
#af-wrapper .post-reactions .surprise .reaction-active {
    color: #FFDA6A;
}
#af-wrapper .post-reactions a:hover .sad,
#af-wrapper .post-reactions .sad .reaction-icon::before,
#af-wrapper .post-reactions .sad .reaction-number,
#af-wrapper .post-reactions .sad .reaction-active {
    color: #FFDA6A;
}
#af-wrapper .post-reactions a:hover .angry,
#af-wrapper .post-reactions .angry .reaction-icon::before,
#af-wrapper .post-reactions .angry .reaction-number,
#af-wrapper .post-reactions .angry .reaction-active {
    color: #D5234C;
}

 

Uploaded files:
  • Capture.PNG
Click for thumbs down.0Click for thumbs up.3
Last edited on October 14, 2019, 10:58 pm by Apos37
Asgaros, Andreas and Thierry have reacted to this post.
AsgarosAndreasThierry
jan-1988@jan-1988
2 Posts
#7 · July 18, 2023, 6:34 pm

I know this topic is quite old, but I have question regarding this topic.

How can I display the number of heart reactions in a user’s profile? By default, only the number of thumbs up is displayed here.

Click for thumbs down.0Click for thumbs up.0
Asgaros@asgaros
4,410 Posts
Topic AuthorDeveloper
#8 · August 3, 2023, 12:19 pm

Hello @jan-1988

For this you probably have to use the asgarosforum_custom_profile_content hook to add your custom logic (displaying and calculation).

Click for thumbs down.0Click for thumbs up.0
If you want to support the development of Asgaros Forum, you can leave a good review or donate. Thank you very much!
buddybudbud@buddybudbud
14 Posts
#9 · March 20, 2024, 8:28 pm

@asgaros When I post just the heart code it works fine, but if I post multiple reactions I get a website critical errors.

function add_reactions($reactions) {
$reactions[‘amar’] = array(
‘icon’ => ‘fas fa-heart’,
‘screen_reader_text’ => __(‘Amar’, ‘asgaros-forum’)
);
return $reactions;
}

function add_reactions($reactions) {
$reactions[‘divertido’] = array(
‘icon’ => ‘fas fa-laugh’,
‘screen_reader_text’ => __(‘Divertido’, ‘asgaros-forum’)
);
return $reactions;
}

function add_reactions($reactions) {
$reactions[‘triste’] = array(
‘icon’ => ‘fas fa-sad-tear’,
‘screen_reader_text’ => __(‘Triste’, ‘asgaros-forum’)
);
return $reactions;
}

function add_reactions($reactions) {
$reactions[‘enojado’] = array(
‘icon’ => ‘fas fa-angry’,
‘screen_reader_text’ => __(‘Enojado’, ‘asgaros-forum’)
);
return $reactions;
}

function add_reactions($reactions) {
$reactions[‘sorprendido’] = array(
‘icon’ => ‘fas fa-surprise’,
‘screen_reader_text’ => __(‘Sorprendido’, ‘asgaros-forum’)
);
return $reactions;
}

function add_reactions($reactions) {
$reactions[‘genialidad’] = array(
‘icon’ => ‘fas fa-fire’,
‘screen_reader_text’ => __(‘Genialidad’, ‘asgaros-forum’)
);
return $reactions;
}

function add_reactions($reactions) {
$reactions[‘elegante’] = array(
‘icon’ => ‘fas fa-lightbulb’,
‘screen_reader_text’ => __(‘Elegante’, ‘asgaros-forum’)
);
return $reactions;
}

add_filter(‘asgarosforum_reactions’, ‘add_reactions’);

Click for thumbs down.0Click for thumbs up.0
Last edited on March 24, 2024, 7:22 pm by buddybudbud
buddybudbud@buddybudbud
14 Posts
#10 · March 24, 2024, 7:12 pm

Figured it out, you only need one “return $reactions;”

https://stackoverflow.com/questions/78215621/wordpress-coding-critical-error-asgaros-forum-reactions-to-posts

Click for thumbs down.0Click for thumbs up.0
Last edited on March 25, 2024, 4:54 pm by buddybudbud
Page 1 of 2Next