FANDOM


  • As per this post, I wanted to know if there's a way to have unique images for multiple headers on a page without creating a new class for each separate header. Basically, my wiki is for a game, each area in the game has sub-areas that are separated on the page by their own headers. We created images for each sub-area, but recently to save space wanted to put the images as backgrounds in the header itself. I want there to be a way for whoever's editing to use one class/template and input the URL of the image and have it auto-formatted into the background.

      Loading editor
    • the problem is: you can't let random users to set arbitrary urls. background-image will be loaed automaically, once the url set. imagien that someone set url like "xxxhub.com/my_favorite_actress" or "mytracking.cookiestealer.com" - all readers will be affected, someone will report staff... do you really need this?

      i'd suggest to create some pool of backgrounds, with unique classes, and let users to define class. yes, you will need dozens of classes, but it is like the only safe way.

        Loading editor
    • Fngplg wrote:
      the problem is: you can't let random users to set arbitrary urls. background-image will be loaed automaically, once the url set. imagien that someone set url like "xxxhub.com/my_favorite_actress" or "mytracking.cookiestealer.com" - all readers will be affected, someone will report staff... do you really need this?

      i'd suggest to create some pool of backgrounds, with unique classes, and let users to define class. yes, you will need dozens of classes, but it is like the only safe way.

      I suppose that makes sense, though I don't see how that would be any different from how users can already upload or link to nsfw/spam sites.

      I'm fine with a ton of classes if that's how it's gotta be, I was just wondering if there was a cleaner way to do that. Our CSS page is getting full as is lol.

        Loading editor
    • Zigmatism#3
      I don't see how that would be any different from how users can already upload or link to nsfw/spam sites

      the difference: when you see a link, you may or may not click on it. it will be totally your desire. unlike malicious background image, that will be loaded unconditionally for each your reader.

      there might be "cleaner" way: use file: and absolute position, in order to place header text above the image.

        Loading editor
    • Fngplg wrote:
      Zigmatism#3
      I don't see how that would be any different from how users can already upload or link to nsfw/spam sites

      the difference: when you see a link, you may or may not click on it. it will be totally your desire. unlike malicious background image, that will be loaded unconditionally for each your reader.

      there might be "cleaner" way: use file: and absolute position, in order to place header text above the image.

      I suppose that makes sense. What about this:

      Our header images are all formatted the same way, "/File:Area_Art_[name].png"

      Would it be possible for a script to find the stored image based on just a word, so that for example putting in "Dirtmouth" as the Parameter would bring up "/File:Area_Art_Dirtmouth.png"? That would prevent vandalism via linking to other sources.

      If not, I'll work with the suggestions provided.

        Loading editor
    • it is possible. i'd still suggest non-script approach: templates and styles are simpler to maintain than js.

        Loading editor
    • Fngplg wrote:
      it is possible. i'd still suggest non-script approach: templates and styles are simpler to maintain than js.

      You're very right. Well, off to work then!

        Loading editor
    • smth like
      some text above
      <div class="myheader">
      <div class="myheader-image">[[File:1.png]]</div>
      <h1 class="myheader-text">the header</h1>
      </div>
      some text below
      css:
      .myheader {
          position: relative;
          max-height: 50px;
          overflow: hidden;
      }
      .myheader-image img {
          width: 100%;
      }
      .myheader-text {
          position: absolute;
          top: 0;
      }
        Loading editor
    • Fngplg wrote:
      smth like
      some text above
      <div class="myheader">
      <div class="myheader-image">[[File:1.png]]</div>
      <h1 class="myheader-text">the header</h1>
      </div>
      some text below
      css:
      .myheader {
          position: relative;
          max-height: 50px;
          overflow: hidden;
      }
      .myheader-image img {
          width: 100%;
      }
      .myheader-text {
          position: absolute;
          top: 0;
      }
      </div>
      </div>
      This might be useful, or at least more customizable, thanks!
        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+