100 years of social cycling 1921-2021

CTC Cambridge

Ride with us

CTC Cambridge

How to write an article for the website

Friday 9 April 2021

This page contains information for contributors who have been given direct access to add ride reports, campaigning articles or news items to the CTC Cambridge website.

Before you can start
Creating a new article
Article text
Suppressing the date (advanced)
Sub-headings
Photos (and photo captions)
Specifying which photo to use when sharing
Route maps
Distances in miles or km
"Ride report" icon
Save, preview and publish
Caching
Labels
Using "See more..." in front page announcements

These articles are managed using Google's Blogger product. Adding a new article involves using Blogger to create a new blog post.

You will need a Google account, and the web officer will need have to have registered you as an authorised contributor to the blog.

Creating a new article

Once you have been given access, go to Blogger at https://draft.blogger.com/blog/posts/5872226291522631077 . Sign in if necessary using your Google account.

You will see a long list of website articles:

To create a new article, click the "new post" button at the top left.

To edit an existing article, scroll down until you find the article and click on it. You can only edit articles created by you (though the webmaster can edit all articles).

The "post editor" will then open. This can be used in two modes: "Compose view" or "HTML view". You can switch between the two modes using the left-most button.

Please only use HTML view
This is because Compose View clutters the article with lots of unwanted formatting.

Enter a title for your article in the field at the top.

Article text

Enter the text of your article in the large field below. You need to type <p> at the start of each paragraph.

<p>
This is the text of the first paragraph.
<p>
This is the text of the second paragraph. A blank line will be automatically inserted between paragraphs.

Suppressing the date (advanced)

The date of your post will, by default, be automatically inserted beneath the title. This is normally what you want: ride reports and news items should always have a date.

However you can prevent the date being displayed by including the following at the top of your post.

<style>.c2-blogdate{display:none}</style>

Sub-headings

If you need subheadings in your article you should type the appropriate HTML into the editor. It's best to use the "sub-heading" <h3> and "minor heading" <h4> styles. On the blog post you're currently reading, the heading above this paragraph is <h3>.

<h3>This is a sub-heading</h3>
<p>
This is the text of the first paragraph after the sub-headinbg.

Don't use "major heading" <h1> level: this level is automatically used for the article title, and is too large to use in other places.

Photos (and photo captions)

You should do this (and everything else) in HTML view

Position the cursor in the place in the text where you wish to insert a photo
Select "Insert image" in the toolbar.
You will be invited to specify where the photos will come from. Typically you would choose "upload from computer", but you might find "Photos" useful, which allows you to upload directly from Google Photos.
Follow the instructions and specify one or more photos
You will be invited to "Choose a layout". Choose a size of "Large" or "X-large" (you decide) and an alignment of "None" (this is important).
- In ride reports it is suggested you set landscape photos to "extra large" and portrait-format photos to "large", but you use smaller sizes if you wish.
This inserts a block of HTML into your article, something like this:
<p>
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFQiLO82AQwP_rWvKrlGG3biOBUaKfuYbM3nmiDfmMpGtwMeEArxZ16ruFFr61ybOUddagfPMTGXKKLHQlgiB7UX5WPTSBtaU4VKjtQinczcImNIE9-16aiy8otOAq2bqPVyA6craalg0/s2048/fenstanton.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="320" data-original-height="1152" data-original-width="2048" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFQiLO82AQwP_rWvKrlGG3biOBUaKfuYbM3nmiDfmMpGtwMeEArxZ16ruFFr61ybOUddagfPMTGXKKLHQlgiB7UX5WPTSBtaU4VKjtQinczcImNIE9-16aiy8otOAq2bqPVyA6craalg0/s320/fenstanton.jpg"/></a>This is the caption</div>
</p>
Delete the text display:block (shown in red above). This will cause the image to be displayed on the left, which looks best, especially on small mobile phone displays.
If you want a caption (recommended), insert it before the final </div> (see example in red above). If you insert the caption here then it will be displayed correctly on the web page (immediately below the photo in a pale grey font) and will also be displayed in the "Photoswype" view (which is the reader sees when they click on the image).
Insert <p> before and after (shown in red above)
Fine-tune the dimensions of the photo: it is recommended that the longest dimension is no more than 500px. For photos in landscape format, simply change the width attribute to the width you want. For photos in portrait format delete the height attribute (which seems to be ignored) and add style="height:500px" (or whatever height you want).

Specifying which photo to use when sharing

This section is only relevant if this article is shared on social media.

If you wish you can specify which of the photos on this page will be used by Facebook, Mastodon etc when it creates a preview picture. This is done by adding a special attribute data-ogimage to your chosen <img> element . For example:

<p>
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFQiLO82AQwP_rWvKrlGG3biOBUaKfuYbM3nmiDfmMpGtwMeEArxZ16ruFFr61ybOUddagfPMTGXKKLHQlgiB7UX5WPTSBtaU4VKjtQinczcImNIE9-16aiy8otOAq2bqPVyA6craalg0/s2048/fenstanton.jpg" style="padding: 1em 0; text-align: center; "><img data-ogimage alt="" border="0" width="320" data-original-height="1152" data-original-width="2048" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFQiLO82AQwP_rWvKrlGG3biOBUaKfuYbM3nmiDfmMpGtwMeEArxZ16ruFFr61ybOUddagfPMTGXKKLHQlgiB7UX5WPTSBtaU4VKjtQinczcImNIE9-16aiy8otOAq2bqPVyA6craalg0/s320/fenstanton.jpg"/></a>This is the caption<div/>
</p>

