Publish an electronic newsletter

Log in to the web site and:

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

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 newsletter) 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 newsletter 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.

NB:

• You'll see the sub-heading appear in the style of the main web site, not how it appears in a newsletter article
• 'Heading 4' and subsequent headings are not defined in the newsletter 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 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 haylingu3a.org/u3anewsletter/winter-2021/?pagenumber=3 links to the third article in the Winter 2021 edition.

Specifying 'New window' is important because it will leave the newsletter 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 newsletter 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:

[u3a-breakout]

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

[/u3a-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:

[u3a-breakout align="left"]

Stuff for the box goes here.

[/u3a-breakout]

Use a shortcode like this:

[u3a-member-contact loginid="Andy" newwindow="yes"]Contact Andy[/u3a-member-contact].

Which would generate:

Contact Andy.

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

[u3a-member-contact loginid="Andy" class="link-as-button" newwindow="yes" ]Contact Andy[/u3a-member-contact]

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:

[u3a-youtube videocode="xxx" width="yyy" height="zzz" enclosureisalternate="yes"]alternate text here [/u3a-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:

[u3a-screen-only]

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

[/u3a-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 u3a-print-only shortcode:

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

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'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 newsletters, you will see an Edit button in the footer of all newsletters. Click it to see the edit page.

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

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

Before you make your new edition of the newsletter 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 'Public' to make it available to everyone or 'Private' to make it available only to members. Then click the Publish button (which might have changed to Update).