Contributing - The Technical Side

Editing, Markdown, images, links etc

Practice editing

Sandbox

You can practice editing pages in the Sandbox - to view this book you need to be logged in to the Rebel Toolkit - click 'Log in' at the top right and use your Hub log in details.

Basic Markdown code

The Rebel Toolkit uses something called 'Markdown' to create things like title in larger font, bold, bullet point lists and more.

Creating different sized titles use the 'hash'

#(space)A big title

this becomes

A very big title

###(space)A regular sized title - we use this a lot

Regular sized title - we use this a lot

#####(space)Used for a sub-heading

Used for a sub-heading

**(no space)Bold text**

Bold text

Go here to see a page in the 'sandbox' with an example of all of this.

Editing Pages

The Rebel Toolkit was originally designed and a 'wiki' - a collaborative space for any rebel with a Communications Hub login to add and update. But over the years it got out of date and repetative with no overal vision to hold it together.

So from Sep 2023 onwards, the overall Rebel Toolkit has been curated by the Rebel Toolkit team within the Local Group Support circle.

You can apply to the Rebel Toolkit team to edit certain books or pages if they contain guidance that your role or circle has mandate over. You can then have access to maintain a particular shelf, book chapter or page.

More details of this change can be found here.

Note that the Rebel Toolkit is visible to everyone on the Internet. Please do not publish personal email addresses, Mattermost invite links or Zoom call details that include the passcode, or links to documents containing such things.

It is discouraged to link to external documents (eg Google documents) and encouraged to have as much content written directly on the toolkit as possible.

Signing Up and Logging In

In order to edit the content on this web site, you need to be logged in.

The user accounts on this web site are tied to the accounts on the XR Communications Hub.

To sign up to the Rebel Toolkit, click the 'Sign up' link at the top of the home page. Make sure you click on the SIGN UP WITH UK HUB button first and ignore the name, email and password fields on the Sign Up page. You will need your Hub user name and password, unless you are already logged in to the Hub.

Logging in subsequently is done also with your Hub user name and password. Click on LOGIN WITH XR UK HUB on the Log In page.

Note that this web site is visible to the general public on the Internet, and is indexed by Google and the other search engines, so:

Please do not include any email addresses unless they are already public on the Internet. This also applies to links to, for example, Google Docs containing email addresses, or other sensitive material.

Editing Pages

This web site runs on a software package called BookStack. Their home page is at https://www.bookstackapp.com/. We have our own copy of BookStack running on one of our servers in Switzerland.

The user documentation is at https://www.bookstackapp.com/docs/. We won't duplicate that here, but we will add things which are specific to this site or need extra clarification.

BookStack supports two different page editors called WYSIWYG and Markdown. We have chosen to use the Markdown editor for this site. Note that the BookStack demo referenced on their home page, while good for gaining an understanding of BookStack, is configured to use the WYSIWYG editor. This is a site-wide setting and can't be adjusted per user, because the pages are stored in a different format by the two editors.

To edit a page:

  1. You need to sign up and log in, and request edit access to a specific pages or pages from the Rebel Toolkit team

  2. Then go to the page you want to edit.

  3. Click the Edit button

On very wide screens a sidebar will appear on the right hand side which includes an Edit link.

On medium width screens a sidebar will appear on the left hand side which includes an Edit link.

On narrow screens, you have to click the Info tab at the top of the page to make the sidebar appear.

The editor accepts both Markdown and HTML. You may find that the page that you are editing is in Markdown or HTML or a mixture of both. For example in Markdown a bold word is indicated like this: **bold words** (rendered as 'bold words'). In HTML, you get the same effect with <b>bold words</b> (rendered as 'bold words').

For information about Markdown see: https://daringfireball.net/projects/markdown/basics and https://daringfireball.net/projects/markdown/syntax. You may wish to get yourself a summary of the Markdown codes by searching on the Internet for 'Markdown cheat sheet' -- there are lots.

See the Markdown Hints page for more information about Markdown.

For plain text content, no special markup is needed. Put a blank line between paragraphs.

It is a good idea to keep a copy of your text yourself locally in case it gets lost, through computer failure or user action. This can done by clicking in the editing area and doing Ctrl-A (Select All), Ctrl-C (Copy), then open Notepad, Ctrl-V (Paste), Ctrl-S (Save) and choose a place and name for it. These are the instructions for Windows. It will be similar for other operating systems.

When you have made your changes, make them visible by clicking Save Page in the top right hand corner.

Creating New Pages

If you have edit access for a whole book or chapter, you can create a new page by going to the Book or Chapter where you want the new page, and clicking New Page in the sidebar. You can change the order of pages by clicking Sort later, which lets you set the exact order you want.

If you do not have this edit access and would like to add new pages, or sort the pages differently, please contact the Rebel Toolkit team.

Start your page with a sentence that gives some more detail as to what the page may be about in addition to the title. The first line or two appear in the book contents lists and on search results, so this makes it easier for readers to find the page they want.

