5,140 Pages

  • Creating a godsheet may not be the most elegant solution, but here's the CSS for the background images: User:Emptylord/common.css. (It have it implemented here.)

    I'm not sure if it's possible, but feel free to move that article to something like "User:Emptylord/backdrop.css" and then just add "@import User:Emptylord/backdrop.css" - I don't mind burdening the responsibility for maintaining it when new champs come out (saves you the effort; also, any mod would be able to edit it without having access to the rest of the css).

    Overall, Javascript would probably be more elegant... especially if you can stick it in a template like
    {{background|image=Kog'Maw Monarch}}
    so users can implement backgrounds wherever they please.
      Loading editor
    • I'd go with JavaScript as well. Also, have we considered the overhead of loading an image?

        Loading editor
    • I was never very good at Javascript.

      And I hadn't, no.

        Loading editor
    • This:

      <div data-url="{{FILEPATH:SonaSquare.png}}">Sona</div>

      gives:

      Sona
        Loading editor
    • That... handles if an image is updated? As in, you wouldn't need to update the stylesheet every time a splash was changed?

      How do you use Wikia's magic words in Javascript? Or do you just use them as normal? I know you can't use them in stylesheets. I'm going to teach myself Javascript and make the background generation stuff, but the main thing I don't understand is how Wikia and Javascript interact. I know I have common.js, but how exactly do I call javascript in an element?

        Loading editor
    • So I just tried:

      $("head").append("<style> .backdrop {   z-index: -1;   position:absolute;   width:100%;   height:717px;   overflow:hidden;   opacity: 0.6;   background-repeat: no-repeat;   background-position: center top; } .fade {   position: absolute;    width:100%;   height:717px;   background:transparent;   background: linear-gradient(top, rgba( 14, 24, 34, 0 ) 0%, rgba( 14, 24, 34, 1 ) 95% );   background: -moz-linear-gradient(top, rgba( 14, 24, 34, 0 ) 0%, rgba( 14, 24, 34, 1 ) 95% );   background: -ms-linear-gradient(top, rgba( 14, 24, 34, 0 ) 0%, rgba( 14, 24, 34, 1 ) 95% );   background: -o-linear-gradient( top, rgba( 14, 24, 34, 0 ) 0%, rgba( 14, 24, 34, 1 ) 95% );   background: -webkit-linear-gradient( top, rgba( 14, 24, 34, 0 ) 0%, rgba( 14, 24, 34, 1 ) 95% );} </style>");

      And it works. Obviously, that's the _easy_ part of the stylesheet.

      So we just need to get this to work:

      $("head").append("<style> .{{BASEPAGENAME}}bg {background-image:url("{{FILEPATH:{{BASEPAGENAME}} OriginalSkin.png}}");}</style>");

      Unless magic words work just like that in Javascript? In which case, that should work already.

        Loading editor
    • I was thinking of putting the filepath call within the page code, to make obtaining the url easier (meaning we don't have to wait for the extra call to the API). But if you're keen on keeping the page source code clear of this, then: api.php?action=query&titles=File:SonaSquare.png&prop=imageinfo&iilimit=1&iiprop=url

        Loading editor
    • I'm not keen on anything in particular - you probably know more about all this than me. ;)

        Loading editor
    • With pure JS, we end up doing:

      // For older browsers with lack of Object.keys()
      if (!Object.keys) { Object.keys = function (object) { var keys = []; for (var key in object) { if (object.hasOwnProperty(key)) { keys.push(key); } } } }
      $.getJSON('http://leagueoflegends.wikia.com/api.php?action=query&format=json', {
          //indexpageids: '', // Object.keys()
          titles: 'File:SonaSquare.png',
          prop: 'imageinfo',
          iilimit: 1,
          iiprop: 'url',
      }).done(function(data) {
          mw.log('API result:', data);
          // undefined checks omitted for brevity
          var query = data.query;
          var id = Object.keys(query.pages)[0]; // Because titles only has one name.
          var url = query.pages[id].imageinfo[0].url;
          // Do something with url
          alert('URL: ' + url);
      }).fail(function(error) {
          mw.log('API failed:', error);
      });
      

      Edit: fixed syntax error

        Loading editor
    • And that just works?

        Loading editor
    • Yep, it will output the URL. It's then up to someone as to what they want to do with the URL. The code that uses the image has to be put within the callback for $.getJSON().done(). Usage of the URL is then at the mercy of the asynchronous callback of the API. Image display is at the mercy of network speed or cache. (One reason I'm against this whole idea. It's just fluff.)

        Loading editor
    • an anonymous contributor
        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.