Fandom

Wikia Developers Wiki

Image previews & more

  • Hi everyone,

    I'd like to request assistance from the Javascript Ninjas here for a project I'm working on over at the Redwall Wiki.

    In this thread, members of the Wikia community assisted me with code about as far as possible: http://community.wikia.com/wiki/Thread:1175677

    I was seeking code that would allow me to retrieve recent blog post titles, timestamps, and images.

    I've implemented that code, with some alterations here: http://redwall.wikia.com/wiki/User:LordTBT/common.js

    And I'm working out what I'd like to end up doing with the code here: http://redwall.wikia.com/wiki/User:LordTBT/Mainpage

    However, the problem I'm running into is when I want to display the blog preview image, the code seems to let me only display ONE, and not MULTIPLE blog preview images.

    Also, it doesn't seem to want to let me display a LARGER blog preview image, and then the smaller thumbnail size too.

    I'm taking inspiration from: http://www.theverge.com/, http://www.recode.net/ & even Wikia Fandom to an extent.

    Thanks!

      Loading editor
    • Hm, you have several versions of that script in your common.js. Could you remove the ones that aren't working/only keep the one that are working the best?

        Loading editor
    • I removed the commented out code at the bottom (which I wanted to either display the "thumbs" or larger images/ whichever the first code didn't display).

      I also removed similar code that was being used for article image retrieval and not blog image retrieval.

      The only code that is there now is the mandatory stuff.

        Loading editor
    • I optimized and fixed the script now. This code works for me on this page. Images might be too big but that's fixed with
      .blogimage img {
          max-width: 500px;
      }
        Loading editor
    • Thank you, KockaAdmiralac.

      That image code goes in Wikia.css?

      And...the way it's displayed on your Sandbox, it's oldest -> newest. I changed this order on my own test page...and the images do not appear...

        Loading editor
    • Because you are still using <span id="blogimage">. In my test page, it's <span class="blogimage"> (which is why I made a test page instead of testing on yours). Only one element in the DOM can have an ID, others are ignored.

        Loading editor
    • Of course it was something I overlooked. Apologies. Looks like everything is squared away except one thing...the image should be displaying to the left of the text, not above it.

        Loading editor
    • Would something like this work?

        Loading editor
    • So I changed the number '5' to '10' - and it successfully retrieves everything except the images (but it does retrieve some images)...

        Loading editor
    • I updated the script, you can copy it from my common.js again. Also, don't forget to remove all other older versions of the script

        Loading editor
    • 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

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.