Contributing - The Technical Side
Editing, Markdown, images, links etc
- Practice editing
- Editing Pages
- Extra Markdown Hints
- Adding Images
- Resizing Images
- Embedding a video
- Links to pages in Rebel Toolkit
- Links to pages outside of the RT
- Adding a Google document
- Same page two + contributors
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.
Editing Pages
Any rebel with a Communications Hub login can edit pages within dedicated 'wiki' spaces, but from Sep 2023 onwards, the overall Rebel Toolkit will being more curated with specific team (with the appropriated mandate) having exclusive access to curate and maintain their particular shelf/book/chapter in line with their particular area of expertise.
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:
- Don't add anything that should not be visible.
- If you don't want your full name to be visible as an editor, change it by going to 'Edit Profile' on the menu top right.
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:
-
You need to sign up and log in, and request edit access to a specific pages or pages from the Rebel Toolkit team
-
Then go to the page you want to edit.
-
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.
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 |
Link on an Image
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 [](my-destination-page.htm)
For example, this [](/books/engaging-our-rebels/page/rebel-ringing)
renders as:
Floating images to right or left
<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.
Adding Images
To add an image to a page:
- Prepare a suitably-sized image. Most photos need their resolution reducing for publishing on the web. See the Resizing Images page for instructions.
- Click in the text at the point where you want the image to appear.
- Click the "Insert Image" button in the editor above the main text pane.
- Either:
- drag your image from Windows Explorer (or the equivalent for your computer) into the grey area top right where it says "Drop images or click here to upload", or:
- click on the grey area top right where it says "Drop images or click here to upload", and select an image. - Click on the image you have just uploaded
- Click SELECT IMAGE.
- The Markdown code to display the image will appear in your 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

- 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?
- It saves on energy! Every pixel uses energy to be stored and shared so the smaller the image the less energy you use.
- They take up less space on a page. Pages can be quite long at the best of times so why not make them colourful but also quick to browse!
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.
- For an image on a web page, right-click and select View Image Info (in Firefox), select Inspect and hover over the image element (in Chrome). In most cases you will want an image between 200 and 600 pixels across.
Notes for Computers with the Paint app:
An easy way to resize an image on a Mac is to open the file using Paint.
-
Click on the Tab Image on the toolbar at the top of the screen. A drop-down menu will appear with the option to Adjust image. Click on that and choset he amount of pixels you want it to have. 200 Width will make the image take up aboutz a third of the width of a page - to give oyu an idea. This is usually small enough to see but not so big that it takes up lots of room. (You can also use Preview in much the same way)
-
Once you have resized the image click on the tab File in the Toolbar at the top. Click on Save As and put it into a file where you might find it again easily.
-
Now you can add a page in the Toolkit and insert an image which is smaller.
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
-
https://www.howtogeek.com/354015/how-to-resize-images-and-photos-in-windows/ Ignore the "Third Party App" sections and use Paint.
-
https://tencomputer.com/resize-photos-in-windows-10/ Ignore the "Method 2: Download" section and use Paint.
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>
Links to pages in Rebel Toolkit
Normally the URL (web address) of a page in the Rebel Toolkit includes the name of the book it is in and the name of the page. This can cause problems if you make a link to a page and then the page gets renamed or moved to another book. The Bookstack software keeps a list of old page names, so links sometimes continue to work, but not always.
Each page is actually identified by a number which does not change, and you can use that number in a link.
To find the static link (permanent link / fixed link) for a page:
-
Go to the page you want to make a link to
-
Highlight a piece of text by double clicking on a word. The word gets highlighted.
-
A pop-up box appears - in that pop-up box you will see the unique address of the page and a fragment identifier. The fragment identifier is the part after the "#" which identifies a particular paragraph within the page.
-
Copy the address and remove the fragment identifier so you don't want to link to a part of the page.
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.
Link to the google doc
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.
- If at the top of the page you are working on you see an image like the one below pop up at the top right-hand corner then we strongly advise that you work on a separate page. There is a possibility that when you save someone loses some of their work.
-
If more than two people are contributing to the same page at the same time a similar box will appear, all red, and it will name the other user.
-
The advice is still the same - save your work elsewhere as there is a possibility that when someone saves the work gets lost.
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.