Problem/Motivation

Social media icons should be made configurable through a theme settings form.

Remaining tasks

As of now though the previous issue of social media icons is not visible is solved, but there are still some scope of improvement on it:

1. The a tag is missing href, title and aria-label attribute which will cause accessibility issue.
2. Styling of cursor should be changed to a pointer on these, which generally done in case of all a tags.
3. It'll be better in terms of performance to use any icon-font library like fontawesome or icomoon icons instead of wrapping svg icons over an img tag.
4. To ease the UX, IMO it'll be better to have these configurable through a theme settings form. Its not handy to override templates to add desired social media links!

User interface changes

I loved the way the hover effects have been incorporated with the gradients, but a bit sceptical about the X logo hover effect, tbh not looking that great to me.

CommentFileSizeAuthor
#17 Screenshot from 2025-01-31 15-16-03.png51.61 KBhetal.solanki
#13 animal-shelter_without-heading.png122.59 KBtirupati_singh
#13 animal-shelter_with-heading.png132.72 KBtirupati_singh
#13 animal-shelter_config.png64.99 KBtirupati_singh
#8 Screenshot from 2024-11-06 15-58-05.png45.83 KBsourojeetpaul
#6 X-logo.png123.9 KBdivya.sejekan
#6 XonHover.png121.81 KBdivya.sejekan
#4 TwitterHover.png69.59 KBdivya.sejekan
#4 instagramHover.png73.04 KBdivya.sejekan
#4 FacebookHover.png115.47 KBdivya.sejekan
#4 desktopAfterFix.png161.15 KBdivya.sejekan
#3 fixed-version.png780.68 KBshweta__sharma
Screenshot at Jan 16 15-18-17.png1.16 MBshweta__sharma

Issue fork animal_shelter-3414932

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

shweta__sharma created an issue. See original summary.

shweta__sharma opened merge request !2

shweta__sharma’s picture

shweta__sharma commented
Status: Active » Needs review
StatusFileSize
new fixed-version.png780.68 KB

Fixed the social media icon path issue. Kindly review it.
Thanks

divya.sejekan’s picture

divya.sejekan commented
Status: Needs review » Needs work
StatusFileSize
new desktopAfterFix.png161.15 KB
new FacebookHover.png115.47 KB
new instagramHover.png73.04 KB
new TwitterHover.png69.59 KB

Verified and issue is fixed
Verified on drupal 9.5x with MR! 2 #3

But since twitter is changed to X , its icon also needs to change. So moving it to need Work

shweta__sharma’s picture

shweta__sharma commented
Status: Needs work » Needs review

Updated twitter icon with the new one. Kindly review it.
Thanks

divya.sejekan’s picture

divya.sejekan commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new XonHover.png121.81 KB
new X-logo.png123.9 KB

Verified the updated twitter icon .. look fine
Moving to RTBC

sourojeetpaul’s picture

sourojeetpaul commented
Status: Reviewed & tested by the community » Needs work

Hello everyone,
Thanks for taking time out and working on the issue. I appreciate the efforts. Though the MR looks good and apparently solves the issue, but I see further scope of improvement on it.
1. The a tag is missing href, title and aria-label attribute which will cause accessibility issue.
2. Styling of cursor should be changed to a pointer on these, which generally done in case of all a tags.
3. It'll be better in terms of performance to use any icon-font library like fontawesome or icomoon icons instead of wrapping svg icons over an img tag.
4. To ease the UX, IMO it'll be better to have these configurable through a theme settings form. Its not handy to override templates to add desired social media links!

I loved the way the hover effects have been incorporated with the gradients, but a bit sceptical about the X logo hover effect, tbh not looking that great to me, on bonus if anyone can come up with any alternative hover effect that'll also be appreciated!
Hence I'm moving this issue to NW again and updating the IS for better clarity :)

sourojeetpaul’s picture

sourojeetpaul commented
StatusFileSize
new Screenshot from 2024-11-06 15-58-05.png45.83 KB

This is what wave tools is also reporting in terms of accessibility that I've mentioned on my previous comment!
Also on using img tag alt attribute is missing. Though I'd like to get rid of img tags here :)

sourojeetpaul’s picture

sourojeetpaul commented
Issue tags: +Needs issue summary update, +Needs issue rescope
sourojeetpaul’s picture

sourojeetpaul commented
Issue summary: View changes
Issue tags: -Needs issue summary update, -Needs issue rescope
sourojeetpaul’s picture

sourojeetpaul commented
Title: Social media icons are not visible » Social media icons should be configurable
tirupati_singh’s picture

tirupati_singh commented
Assigned: Unassigned » tirupati_singh

Working on it.

tirupati_singh’s picture

tirupati_singh commented
Assigned: tirupati_singh » Unassigned
Status: Needs work » Needs review
StatusFileSize
new animal-shelter_config.png64.99 KB
new animal-shelter_with-heading.png132.72 KB
new animal-shelter_without-heading.png122.59 KB

Hi @sourojeetpaul, I've added the configuration fields for social media icons. Additionally, I've added a field to Show/Hide social media title element. Please review the MR changes. Attaching the screenshots for your reference.

Thanks!

sourojeetpaul’s picture

sourojeetpaul commented
Status: Needs review » Needs work

Hi @tirupati_singh,
Thanks for taking your time out and picking up the issue. The changes look good to me. But the MR is having some errors, can you kindly resolve those, then I'd be happy to ship it in!

tirupati_singh’s picture

tirupati_singh commented
Status: Needs work » Needs review

Hi @sourojeetpaul, I've updated the MR. Please review the changes.
Thanks!

hetal.solanki’s picture

hetal.solanki
Primary language English
commented

@tirupati_singh

Reviewing the changes, thanks!

hetal.solanki’s picture

hetal.solanki
Primary language English
commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new Screenshot from 2025-01-31 15-16-03.png51.61 KB

@sourojeetpaul @tirupati_singh

I thoroughly reviewed both MR and the Social Icon Configure. So it's looks good to me.

Please check uploaded screenshot.

So i am moving this to RTBC.

Thank you!!

sourojeetpaul’s picture

sourojeetpaul commented
Status: Reviewed & tested by the community » Fixed

Thanks all for your contribution on this issue. The changes look good! Hence I'm going forward with this!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.