Old Photos of Japan Redesign

Kjeld · 2021-12-15 04:59:27

In 2007, I launched my site Old Photos of Japan (see at internet archive) to share photos of everyday life in old Japan. 15 years is a long time, so the site had become painfully outdated.

The redesign launched today:

Old Photos of Japan

Two Textpattern installations (English and Japanese) share a single image folder.

Plugins: adi_notes, arc_social_share, com_connect, etc_pagination, etc_query, jcr_image_custom, rah_swap, smd_at_work, smd_babel, smd_bio, smd_thumbnail

Responsive images through smd_thumbnail and img srcset.

Shortcodes allow different containers within the article body. For example, 100% wide for photos with text next to them, or a narrow centered container for text. This way, no static design on a page is required, and design can be done within the article itself without needing html. Compare this design and this design with a regular article like this or this.

I created a “Universal Design” theme that I can use for other unrelated sites:

There is a single css sheet (on top of Bootstrap) served from a folder on my (static non-txp) company site for all the sites.

Style variables in the head allow easy customization. On another site I only need to change the colors and the image aspect ratio, decide whether to use horizontal, vertical or square images in the cards, and perhaps use a different article form, and the site looks different. Here is another site (still a work in progress) using the same theme and stylesheet.

This means that now I need to change only one design when updating all my sites. All the sites look sufficiently different, but still similar enough to express the brand. Here is what the style variables in the head look like for Old Photos of Japan:

    <!-- Custom styles for this template -->
    <link href="https://www.duits.co/css/duits.css" rel="stylesheet">
    <!-- Custom colors for this template -->
    <style>
    :root {
    --site-bg: #f9f8f3; /* Background color of site */
    --navbar-bg: #ffffff; /* Background color of navbar and dropdown menu */
    --header-bg: #191716; /* Background of article header */
    --header-title: #ffffff; /* Title of article header */
    --header-focus: #ff7f11; /* Focus color of title. Also used for table borders */
    --header-text: #f9f8f3; /* Text of article header */
    --headline: #c55118; /* Color of headline */
    --card-bg: #191716; /* Background of cards. Also used for table on hover (OR: #515751) */
    --card-text: #f9f8f3; /* Text of cards */
    --card-focus: #ff7f11; /* Focus color of card title */
    --card-photo-focus: #6c757d; /* Focus color of photo card title */
    --attention-bg: #bfc2b6; /* Background and border color of important items inside article marked with .attention class */
    --attention-text: #191716; /* Text of important items inside article marked with .attention class */
    --timeline: #ef8537; /* Color of headline and years in timelines */
    --bq: #f9f8f3; /* Blockquote quotation mark and footer */
    --footer-bg: #191716; /* Footer background. Preferably the same as --header-bg */
    --footer-text: #f9f8f3; /* Footer text. Preferably the same as --header-text */
    --img-aspect-ratio: 100%; /* img height divided by img width = aspect ratio of top image */
    }
    </style>

<txp:hide>Calculate img height divided by img width = aspect ratio of top image</txp:hide>
<txp:if_individual_article>
<txp:images id='<txp:custom_field name="article_image" />'>
<txp:php>
	$h = image_info(array('type' => 'h'));
	$w = image_info(array('type' => 'w'));
	$r = ($h/$w)*100 . '%';
	$v = ($h/$w)*100;
	global $variable;
	$variable['img-aspect-ratio'] = $r;
	$variable['img-aspect-number'] = $v;
</txp:php> 
</txp:images>
</txp:if_individual_article>

There are still a few issues to take care of. The biggest one is an issue with rah_swap and img srcset. It appears that they won’t play together…

colak · 2021-12-15 05:13:50

Looks good but I’d check the validation. It appears to be an unclosed div somewhere in there.

Kjeld · 2021-12-15 05:58:27

colak wrote #332223:

Looks good but I’d check the validation. It appears to be an unclosed div somewhere in there.

Oh, you noticed that quickly! Thanks. I will see if I can find it.

EDIT

Oops, found lots of validation errors on the site… Fixing them now.

Once again, thanks for letting me know, Yiannis!

Last edited by Kjeld (2021-12-15 07:04:44)

bici · 2021-12-15 17:21:29

Kjeld wrote #332222:

In 2007, I launched my site Old Photos of Japan (see at internet archive) to share photos of everyday life in old Japan. 15 years is a long time, so the site had become painfully outdated.

The redesign launched today:

Old Photos of Japan

What a smashing site! Great update.

Kjeld · 2021-12-16 00:35:40

bici wrote #332237:

What a smashing site! Great update.

Thank you! Lots of sweat and tears in this one…

Textpattern CMS

Textpattern CMS support forum

#1 2021-12-15 04:59:27