Documentation – In Memoriam page

The In Memoriam page lists IDRC alumni who have passed away. For each alumni, there is a small image, the name, and if know the birth and death years. The name is a link to a bilingual PDF with one or more images and statements of remembrance. The items are listed in alphabetical order by family name. An index into the alphabetical list is provided at the top of the page. When adding a new entry, follow these steps in the order listed:

  • Create the bilingual PDF celebrating the life of the alumni.
  • Store this PDF on the website.  Save the PDF here: /wp-content/uploads/in_memoriam/last_first.pdf (where last is the last name and first is the first name).
  • Create a “postage stamp” image of the person’s head and store it on the website (see “Creating an image of the person’s head” below).
  • Create a new entry in the page index if necessary (see “Creating a new entry in the page index” below).
  • Add the block containing the person’s small image, name, link to the PDF and dates within this block (see “Adding the block containing the person’s info” below).
  • Save the page. (click on button to update the page).

Some of these steps are explained in more detail below.
You must edit this page in mode.

Understanding the structure of the “In memoriam” page

Before editing this page, it may be helpful to understand how the page is structured internally (i.e., in HTML).  It consists of a number of blocks (<div>’s in HTML), some nested within others.  Here is an abbreviated glance:

Descriptive text at top of page.

Alphabetical index into the items below.

 </div>
 <div class="horizontal">


All the persons under one letter of the alphabet
<h2>letter heading</h2>


One person:
<img scr=”/wp-content/uploads/in-memoriam/postage-stamp image of head”>


<h3>name with link to PDF</h3>
<p class="years">year range</p>

 </div>
 <div class="details">

 </div>
 <div class="person">


Another person

 </div>
<div class="person">

. . .

 </div>
 <div class="alpha">


All the persons under another letter of the alphabet


Another person

 </div>
<div class="person">

. . .

 </div>
 <div class="alpha">

. . .

 </div>
 <div id="everyone">

 </div>
 <div id="in-memoriam">

 

  • The <div id="in-memoriam"> block covers the complete page, and lets the software know that it is handling an “In Memoriam” page.
  • The <div class="horizontal"> block handles the horizontal alphabetical index into the main page content.
  • The <div class="everyone"> block handles all the entries for the individuals.
  • The <div class="alpha"> block handles all the entries that fall under one letter of the alphabet, and the related letter heading. There are several of these.
  • The <div class="person"> block handles one individual. There can be several of these in each <div class="alpha"> block.
  • The <div class="details"> block handles the text for one individual. There is one in each <div class="person"> block, but to save space in the above diagram, it is only shown for the first person.

The section within the “<div>” called “everyone” is displayed in four or fewer columns, depending on the size of the window in which it is displayed. This is handled by the software. When editing this page, it always appears as a single long column. You do not need to worry about the columns and where the content breaks across the columns.

As shown in the above diagram, the page must end with five <div>s (including the <div class="details"> block, which is not shown with the last person in the above diagram).

Creating an image of the person’s head

Using an image that is in the PDF file, or any other image, create a small image (50 pixels × 50 pixels) of the person’s head. Do not include any other part of the person or any of the background. Visit working with images to learn how to crop and resize an image. Save the image here: /wp-content/uploads/in_memoriam/last_first.jpg (where last is the last name and first is the first name) using FTP.
Note: if no image can be found, use the small flower image: /wp-conten/uploads/in_memoriam/flower.jpg

Creating a new entry in the page index

The index is a horizontal list of letters with links into the page. It does not contain any letters for which there are no family names.  When editing this page, this list appears to be vertical, but it will display horizontally when viewed by a visitor to the site.
The following example assumes that you need to create index entry “C”, and that entry “D” already exists.
Work in mode.

  1. Look for this code in the body of the page:
    </div>
    <!– ==== end a letter of the alphabet ==== –>
    <div class="alpha"><!– === start letter "DDDD" === –>
    <h2 id=”d">D</h2>
  2. Make a copy of the code in step 1 immediately above this code. If you wish, add some spaces before and after the inserted code to help you identify the code to be updated.
  3. Replace the d with c
  4. Replace the five Ds with Cs
  5. Now look for this code near the top of the page:
    <a title="last name starting with D" href="#d">D</a></li>
  6. Make a copy of this code immediately above it. If you wish, add some spaces before and after the inserted code to help you identify the code to be updated.
  7. Replace the d with c
  8. Replace the two Ds with Cs

Adding the block containing the person’s info

Each block is positioned correctly on the page in alphabetical order. If this is the first entry for an alphabet letter, the person%rsquo;s block is inserted immediately after the letter heading (“<h2…>…</h2>”). Otherwise, it is inserted after the alumni obituary block of the person immediately before the one you want to add, as determined by the sequence of last name, first name(s). Proceed as follows:

  1. Locate the code where the text for the person is to be added:
    • If the person is the first in the letter group, the code will be inserted after:
      <div class="alpha"><!– === start letter "DDDD" === –>
      <h2 id=”d">D</h2>

      (where D is the first letter of the person’s last name)
    • If the person is not the first in the letter group, the code will be inserted after:
      <div class="person">
      <img src="/wp-content/uploads/in_memoriam/alsop_bert.jpg” alt="person-name"/>
      <div class="details">
      <h3><a title="Download person-name‘s remembrance" href="/wp-content/uploads/in_memoriam/image-name.pdf">person-name</h3>
      <p class="years">dates</p>
      </div>
      </div>

      where person-name is the person’s name and dates are the birth and death years for the person.
  2. insert this code at the appropriate place, as identified in step 1, in the body of the page:
    <div class="person">
    <img src="/wp-content/uploads/in_memoriam/image-file-name” alt="name"/>
    <div class="details">
    <h3><a title="Download name‘s remembrance" href="/wp-content/uploads/in_memoriam/pdf-file-name">last-name, first-name</a></h3>
    years
    </div>
    </div>
  3. replace image-file-name with the name of the file of the small image for this person.
  4. replace the two occurrences of name with the person’s full name (first name(s) last name)
  5. replace pdf-file-name with the name of the PDF file for this person.
  6. replace last-name with the person’s last name
  7. replace first-name with the person’s first names
  8. if the birth and death years of the person are known, replace years with these years, separated by a hyphen. If the years are not know, delete years
  9. Repeat steps 1 to 7 for each person
  10. Click
  11. Click to see the updated page.
  12. Check all updates that you made to the page, and try all links to download the updated PDF file references. If necessary, make changes and repeat these last three steps