Add Image Tags as a CSS Class on the Image Pages & Portraits

New Feature Addition · World presentation layer · Created by nnie
accepted
images image tag tags css
When you add a tag to an image, the tag is added as a css class on the image most of the time the image gets used. However there's at least two exceptions
  • When the image is used as a portrait (or organization crest). Basically whenever an image is added by the larger "add image here" field at the top of the sidebar
  • When you click on the image and go to the image page, the full size version of the image doesn't have the tag css class applied
  This makes images inconsistent, because they'll sometimes have css and sometimes not. The tags are a good way to apply css to some but not all images. I use it to make sure dark images are still visible when on my dark theme. But since the tags aren't always applied as classes, they ironically became even harder to see when you open up the image page than when they're in the article. (I did find a workaround for this for image pages, but there's not an equivalent workaround for the portraits)   Some ways you might use the css classes applied by using tags
  • Apply a stylized filter (like black & white) to characters who are dead
  • Add badges showing what class or faction a character belongs to with ::after
  • Highlight featured images
  • Add a outline when an image is used on backgrounds that might make them hard to see
  A lot of these edits could also be done by editing the image and uploading a variant with that style. But the advantage of css classes you can more easily change which images have the styling applied, and change the styling across *all* images with that tag on your world. Say you wanted to swap out the icon for a faction badge, or change the way you make images distinct from the background. You could edit the css, rather than editing all the images individually.   This all works best when the class is applied on the image everywhere it's used.

The Team's Response

Thanks for the suggestion! We'll add this to our list.
Current score

23/300 Votes · +5602 points

Votes Cast