Bug #18288
closed"Fork me on GitHub" ribbon is missing
0%
Description
There used to be one on the top right of https://khatchad.commons.gc.cuny.edu/teaching/csci-40500-77100-software-engineering-sp-21/syllabus, for example. Looks like the icon is now missing. Has the plug-in been updated recently?
Updated by Boone Gorges over 1 year ago
- Status changed from New to Reporter Feedback
The plugin has not been updated since initial installation, so I'm unsure why anything would have changed.
The "Fork me" UI was, in fact, appearing, but it was unstyled and was hidden amongst some other elements on the page. I looked in the plugin code to see why this might not be happening, and it looks like the plugin only loads its CSS files when the "CSS3" option is selected at https://khatchad.commons.gc.cuny.edu/wp-admin/options-general.php?page=github-ribbon. I've made that change, and the ribbon now appears. Does this look OK to you?
I'm unsure why the plugin is totally unstyled without that option selected. Seems like a bug in the plugin. But if you're satisfied with the appearance now that the plugin is configured to use the "CSS3" setting, I won't sink any more time into debugging it.
Updated by Raffi Khatchadourian over 1 year ago
That's weird. It was working with the "image ribbons" before. Yeah, it's probably a pretty dated plugin.
Updated by Raffi Khatchadourian over 1 year ago
Hm. The "image ribbon" behaves differently; it says on the screen when you scroll down. The CSS3 one does not. But, I can live with it.
Updated by Raffi Khatchadourian over 1 year ago
Strange that it was working though.
Updated by Raffi Khatchadourian over 1 year ago
Ah! I fixed it by editing the image source in the Chrome dev tools! I think that the src for the image is incorrect and inaccessible after doing an "inspect" in Chrome:
<img style="position: fixed; top: 0; right: 0; border: 0;z-index:100000" src="//s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub">
I'm not sure what src="//s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" means, and if I change it to src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png", I get "access denied" from AWS. I found the ribbons here: https://github.blog/2008-12-19-github-ribbons. I then changed it to:
<img style="position: fixed; top: 0; right: 0; border: 0;z-index:100000" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_red_aa0000.png" alt="Fork me on GitHub">
And it now works as it used to.
Updated by Boone Gorges over 1 year ago
- Status changed from Reporter Feedback to Staged for Production Release
- Target version set to 2.1.8
Ah, that probably explains it. The //s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png URL appears to point to a GitHub AWS bucket that no longer exists, or is no longer public. So the change wasn't on the WP side, but on the GitHub side.
You've switched it to point to a URL on the GitHub blog, but I have little faith that the blog post will be available indefinitely.
I hate the idea of fixing and forking tools, but in this case, the plugin hasn't been updated in many years, and the fix is easy. The image simply needs to be loaded from the plugin itself. I've made the necessary changes in https://github.com/cuny-academic-commons/cac/commit/a6a004b3d0646d80c5ff62c73413af336eb90c5d and they will be part of the next maintenance release. In the meantime, the CSS3 config option should work.
Updated by Boone Gorges over 1 year ago
- Status changed from Staged for Production Release to Resolved
Updated by Raffi Khatchadourian over 1 year ago
Ah, now the ribbon is on the wrong side. It's on the left even though I selected "red right" it in the settings.
Updated by Raymond Hoh over 1 year ago
Ah, now the ribbon is on the wrong side. It's on the left even though I selected "red right" it in the settings.
I've updated Boone's fix so it checks for ribbon direction and offsets the top position due to the admin bar height in https://github.com/cuny-academic-commons/cac/commit/9cbfdf6ba60222759c094460fe36efa1dfbcc4c1 . This is deployed on production as well.
Updated by Raffi Khatchadourian over 1 year ago
Thanks, Raymond! Looks even better than before!