Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

Kjeld
Member
From: Tokyo, Japan
Registered: 2005-02-05
Posts: 453
Website

Old Photos of Japan Redesign

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

  • 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…


Old Photos of Japan – Japan in the 1850s~1960s (100% txp)
MeijiShowa – Stock photos of Japan in the 1850s~1960s (100% txp)
JapaneseStreets.com – Japanese street fashion (mostly txp)

Offline

#2 2021-12-15 05:13:50

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,093
Website GitHub Mastodon Twitter

Re: Old Photos of Japan Redesign

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


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#3 2021-12-15 05:58:27

Kjeld
Member
From: Tokyo, Japan
Registered: 2005-02-05
Posts: 453
Website

Re: Old Photos of Japan Redesign

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)


Old Photos of Japan – Japan in the 1850s~1960s (100% txp)
MeijiShowa – Stock photos of Japan in the 1850s~1960s (100% txp)
JapaneseStreets.com – Japanese street fashion (mostly txp)

Offline

#4 2021-12-15 17:21:29

bici
Member
From: vancouver
Registered: 2004-02-24
Posts: 2,094
Website Mastodon

Re: Old Photos of Japan Redesign

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.


…. texted postive

Offline

#5 2021-12-16 00:35:40

Kjeld
Member
From: Tokyo, Japan
Registered: 2005-02-05
Posts: 453
Website

Re: Old Photos of Japan Redesign

bici wrote #332237:

What a smashing site! Great update.

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


Old Photos of Japan – Japan in the 1850s~1960s (100% txp)
MeijiShowa – Stock photos of Japan in the 1850s~1960s (100% txp)
JapaneseStreets.com – Japanese street fashion (mostly txp)

Offline

Board footer

Powered by FluxBB