Documentation – Alumni in Print

Images

height: 201px
store in: /wp-content/uploads/books

The Alumni in Print page lists books published by IDRC alumni. The page consists of an opening paragraph, followed by blocks of alumni. Each block containing the name of an alumnus and the books published by the alumnus. The blocks are more-or-less arranged in alphabetical order by last name, then first name (the “floating” nature of the blocks may affect this in a minor way). The books published by one author (alumnus) are grouped together in a block with a border.

The following describes the HTML used with this page:

The page is surrounded by:

  • <div id=”in-print”>, which must be the first line of HTML
  • </div>, which must be the last line of HTML

The author block starts with ‘<div class=”author”>’ and ends with ‘</div>’ (actually, it is a bit more complicated, as described below under “Size of author blocks”). Each such block contains the author’s name and images of each of the publications. The images in turn are links to a PDF document describing all the books by that author.

Author blocks are “floated to the left,” meaning that as many author blocks will be displayed side-by-side as room on the page permits.

An author block contains the author name (in HTML: <h3>author name</h3>) and one or more book blocks, one for each publication.

A book block contains an image of the book, which is a link to the PDF document describing all the books by the same author. The HTML for one book block is:
<div class=”book”>
<a> href=”address of the PDF on the website” title=”Learn more about the book”>
<img src=”address of the book’s cover on the website” alt=”Cover of book” />
</a>
</div>

Although the parts of the code for the HTML are shown above in a list, they are written as a compact long line, which wraps around in the editor window:
<div class=”book”><a> href=”address of the PDF on the website” title=”Learn more about the book”><img src=”address of the book’s cover on the website” alt=”Cover of book” /></a></div>

On the French page

In the code above, on the French page, replace:

  • Learn more about the book with En savoir plus sur le livre
  • Cover of book with Couverture du livre

Size of author blocks

There is room on the website page to display up to four books horizontally. Any alumnus that has more than four books will display them in more than one line within an author block. The code that starts that author block is therefore <div class=”author size“>, where size is one of the following: one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve. Note: If more than 12 books are published by an author, new styling rules will be required. Ask the technician maintaining the site to provide this.

The fixed sizes of the author blocks are based on the assumption that the book is taller than it is wide. Should this not be the case, the display may not work correctly. In that case, try using a greater value for size.

Example code with two authors, for the English page

<div class=”author two”>
<h3>Daniel Buckles</h3>
<div class=”book”><a title=”Learn more about the book” href=”/wp-content/uploads/books/buckles_daniel_e.pdf”><img src=”/wp-content/uploads/books/buckles_book_1.jpg” alt=”Cover of book” /></a></div>
<div class=”book”><a title=”Learn more about the book” href=”/wp-content/uploads/books/buckles_daniel_e.pdf”><img src=”/wp-content/uploads/books/buckles_book_2.jpg” alt=”Cover of book” /></a></div>
</div>

Example code with two authors, for the French page

<div class=”author two”>
<h3>Daniel Buckles</h3>
<div class=”book”><a title=”En savoir plus sur le livre” href=”/wp-content/uploads/books/buckles_daniel_f.pdf”><img src=”/wp-content/uploads/books/buckles_book_1.jpg” alt=”Couverture du livre” /></a></div>
<div class=”book”><a title=”En savoir plus sur le livre” href=”/wp-content/uploads/books/buckles_daniel_f.pdf”><img src=”/wp-content/uploads/books/buckles_book_2.jpg” alt=”Couverture du livre” /></a></div>
</div>

How the books are displayed

Here is how the books will be displayed, if a full width is available for the site, based on the value of size:

one

Author

two

Author

three

Author

four

Author

five

Author

 

six

Author

 

seven

Author

 

eight

Author

 

nine

Author

 

 

ten

Author

 

 

eleven

Author

 

 

twelve

Author