Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Problem/Motivation
Proposal for adding voting functionality for OS distributions and posts.
Common request in this kind of projects and implementations is that we have some kind of voting functionality (FB, Twitter, other social networks all have it).
And usually this is only like functionality (for some reasons social site implementations do not like dislike option ;)
Additional questions:
- Consider do we need this functionality for content types in groups (topics, events)?
- Voting on groups maybe?
Proposed resolution
For the backend implementation we should decide first on architecture. Most likely we will use https://www.drupal.org/project/votingapi.
For the start check https://www.drupal.org/project/like_and_dislike and just create new module that covers only like functionality. Also check can we just use like_and_dislike and disable dislike option?
When we figure correct backend approach we need to add this functionality to OS (probably as additional feature) with implementation of proposed design.
Remaining tasks
- Define UI.
- Figure which contrib modules we will use (votingapi).
- Backend implementation.
- Frontend implementation.
User interface changes
Configuration screens for enabling and configuring this functionality.
Like widget.
API changes
@todo
Data model changes
@todo
| Comment | File | Size | Author |
|---|---|---|---|
| #17 | dislike.png | 129.7 KB | jochemvn |
| #13 | topic-comment-with-like.png | 84.21 KB | pivica |
| #13 | post-comment-with-like.png | 23.8 KB | pivica |
| #6 | Like in content overview (including sorting).png | 421.8 KB | xinyuma |
| #6 | See who liked mobile.png | 56.78 KB | xinyuma |
Comments
Comment #2
zpul CreditAttribution: zpul as a volunteer and at MontenaSoft commentedpost entity is not covered out-of-the-box in following config:
- Open Social Beta2 installed
- installed like_and_dislike-8.x-1.0-alpha1, votingapi-8.x-3.0-alpha2.tar.gz
- open admin/config/search/votingapi/like_and_dislike
- content types are there, but Post entity not on the list (attachment)
Comment #3
xinyuma CreditAttribution: xinyuma commentedHere is the first version of acceptance criteria as discussed with Ivica and Zeljko:
- We will focus on the basic 'Like' function for now (in future we can look into other ways of reacting to a piece of content such as up/down voting, emotions etc)
- Applicable content types are Event, Topic, Post, Comment, Post Comment and comment reply
- Site manager should be able to turn on and off the like function for each content type (in future it should be possible to select reaction type for each content type)
- The 'Like' activity should be reflected in activity stream and personal notification.
- It should be possible to set permission on who can like a piece of content. Such as all users, only logged in user or only a group member.
- Users should be able to sort contents based on how many 'likes' it receives (on top of the default sorting)
- Users should be able to filter the popular contents for each content type ( x number of contents that have the most likes)
Comment #4
xinyuma CreditAttribution: xinyuma at Open Social commentedHi everyone,
Please find the first draft of the like UI in attached images.
- Like function is presented with a chip element (https://material.google.com/components/chips.html)
- Each chip element consists of an icon and the amount of likes of this content/comment
- By clicking on the chip, users can like a piece of content. When people click the chip again the like can be canceled.
- After a user liked a piece of content, the like icon will change colour informing the user that he/she have liked the content.
- For content overview, two sorting options are provided: recent - latest created at top (default) popular - most like content at top
- For comment, two sorting options are also provided: oldest - oldest comment at top (default and how the comments are sorted at this moment) popular - most like comment at top
Please let me know what you think.
Best,
Xinyu
Comment #5
Selfirian CreditAttribution: Selfirian commentedHi Xinyu,
looks great!
Comment #6
xinyuma CreditAttribution: xinyuma at Open Social commentedHi everyone,
The design proposal has been updated.
- The main change is adding the possibility to see who else also liked the same piece of content. This is an important interaction in the community, not only to the author but to others as well.
- When users click on the like button, a piece of content will be liked and when users click on the '25k likes', a modal window will appear to show who else liked this piece of content.
- In the design, we also added the possibility to like comment replies as well.
- For the teasers of contents, a more compact element is used to save space. In this element, the like icon and amount of likes are shown. When click on this element, a content can be liked as well. This element also tells users whether he/she has liked in this piece of content besides the amount of likes.
Feedback are very welcome and hopefully we can build this for open social distro very soon.
Cheers,
Xinyu
Comment #7
xinyuma CreditAttribution: xinyuma at Open Social commentedThanks Laurent!
Comment #8
pivica CreditAttribution: pivica at MontenaSoft commentedHi Xinyu,
Looks very nice :)
I am progressing with the stuff on my end - can confirm that votingapi and like_and_dislike modules work nice. However there are couple of problems:
Comment #9
maikelkoopman CreditAttribution: maikelkoopman at Open Social commented@pivica. Can you give examples of which fields that are hardcoded provide problems for you now? Is it only node-full.twig? Here it is mainly done to group fields that need to be placed in the card versus outside the card. We can always see how to improve it if we know the details of the constraints.
Comment #10
Selfirian CreditAttribution: Selfirian commentedI noticed the same hardcoded issues as pivica... when adding a new field to a content type, in this case the "like and dislike" field it doesn't show anywhere unless you go and change the template twig files, the impacted OS template would be all of them actually, it just depends on the display view mode you want to change
Comment #11
pivica CreditAttribution: pivica at MontenaSoft commentedI am preparing first patch for like functionality, and in it will start proposing changes for template we need for like. The bigger problem is that this hard coding is happening in other templates also, still didn't check all of them - will update findings about this when i have better picture.
One additional problem i am seeing is using non semantic html on lot of places - hard coding of bootstrap classes and other stuff... then its also pretty hard to override CSS rules when you want - will also start proposing changes for this part ;)
Comment #12
xinyuma CreditAttribution: xinyuma at Open Social commentedThanks a lot for the update @pivica. Look forward to your patch!
Comment #13
pivica CreditAttribution: pivica at MontenaSoft commentedSo finally first version, pushed to https://github.com/pivica/open_social/commits/features/2816429-like-feature.
We are using votingapi and like_and_dislike contrib modules for this. Also patch from #2824535: Show only like or dislike icon in voting widget is needed for like_and_dislike.
Currently we have like functionality enabled for posts, post comments, topics and topic comments. I've created new feature social_like with basic configuration and permissions, and upated social_post and social_topic. First time creating features in D8, and not fully sure how we will orginize like feature so please check it.
Next stuff is missing:
I would propose that 'See who liked' popup feature we move to follow up issue and concentrate here on core like stuffs, what do you think?
So need a review of current code and feature organization, will continue now work on views and then visual implementation.
Attaching screenshots so we can see how stuff currently look
Post with comments with like widget
Topic with comments with like widget
Comment #14
xinyuma CreditAttribution: xinyuma at Open Social commentedThanks @Pivica! Looks great!
Will check who can help to review your work :-)
Comment #15
jochemvn CreditAttribution: jochemvn for Open Social commentedHi Pivica,
I've been looking into your work for the like feature. Great work we're very happy you're helping us by contributing this feature! I have a couple of things I noticed during review. Maybe you can take a look at it?
- Next to like I see also the dislike button. This is not something we want to implement by default
- Could be a good idea to also import default settings for the voting api, which can be found at "/admin/config/search/votingapi"
let me know if everything is clear or if you need help.
kind regards,
Jochem
Comment #16
pivica CreditAttribution: pivica at MontenaSoft commentedYep but this should already be added to new social_like feature - https://github.com/pivica/open_social/tree/features/2816429-like-feature.... Did you enable it? I guess i should added this info to previous comment, sorry for that.
If you see dislike button that means that permissions are not set, this is done by social_like.install.
Voting api configurations are already exported to social_like configurations.
Comment #17
jochemvn CreditAttribution: jochemvn for Open Social commentedHi Pivica,
Sorry for the late reply. I've been looking into your comments. With the votingapi settings I don't mean the votingapi.vote_type.dislike.yml and votingapi.vote_type.like.yml files, but the settings that come with the votingapi itself in votingapi.settings.yml. Maybe those settings are already ok, but it's worth investigating.
Secondly I've reinstalled the module again, but I still see both the like and the dislike button. I've attached a screenshot (dislike.png) so you can see what I mean. We would like the dislike button not te be enabled by default. If you have any questions, please let me know.
kind regards,
Jochem
Comment #18
xinyuma CreditAttribution: xinyuma at Open Social commentedHi @pivica,
Do we have any further progress yet? such as popular views for topic and comment lists and visual implementation. :-)
If you have any questions, we are always here to help.
Cheers,
Xinyu
Comment #19
pivica CreditAttribution: pivica at MontenaSoft commentedHey @xinyuma not yet - fighting with other critical projects and this one currently going slower - need to finish some theming stuff and then first work a bit on post bundle support and then to return to this one - hopefully next week.
Comment #20
xinyuma CreditAttribution: xinyuma at Open Social commentedHey @pivica,
Great, good luck with all the projects and look forward to your further awesome work on 'like'!
Cheers,
Xinyu
Comment #21
jochemvn CreditAttribution: jochemvn for Open Social commentedHi @pivica,
We're happy to inform you that we've implemented the start of the like feature in the Open Social distribution. I want to thank you a lot for your ground work on this feature. We're still going to improve on the feature from here. If you're still interested in helping out, please let us know, so we can inform you on what stuff we want to work on next.
Jochem
Comment #22
maikelkoopman CreditAttribution: maikelkoopman at Open Social commentedFeature is built.