If you don't specify an image in this way then the first photo will be used.

(The website uses this information to set the og:image meta property on the web page.)

Route maps

If you are writing a ride report and want to include a map of the route then obtain a GPX file of the route (generated either by a GPX device or by manually entering the route in a route planning website) and send it to the webmaster.

The webmaster will upload the GPX file to the website and supply you with a fragment of HTML to paste into your article. This will be of the following form:

The only part of this HTML fragment which will vary is nnnn. For rides in the club's rides list you can find out nnnn by clicking on the ride in the rides list, going to the details page for that ride, and looking at the URL.

You can use the ?mapType parameter to specify the map type. If omitted the map type will default to whatever the reader chose last, or Open Street Map by default.

To display using Open Street Map, append ?mapType=2
To display using Open Cycle Map, append ?mapType=3

Since this is a fragment of HTML you will need to switch to "HTML view" before pasting it in.

Distances in miles or km

In your article you're free to give distances in either miles or kilometres: it's up to you. However you are recommended to use both: if you use the following HTML your readers will see distances in whichever unit they prefer (you will have to enter the appropriate values in km and miles yourself).

<span class="displaykms">17 km</span>
<span class="displaymiles">11 miles</span>

"Ride report" icon

Ride reports should start with the green "ride report" icon, with subsequent text wrapped on the right.

Switch to "HTML view" if necessary and then paste the following at the start of your article:

Save, preview and publish

If you haven't published the article yet then your article is considered to be a "draft". Any changes you make will be saved automatically.

Click the "Preview" button to see a preview of what your article will look like when published. Please note that this preview is approximate and doesn't show you exactly what the article will look like, so you should check your article again after you publish it.

When you are ready to publish the article, click the "Publish" button.

If you are editing an article which has already been published then the "Publish" button is replaced by one labelled "Update". Use this to apply your changes.

You can use the left-pointing arrow (top left) to go back to the long list of website articles. If your article has been published you will will see it in the list.

After you publish or update an article you should always review what it looks like on the website. To do this, move the mouse over the article name and then click on the "view" button. This will open the page on the CTC Cambridge website.

When reviewing a published article try clicking on a photo and check that it appears appropriately in the photo viewer, and whether any caption you supplied is displayed below the photo in the photo viewer.

Caching

Please be aware that after you publish an article, the page content will be cached on the web server. The cache will be automatically rebuilt after a time. However this means that if you update an article and then look at it on the website you will probably not see your latest changes.

You can "refresh" the cached page content by carefully appending ?refresh to the page URL. Refreshing a page may take 30-60 seconds.

Labels

When you publish (or update) an article you are creating a new page on the website. However until you define a "label" your article will not appear in the index and will not be linked from anywhere, so it will only be visible to people who know the URL. This gives you an opportunity to double-check your article before adding it to the index.

To allow readers to find your article, add one of the following labels:

Ride reports

For ride reports, add the label news. This adds it to the "ride reports" index. It also adds a link to the "latest ride reports" section of the front page.
(Yes, using the label "news" is a bit odd for ride reports, but we're stuck with it)

Campaigning articles

For campaigning articles, add the label campaigning. This adds it to the "campaigning" index.

News items and other articles for the front page of the website

You can display short news items and other announcements on the front page of the website (as well as on their own page) by giving them the label frontpage-top, frontpage-large or frontpage-small
- frontpage-top will position articles at the top of the page,
- frontpage-large will position articles below them, and
- frontpage-small will position articles at the bottom in one of two narrow columns (suitable for extremely short articles only).
Only the webmaster, club secretary or runs secretary should do this. If you're not sure you can always publish the article and then ask the webmaster to add the label to put it on the front page.
After adding one of these labels you can see what the front page of the website looks like by visiting https://ctccambridge.org.uk/?refresh (this refreshes any cached version and takes 30-60 seconds).
To add an article to the "news archive", add the label announcement. This allows people to find your news item, even if it is no longer displayed on the front page.
To create an "advert" for the article, add the label advert. This causes the latest three articles with this label to be promoted by small rectangular "adverts" which appear on the left-hand side (on large displays) or at the top (medium displays) of the page. You can use this for news items, campaigning articles or any other article.
Other possible labels are frontpage-top-test, frontpage-large-test, frontpage-small-test or advert-test. These can be used for testing. They are used by the staging website (or a local website) but are ignored by the production website.

General website articles

If your article isn't a ride report, a news item or a campaigning article then you may want to add it to the main index, which is the first thing people see when they click on the "Index" button.

Publish the article as usual, without setting any labels. Then send the link to the webmaster and ask for it to be added to the main index.

Using "See more..." in front page announcements

If you're writing an announcement for the front page of the website, and your article is slightly too long, you can write a short introduction and hide the rest of the article behind a light-grey "See more..." link. If your article is very long then don't do this: it's better to write a separate news article which links to the full article.

Introductory text text.  <div class="hideinitially">
<p>
More text text text.
</div>

Note that when the same article appears on its own page the "See more..." is omitted and the whole page is always displayed.

You can replace the text "See more..." with different words by setting the attribute data-showanchortext as follows:

Introductory text text.  <div class="hideinitially" data-showanchortext="Show FAQs...">
<p>
More text text text.
</div>

This feature is ignored on actual blog pages. So a blog post that contains "See more..." links when it appears on the front page of the website will be displayed in full when it appears on its own page (e.g. when accessed via the index). However you can override this by adding the following to the top of your post:

<script>let useHideInitially=true;</script>