Publish an electronic Pedal

Log in to the web site and:

1. Click 'Site dashboard' in any page footer.
2. Click 'Pedals' in the sidebar and the 'Add new' button.
3. Put the edition of your new Pedal in the title box; for example: "Summer 2022". It will be shown in the title bar of every page of your ePedal.

Every article starts with a paragraph like this:

{article xxx|yyy|zzz}

This allows the web site to spot where each article starts and provides the information it needs to create the edition:

xxx is the title of the article.
yyy is an optional web address of an image to show at the top of the article.
zzz is an abstract/subheading shown beneath the title in the body of the article and in the contents sidebar.

NB:

• The title should be just a few words
• The abstract/title should provide enough information to give the reader an idea of what it's about and encourage them to read it
• To add the image web address:
  • Place your cursor where you need to insert it
  • Use the 'Add an image' procedure below specifying: blank caption, no link and full size
• The image should ideally be 1200 pixels wide and up to 650 pixels high. A narrower image won't always fill the available space, a taller image will push the article text down, obscuring it from the reader.

Everything you enter after the initial {article} paragraph up to the next {article} paragraph (or the end of the page) is the body of the article.

You can paste text directly from Word - and it might look OK to start with - but you'll have pasted a ton of HTML mark-up with it. That will interfere with the ePedal layout and cause unexpected results if you try to edit the text.

Instead, paste your text as unformatted and then format it in WordPress. There are several ways to paste an unformatted document:

1. Paste it into Windows Notepad first and paste it into your article from there.
2. Click the 'Paste as text' button in the WordPress toolbar before pasting.
3. Right click where you want the text to go, and you might see a 'Paste as plain text' option.

The WordPress toolbar contains buttons that work intuitively to mark up your text:

• Bold
• Italic
• Strikethrough
• Underline
• Bullet lists
• Number lists
• Left, right and centre justification
• Superscript and subscript

When adding lists you can use 'Increase indent' at the beginning of an item to nest a list within the current list. 'Decrease indent' returns you to the enclosing list. 'Decrease indent' will end the list if there is no enclosing list (as will pressing Enter twice).

To start a new line without starting a new paragraph, use shift-enter.

The page uses 'Heading 2' for the article heading. You should therefore use 'Heading 3' in the 'Paragraph' drop down to add a sub-heading.

I'd also suggest using it to mark-up people's names at the bottom of an article.

NB:

• You'll see the sub-heading appear in the style of the main web site, not how it appears in a Pedal article
• 'Heading 4' and subsequent headings are not defined in the Pedal stylesheet, but could be if needed.

Place your cursor in a paragraph you want to quote (or drag it across multiple paragraphs) and click the quote button in the toolbar to show them indented, italicised, and with a green bar to the left.

Highlight the text you want to make into a link and:

1. Click the 'Insert/edit link' button
2. Enter the web address (usually starting http), select 'New window' as target and click 'OK'.

You can link to other articles in the current or previous electronic editions. Use an address like this:

?pagenumber=x

to link to an article in the current edition, or add the above to the address of a previous edition. x is the number of the article starting with 1 so portsmouthctc.org.uk/pedal/autumn-2021/?pagenumber=12 links to the 'Home Automation 2' article - the 12^th one in the Autumn 2022 edition. To help you, each article shows its address in the footer use right-click and 'copy link' to copy the link.

Specifying 'New window' is important because it will leave the Pedal showing where the reader left off when they close the linked page.

NB it's best to link text rather than the address. The printed version automatically appends the web address to each link so, if you link the address, it will appear twice in the printed text.

To remove a link, put your cursor in the linked text and click the 'Remove link' button.

To create a link that allows the reader to print the page, add a link (as described in the previous section) to:

?print=yes

Consider cropping images if that makes the subject clearer or removes distracting elements.

Review the size of your image. When you upload it, the web site will automatically reduce large images to a maximum width/height of 1400 pixels, but there is also an upload limit of 2Mb. You might therefore need to resize the image first.

Images used for article headings will never be shown larger than 1200 pixels wide. Consider reducing them to that width before uploading them. To avoid obscuring the title of your article, you should also crop the image to a maximum height of around 650 pixels.

If you are including small images that you never want to show any larger, resize them to the dimensions you want and insert them full size. That will reduce the overhead on the web site and its backups.

I use free software Paint.net to resize and crop images.

There are several ways to add an image, here's one:

1. Place your cursor where you want the image to appear. For best results, place it at the start of a paragraph.
2. Click the 'Add Media' button above the toolbar.
3. If the image you want is already in the library, select it. Otherwise select the 'Upload files' tab and either drag your image onto the box or click 'Select Files' to select it.
4. With your image uploaded and selected, you'll see an 'Attachment details' sidebar:
   • Optionally, enter a caption.
   • Select the image alignment.
   • Select the displayed size. For small images select 'full size'. For left/right justified images select '300px' (or maybe a little larger) or less. For centred images select '600px' or less. For unjustified images that you want to show across the entire width of the page, select the smallest size greater than 700 pixels. There's no problem using 'full size' in this situation, the browser will automatically resize as necessary.
   • Do not select a custom size. That forces the browser to use your specified size even on mobile phones when it would be better to resize the image.
   • 'Link to' should be 'media file' if you have a large image you want to display on top of the article: either there is a larger size than the one you selected, or the size you selected is significantly greater than 730 pixels (the maximum width of a pedal column). Otherwise link to 'none'.
5. Click 'Insert into post' to see your image in the article.
6. Finally, if you selected 'Link to' 'Media File', click the image to see a small toolbar, click 'Edit', enter fancybox in the 'Link CSS Class' box, and click 'Update'. This will display a larger version of the image on top of the article (together with activating some hints that a larger version is available).

