lauraroverts commented 9 years ago

The current listing on http://www.rain4food.net/rwh-sources/ should be replaced by http://akvopedia.org/wiki/Rainwater_harvesting_sources

Andreas sent me some instructions on how to embed Akvopedia on the site, but I don't think this is something I can do myself.... :

You will need to provide styling at least for images on Akvopedia in your CSS code. You may also need to style additional elements. I hope that we will in the near future add functionality to the akvopedia gadget so that it will load a small style sheet to style only the contents of the articles.

Best regards,

/Andreas

BOILERPLATE CODE

I have two demonstration pages available for how to embed the javascript gadget:

http://testfarm.kreablo.se/resources/akvopedia-gadget-demo2.html http://testfarm.kreablo.se/resources/akvopedia-gadget-demo.html

The demo demo2 is most relevant for you. Let me comment on the code:

<!doctype html>

Akvopedia Gadget Demo 2 The gadget is based on jquery. If you already are loading jquery you will not need this: The javascript can be loaded from Akvopedia like this: I've added a version number (1.1) to the address to avoid caching issues when the script is updated, but this also means that you will have to change the link on your side on updates. I will also maintain the link http://akvopedia.org/resources/akvopedia-gadget/akvopedia-gadget.js to point to the latest version, but if you use this your users will have old versions cached for a while after the script updates. The file http://akvopedia.org/resources/akvopedia-gadget/LATEST will also contain the latest version number. Here is the javascript for initiating the gadget:

Akvopedia is embedded below.

You can use an iframe as a fallback if javascript is disabled:

ARTICLE TITLE

The article title is not part of the article contents, but I have provided a javascript event - akvopedia:title-updated - for setting and updating the title. You must include an element for the title on the page, for instance like this:

And then you must install an event listener, like this:

$('#embedded-akvopedia').on('akvopedia:title-updated', function(event, title) { $('#akvopedia-title').html(title); });

LINKS TO NON-EXISTING ARTICLES

You will get no contents from non-existing articles, but no error will be reported. It might be useful to style links to non-existing articles using the red link convention:

a.new {
    color: #ba0000;
}

IMAGES

You need to provide styling for .thumbinner and .thumbimage. Here is the original css code from Akvopedia:

div.thumb { border: none; width: auto; margin-top: 0.5em; margin-bottom: 0.8em; background-color: transparent; } div.thumbinner { border:1px solid #cccccc; padding: 3px !important; background-color: White; font-size: 94%; text-align: center; overflow: hidden; } html .thumbimage { border: 1px solid #cccccc; } html .thumbcaption { border: none; text-align: left; line-height: 1.4em; padding: 3px !important; font-size: 94%; }

div.magnify {
    display: none;
}
/* @noflip */
div.tright {
    float: right;
    clear: right;
    margin: 0.5em 0 0.8em 1.4em;
}
/* @noflip */
div.tleft {
    float: left;
    clear: left;
    margin: 0.5em 1.4em 0.8em 0;
}
img.thumbborder {
    border: 1px solid #dddddd;
}

You can see the full css code of Akvopedia by following this link:

http://akvopedia.org/wiki/load.php?debug=true&lang=en&modules=mediawiki.legacy.commonPrint%2Cshared|skins.vector&only=styles&skin=vector&*

eefsparreboom commented 9 years ago

Replaced the content with the wiki portal. I have created a shortcode for this a while ago for all akvo sites: [akvopedia portal=Rainwater_harvesting_sources]

lauraroverts commented 9 years ago

thanks

akvo / akvo-sites

Rain4Food replace sources page #178

Akvopedia is embedded below.