Split your text into multiple pages if necessary. If pages are too short, it is hard to find things using find-in-page in your browser, as you have to do it separately for every page. If the pages are too long, they become hard to take in. Also on a long page, you may have so many headings that the Page Navigation on the left (wide screens only -- on a narrow screen it is on the Info tab) becomes taller than the height of a typical screen.

Headings

Another way to stop the Page Navigation getting too long is to make headings at the lowest level which don't appear in the Page Navigation by just using a short bold paragraph, like the one above, which looks like a heading but just uses bold markup **Headings**.

Shelves and Books

Please contact us if you would like a new book creating and adding to a shelf.

Adding Images

To add an image to a page:

You can also drag an image file directly into the main text area of the editor. However this not recommended because the image will be given a numeric name, and not the name of the file it came from. If you have done this, you can rename any image via the "Insert Image" button mentioned earlier: click on the image, edit the name and click SAVE. Images can be deleted via the same screen using the dustbin icon.

Please try to use sensible names for your images so that they are easier to manage.

The default markdown code put the image left aligned and makes it 'clickable'.

If you prefer not to have the image open with a click, then you can simplify the markdown to ![alt-text](IMAGE-URL-HERE) - where the 'alt-text' can be a description of the image (for people with visual impairments who use screenreaders)

If you want the image to be centred on the page, then you can use a bit of html instead
<p style="text-align:center"><img src="IMAGE-URL-HERE" alt="ALT-TEXT-HERE"></p>

You maybe able to find suitable images from XR's Global media library. You can download at appropriate resolutions directly from this site.

Resizing Images

Why use smaller images?

OK, so how do I do that?

Not a tech whizz (yet)?

If you have an image to put on a page on the Rebel Toolkit, you may need to resize it in order to get it to display at the correct size on the page. This involves reducing the resolution of the image, ie. reducing the number of pixels in the width and height.

You do this on your computer before uploading the image to the Rebel Toolkit.

Notes for Microsoft computers:

You can see the dimensions of an image by hovering your mouse over the name in Windows Explorer.

Notes for Computers with the Paint app:

An easy way to resize an image on a Mac is to open the file using Paint.

Tip: It is a good idea to make a copy of the image and resize the copy.

There are numerous tutorials available on how to resize images, and a selection is listed below.

Note: Many of the tutorials are trying to get you to download a piece of software or to use a particular web site.
You do not need to install any new software or to use a web site or online service*
Whether you use Windows, a Macintosh or Linux, your computer already has the software you need to resize images. The list below only covers Windows.

*Linux is more tricky, and you may actually want to install some software.

Tutorials for Resizing Images

Windows

Mac

Using Preview to resize an image tutorial. Youtube video link. You can skip the first 40 seconds where he explains why you may want to change the size of an image.

Embedding a video

Embed a video

This is what you get if you go to YouTube, click share and copy the embed code:

<iframe width="560" height="315" src="https://www.youtube.com/embed/hV8r0I5f1LQ?si=M8Qq8aVS7S-1euWV" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

This is what it looks like but with the p tag added around it to centre it. And the title changed:

<p class="align-center"><iframe width="560" height="315" src="https://www.youtube.com/embed/hV8r0I5f1LQ?si=M8Qq8aVS7S-1euWV" title="The World in Flux" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>

Book Cover Designs for Rebel Toolkit

Book covers on the Rebel Toolkit are 440x250 pixels in size.

Here is an example

IOS3.png

Because the Rebel Toolkit is viewed on a computer screen, tablet and phone, the 'safe' area for any text on the graphic should be similar to the example above.

If you design using software (Adobe, Affinity etc) that can utilse layering - here is a template that you could use to guide your designing.

image-1728140491484.png

Obviously all other considerations for accessibility and XRUK design style should be followed.

If you need help with a book cover, please contact the RT team with a brief explanation of how you would like your book cover to look.

Links within RT

You can use markdown to create links within the Rebel Toolkit using a combination of square and curved brackets e.g.