If you change your mind about how you want to display the image, you can:

• Click the image and use the toolbar to make adjustments; or
• Delete the image and start again (but this time the image will be uploaded already).

Use a shortcode as follows:

[ctc-breakout]

The text, images, etc to show in the breakout box go here. Can be multiple paragraphs, bullets, etc.

[/ctc-breakout]

The text in square brackets should be paragraphs on their own, or you might get some odd effects. The above will align your breakout box to the right of the column. To align it to the left use:

[ctc-breakout align="left"]

Stuff for the box goes here.

[/ctc-breakout]

Use a shortcode like this:

[ctc-member-email loginid="AndyH" newwindow="yes"]Contact Andy[/ctc-member-email].

Which would generate:

Contact Andy.

Or to generate a button instead of a link, use something like:

[ctc-member-email loginid="AndyH" class="link-as-button" newwindow="yes" ]Contact Andy[/ctc-member-email]

to generate:

Contact Andy

You can find someone's login id from the member lookup service. To add multiple recipients, provide additional loginid2, loginid3, etc parameters (up to loginid5).

To add a YouTube video, display it in YouTube, pause it and:

1. Click 'Share'
2. Click 'Embed'
3. From the displayed HTML, make a note of:
   • width
   • height
   • the embed code at the end of the src= parameter (typically nine alphanumeric characters)

In your article, add a shortcode in a paragraph on its own like this:

[app-youtube videocode="xxx" width="yyy" height="zzz" enclosureisalternate="yes"]alternate text here [/app-youtube]

Using the stuff you noted above:

• xxx is the embed code
• yyy is the width
• zzz is the height

There's no point displaying the video when someone prints the article so, instead, the site will use the alternate text you provide. I suggest something like...

Video is suppressed in this printed copy. You can see it at https://www.youtube.com/watch?v=xxx.

... where xxx is the embed code.

To add a table to your article:

1. Place your cursor in a new paragraph where you want to add your table
2. Click the 'Table' button in the toolbar
3. Click 'Table' to see a grid, highlight the number of rows and columns you want (if you want more, you can add them later). and click to add your table.

Add your text into the table cells. Pressing enter at the end of the last row adds another row.

To make the top row into a heading:

1. Put your cursor in the top row
2. Click the Table button and Row / Table row properties
3. Change 'Row type' to 'Header' and click OK

There's no equivalent option to convert a column to a 'heading', To do that:

1. Highlight the cell(s) you want to be a heading
2. Click the Table button and Cell / Table cell properties
3. Change 'Cell type' to 'Header cell' and click OK

You can also make the bottom row a footer to, for example, show column totals:

1. Put your cursor in the bottom row
2. Click the Table button and Row / Table row properties
3. Change 'Row type' to 'Footer' and click OK

WordPress assumes you want columns to be equal sizes, but that's rarely the case. To allow browsers to use column widths to that match your text:

1. Select every cell in the table
2. Click the Table button and Row / Table row properties
3. Put auto in the width box and click OK

This is useful for features that work or are supported only on-screen. You can suppress them in the printed version and display alternative text instead.

Use a shortcode as follows:

[ctc-screen-only]

Text, images, etc included here appear only when viewed online.

[/ctc-screen-only]

The text in square brackets should either be in paragraphs on their own, or you can include them both in a single paragraph like this example that shows the ctc-print-only shortcode:

This is [ctc-screen-only]stuff to show on-screen[/ctc-screen-only][ctc-print-only]stuff to show in printed version[/ctc-print-only].

You can show a puzzle question and immediately after, a button that will reveal the answer when clicked.

Use a shortcode as follows:

[ctc-reveal id="somethingunique"]

Your puzzle solution goes here.

[/ctc-reveal]

The text in square brackets should be in paragraphs on their own.

The id parameter should be unique on the page. You can also provide a buttontext parameter, in which case it will be used as the text shown on the reveal button. If you don't provide one, the button text will be "Reveal the answer".

The styles used in the WordPress editor are those from the main site, so it won't look quite the same when you publish it.

You can preview your work by clicking the 'Preview' button in the WordPress Publish box. From the preview, you can preview the printed version by clicking the 'Print this edition' button in the footer.

To return to editing, close the preview tab in your browser.

WordPress automatically saves your work from time to time. If you want to ensure your latest changes are saved before you take a break, click the 'Save Draft' button in the WordPress Publish box.

Take care, however:

• If you click the publish/update button your version will automatically be visible to members. You should not do that until the edition is ready.
• If you've already published your work. The 'Save Draft' button removes your document from the web site.

If you are logged-in to the site and are authorised to edit Pedals, you will see an Edit button in the footer of all Pedals. Click it to see the edit page.

To return to a Pedal that hasn't been published yet, log in to the web site and:

1. Click 'Site dashboard' in any page footer
2. Click Pedals in the left-hand side bar
3. Hover your mouse over the Pedal you want to edit and click the Edit link to see the edit page.

Before you make your new edition of the Pedal available, you might want to do a final check yourself and, maybe, send it to contributors for review.

To do that, go to the WordPress 'Publish' box, under 'Visibility' set a password and click the Publish button (which might have changed to Update).

You can then send a new edition link to reviewers together with your selected password. No-one else will be able to see it.

Also, if you add the word "draft" anywhere in your title, the site will automatically remove it from all searches.

When you're happy with your work, go to the WordPress 'Publish' box, under 'Visibility' select 'Private' to make it available only to members - which is PCTC policy at the time of writing. Then click the Publish button (which might have changed to Update).

The 'Latest Pedal' menu item will update automatically, and your new edition will be added to the 'Magazine archive'. The edition will be available to be searched.

You can link to the latest version with this address:

portsmouthctc.org.uk/LatestPedal