Design

DESIGN

Items in green are for advanced readers

TAGS

In WordPress, tags are simple labels you can attach to pages or posts to describe what they are about. Pages can be assigned tags like Macau, Sports, etc. All pages with the same tag are grouped together.

For every tag you create, WordPress automatically generates a Tag Archive page, that lists all content carrying that same tag. For example, if several pages are tagged Hong Kong History, WordPress creates a page at /tag/hong-kong-history/ that lists all of them together on their corresponding tag archive page. This page updates itself automatically: when you add the tag to a page it appears in the list, and when you remove the tag it disappears. Tag archive pages therefore act as dynamic indexes, grouping related content from across the site without the need to maintain a contents page manually.

To assign a tag:

In Dashboard>All Pages, hover over a page title and click Quick Edit. In the Tags field, type one or more tag names, separating them with commas. Click Update, and the page is immediately included in the relevant Tag Archive page.

File Transfer Protocol (FTP)

For the macaneserecipes.org and macaneseheritage.org sites, we use FileZilla for FTP: click on Quickconnect and select macateml@server193.web-hosting.com > lib.macaneserecipes.org The Heritage site is a sub-site of the macaneserecipes.org site. Click on Quickconnect and select macateml@server193.web-hosting.com > macaneseheritage.org See FTP details

Responsiveness

Emphasis has been put on how material appears on both large and small devices:

  • Images and text arrayed horizonally on large screens appear stacked on smaller screens.
  • The size of images and text shrinks responsively on small screens.

See Code for responsiveness

Tooltips

There is extensive use of tooltips for shorter explanatory notes. (Tooltips are small pop-ups that appear when you click some chosen word or words or image (called the trigger), to bring up a small screen with text and images (tooltip content) – that provides extra information without leaving the page. The trigger has a dotted underline
like this one

This is an example of a tooltip; ‘like this one’ is the trigger; what you see on the screen is the tooltip content.

 More about Tooltips     See code

Image captions

We want to hide default image captions and custom captions. See code for hiding captions.

Website breadcrumbs are a navigation aid that show a trail of links that lets a user easily move back to previous pages (e.g., Home>Themes>Topics Index>Topics P-R>Algarve). To set up breadcrumbs See code

Pela Patria

Pela Patria is a magazine published by the Portuguese community in Shanghai. Each page was photographed and loaded via FTP to the website as a .jpg file (e.g., macaneseheritage.org/uiExtFiles/pelapatria/1940/02/p15.jpg). The Pela Patria Index page shows a series of buttons with links to the months of publications (e.g., 1940 Feb). Clicking on one of these months brings up a list of the pages of the magazine for that month. (See the code that accomplishes this).

Tables

For large tables we use the TablePress plugin. We can edit an HTML table using Notepad++ or HTML-Kit Tools and import into TablePress. In the patuá Lexicon (dictionary) files there are numerous cumbersome links to audio files, like
<a href=’https://www.macaneselibrary.org/pub/uiExtFiles/Lexicon/L/Labita.mp3′ target=’_blank’ rel=’noopener’>Labita</a>.
To simplify the coding, we have installed a speaker shortcode: [speaker src=’L/Labita.mp3′]
1