[View the Media and Messaging shelf](https://rebeltoolkit.extinctionrebellion.uk/shelves/07-media-and-messaging)

which will then look like this...

Click here for view the Media and Messaging shelf

The URL (web address) of a shelf, book or chapter in the Rebel Toolkit is based on it's title.

The same applies for pages, BUT this can cause problems if you make a link to a page and then the page gets renamed or moved to another book. But for pages (and even any part of a page) you can actually pick up a link that won't change even if the page title does or even if this whole page is moved elsewhere.

For example the address of this page is https://rebeltoolkit.extinctionrebellion.uk/link/463. So you can make a link like this: Links to pages in Rebel Toolkit which will continue to work even if the page is moved.

Links to pages outside of the RT

A sensible distinction between internal (links to other parts of the RT) and external links to other websites, forms, social media etc is to make the external links open in a new tab.

The way to do this is with a little bit of html:

<a href="LINK" target="_blank" rel="noopener noreferrer">TEXT</a>

just copy that on the page you are editing and add your URL where it says LINK and the words you want to appear as the hyperlink itself where it says TEXT

Adding a Google document

If you have something useful in a Google document which you would like to make available on the Rebel Toolkit, you can't upload it directly. You have a choice:

Turn the google doc in to a RT page

If possible, especially with more 'evergreen content' it is best to convert the content from the Google doc into a Rebel Toolkit page, ie. make a page on the Rebel Toolkit containing all the text from the Google document. Some people prefer to make a file in Notepad (or equivalent) on their computer and do all the work on that before pasting it in to the editor on the Rebel Toolkit. The formatting needs to be done in accordance with the Editing Pages instructions.

If the Google document has a lot of complicated formatting, you can just make a short page on the Rebel Toolkit with a description of the document in a few sentences and a link to the Google document. You can put links to several documents on one page if they are related. Bear in mind that the Rebel Toolkit is visible to everyone on the Internet: do not include links to any document with confidential information, eg personal email addresses.

The URL of the google doc can be made more secure by replacing the info after the last / with the word 'preview'. e.g.

Change this : https://docs.google.com/document/d/1jqyCjGkfMrIFmUrFAZpwaHjFk0bYtcPkLhN_IGF-T5I/edit

Into this : https://docs.google.com/document/d/1jqyCjGkfMrIFmUrFAZpwaHjFk0bYtcPkLhN_IGF-T5I/preview

Same page two + contributors

For those that may be working on a doc at the same time as another Rebel.

two users toolkit

Generally, we recommend working on the Toolkit from a separate doc rather than directly onto the Toolkit. This is advisable because it means you have access to the original doc as back-up.

Extra Markdown Hints

Markdown is used to make headings, bold, bulleted lists etc on the Rebel Toolkit pages.

This page contains tips for formatting your pages.

For basic instructions on using Markdown, we recommend The Markdown Guide or search online for Markdown. Here is a fairly comprehensive set of basic Markdown syntax. If you are looking for more detail, here are some links to tools to make editing easier.

Tables

In addition to classic Markdown, BookStack supports the Markdown Extra extensions, see https://michelf.ca/projects/php-markdown/extra/. This provides a number of extra facilities in addition to the original Markdown, in particular support for tables. Here is a quick example of how to insert a table.

| Item      | Value |
| --------- | -----:|
| Computer  | $1600 |
| Phone     |   $12 |
| Pipe      |    $1 |

This renders as:

Item Value
Computer $1600
Phone $12
Pipe $1

To put a link on an image, so that you can click on the image to go to another page, just use some image markup instead of plain text as the link text in square brackets [![alt text](my-image.png)](my-destination-page.htm)

For example, this [![rebel ringers](/uploads/images/gallery/2020-08/thumbs-150-150/RebelRingers.png)](/books/engaging-our-rebels/page/rebel-ringing) renders as:

rebel ringers

Floating images to right or left

Rebel Ringers video The Markup Extra specification says that you should be able to add class attributes to image markup, but it doesn't work in BookStack. You need to put the image in as HTML as below if you want to float an image with the text wrapping round it. You can also use align-left and align-center.

<img src="/uploads/images/gallery/2020-08/thumbs-150-150/RebelRingers.png" alt="Rebel Ringers video" class="align-right">

Horizontal Rules in Dark Mode

Horizontal rules like this:

don't show up in BookStack Dark Mode. There is a link to turn Dark Mode on and off near the top of the sidebar or Info panel on the home page. This is a mistake in the BookStack default style sheet in Dark Mode where the horizontal rule is dark grey (#222) on a dark grey background.

Comments

You can add comments to be seen by subsequent editors of the page, but which will not appear on the final rendered page after the Markdown processing. There is no explicit mechanism for comments in Markdown, but we can make use of the reference-style link syntax like this:

[Comment]: # (you can put any message for editors here.
It can span more than one line)

Not to be confused with the BookStack comment facility, which is turned off.

Extra HTML tips

You can use both Markdown and HTML with editing Rebel Toolkit pages.

You can learn more HTML from various website or YouTube videos, but here are some simple bits of HTML code that might be useful on the Rebel Toolkit:

Bold

<b>Write your bold here</b>

This will look like:
Write your bold text here

Which is the same as using the Markdown of a double asterix (like this **)

**Write your bold text here**
Write your bold text here

Drop-down expanding text box

Using this code you can create the drop-down content box as shown below

<details><summary><span style="color: blue;">Put your title here</span></summary> Then add your longer text here in the drop-down section. Which can use any markdown because it's inside html, but you can use other html to help lay out this. e.g. <b>BOLD</b> or a line break <br> And then continue with more content on a fresh line. </detail>

Put your title here

Then add your longer text here in the drop-down section. Which can use any markdown because it's inside html, but you can use other html to help lay out this. e.g. BOLD or a line break
And then continue with more content on a fresh line.

Code to copy to help you use it:

<details><summary><span style="color: blue;">Title</span></summary> DetailedText</details>

Note: On this page the use of a 'backtick' is used (one of these `) around parts of the page to allow you see the code.

like this

Comments

You can either use this mechanism to hide some html temporarily or to add comments to be seen by subsequent editors of the page, but which will not appear on the final rendered page.

<!-- write you comment here or hide parts of the from view it you can use this over multiple rows <br> if you like <br> and it will all be hidden as long as you end with -->