some photo layout adjustments and Japanese versions of latest photo posts

3 years ago · 036c6e9d4f
8 changed files with 106 additions and 17 deletions
--- a/content/photo/2021/08/610be737/index.jp.md
+++ b/content/photo/2021/08/610be737/index.jp.md
@ -0,0 +1,17 @@
+---
+date: '2021-08-05 14:27:19'
+draft: false
+gtsurl: null
+photo:
+    - { value: /images/2021/08/1628170038899-636414-800.jpeg, alt: '手前にはゴーズが入った派手なブランドのFierce Beerのグラス、背景にはビールメニューのコーナーと白壁のバーが大きくぼかされている。' }
+posttype: photo
+sensitive: 'false'
+slug: 610be737
+thumbnail:
+    - /images/2021/08/1628170038899-636414-300.jpeg
+visibility: public
+title: photo
+---
+彼らの最初のバーのクラウドファンディングを支援してから何年も経ち、ようやくここまで来ました。
+
+At [Fierce Bar Aberdeen](https://fiercebeer.com)
--- a/content/photo/2021/08/6110f0ed/index.jp.md
+++ b/content/photo/2021/08/6110f0ed/index.jp.md
@ -0,0 +1,36 @@
+---
+category:
+    - family
+    - food
+date: '2021-08-09 10:10:05'
+draft: false
+gtsurl: null
+photo:
+    - { value: /images/2021/08/1628500196646-836734-800.jpeg, alt: 'アジア人女性とその幼い娘が抱き合っています。背景にはむき出しの石の壁があり、バーの内装です。' }
+    - { value: /images/2021/08/1628500197317-918598-800.jpeg, alt: '黒いTシャツ、緑のジャケット、ジーンズ、サングラス、帽子を身につけた中年の白人男性が、青いサマードレスと青い帽子を身につけた幼い娘を抱きかかえています。' }
+    - { value: /images/2021/08/1628500198057-078362-800.jpeg, alt: 'バイキングの長船のブロンズモデルの横にある大きな灰色の石の上に、アジア系スコットランド人の少女がしゃがみ込んでいる。背景には北海がある。' }
+    - { value: /images/2021/08/1628500198742-172712-800.jpeg, alt: 'アジア人女性が草原の丘に座り、娘を両足の間に挟み、両手を合わせて空に向かっている。背景には古代の城跡がある。' }
+    - { value: /images/2021/08/1628500199645-257118-800.jpeg, alt: '黒い帽子をかぶったアジア人女性と、ベージュの帽子とサングラスをかぶった白人男性、青いサマードレスを着た肩までの茶髪の娘を挟んで自撮りしています。' }
+    - { value: /images/2021/08/1628500200331-339817-800.jpeg, alt: 'トラックの上にはサーフボードが置かれ、「Roots - Plant-based catering」と「Roots @ The Beach」と書かれています。 トラックの前にはメニューのAボード、アルミ缶に入った花、注文用と回収用の2つのキオスクの窓があり、トラックの中にはマスクをした女性の姿が見えます。 手前にはプロムナードの道があります。' }
+    - { value: /images/2021/08/1628500200959-421226-800.jpeg, alt: '手前の写真はプラントベースのハンバーガーで、パティの上にはビーガンチーズとナチョス、下にはレタスとアボカドが乗っています。背景には、シラチャマヨ、キャベツのピクルス、ホワイトソース、スプリングオニオンがかかったロードフライのボウルがあります。' }
+    - { value: /images/2021/08/1628500201697-447967-800.jpeg, alt: '手前はプラントベースのハンバーガーで、パティの上には赤キャベツのピクルス、下にはレタスとアボカド、ハンバーガーの側面には薄いオレンジ色のシラチャマヨが散りばめられています' }
+    - { value: /images/2021/08/1628500202404-526821-800.jpeg, alt: 'Fierce Beerブランドのグラスの中にダークビールが入っている様子を斜めから撮影したもので、背景にはバーが見え、スチール製のFierce Hopmanロゴ、いくつかのぼかしたタップ、メニューモニター、巻き毛の黒髪をしたマスクをしたバーテンが写っています。' }
+    - { value: /images/2021/08/1628500203092-554111-800.jpeg, alt: '青い壁にサムライをモチーフにした「Fierce Hopman」のロゴの切り抜きが飾られている。 ロゴの前には、白い鉢に入った草のような小さな植物が置かれ、その横には小さなロウソクが置かれています。 また、木製のテーブルの上には、ブラックウォッチのタータンチェックのフェイスマスクが置かれています。' }
+posttype: photo
+sensitive: 'true'
+slug: 6110f0ed
+thumbnail:
+    - /images/2021/08/1628500196646-836734-300.jpeg
+    - /images/2021/08/1628500197317-918598-300.jpeg
+    - /images/2021/08/1628500198057-078362-300.jpeg
+    - /images/2021/08/1628500198742-172712-300.jpeg
+    - /images/2021/08/1628500199645-257118-300.jpeg
+    - /images/2021/08/1628500200331-339817-300.jpeg
+    - /images/2021/08/1628500200959-421226-300.jpeg
+    - /images/2021/08/1628500201697-447967-300.jpeg
+    - /images/2021/08/1628500202404-526821-300.jpeg
+    - /images/2021/08/1628500203092-554111-300.jpeg
+visibility: public
+title: photo
+---
+最近のアバディーンでの "staycation "ホリデーからの写真です。Dunottar CastleやStonehaven、植物由来の優れたフードトラック、私の好きなビール会社のフラッグシップパブなどの写真があります。
--- a/content/photo/2021/08/6110f0ed/index.md
+++ b/content/photo/2021/08/6110f0ed/index.md
@ -13,7 +13,7 @@ photo:
    - { value: /images/2021/08/1628500199645-257118-800.jpeg, alt: 'a selfie, with an Asian woman wearing a black cap, a white guy with a gingery white beard wearing a beige cap and sunglasses carrying their daughter, wearing a blue Summer dress with shoulder length brown hair, between them. in the background and at a much lower elevation is a rocky beach cove.' }
    - { value: /images/2021/08/1628500200331-339817-800.jpeg, alt: 'A largely wooden food truck with green upper half, a surfboard sits atop the truck with the text "Roots - Plant-based catering" and "Roots @ The Beach".  There is a menu A-board in front of the truck, some flowers in aluminium pails, two kiosk windows,one for orders and one for collection and a maske woman is visible inside the truck.  In the foreground is the promenade path.' }
    - { value: /images/2021/08/1628500200959-421226-800.jpeg, alt: 'The foreground is a shot of a Plant-based burger, with vegan cheese and some nachos atop of the patty and lettuce & avocado below,  in the background is a bowl of loaded fries covered with sriracha mayo, pickled cabbage, a white sauce and spring onions. further back is a blurry burger, detailed in the next shot.' }
-    - { value: /images/2021/08/1628500201697-447967-800.jpeg, alt: 'The foreground is a shot of a Plant-based burger, with pickled red cabbage atop of the party and lettuce & avocado below, a mess of light orange sriracha mayo runs down the sides of the burger.  in the background is a bowl of fries.' }
+    - { value: /images/2021/08/1628500201697-447967-800.jpeg, alt: 'The foreground is a shot of a Plant-based burger, with pickled red cabbage atop of the patty and lettuce & avocado below, a mess of light orange sriracha mayo runs down the sides of the burger.  in the background is a bowl of fries.' }
    - { value: /images/2021/08/1628500202404-526821-800.jpeg, alt: 'A tilted shot of a Fierce Beer branded glass with a dark beer inside, the bar is visible in the background with a steel Fierce Hopman logo,  some blurred taps, a menu monitor and a masked barman with curly dark hair.' }
    - { value: /images/2021/08/1628500203092-554111-800.jpeg, alt: 'A samurai-themed decorated cutout of the Fierce Hopman logo on a blue wall.  A small, herbaceous looking plant in a white pot sits in front of the logo, next to a small candle.  A bit of a black watch tartan face mask is also visible on a wooden table.' }
 posttype: photo
--- a/themes/nipponalba/layouts/_default/single.html
+++ b/themes/nipponalba/layouts/_default/single.html
@ -16,7 +16,7 @@
    <section class="photogrid">
    {{ range .Page.Params.Photo }}
      {{ if isset . "value" }}
-        <a href="{{ .value }}"><img class="u-photo" src="{{ .value }}" alt="{{ .alt }}"/></a>
+        <a href="{{ .value }}"><img class="u-photo" src="{{ .value }}" alt="{{ .alt }}" title="{{ .alt }}"/></a>
        {{ else }}
          <a href="{{ . }}"><img class="u-photo" src="{{ . }}" alt=" Trying to fix"/></a>
      {{end}}
--- a/themes/nipponalba/layouts/_default/single.jp.html
+++ b/themes/nipponalba/layouts/_default/single.jp.html
@ -16,7 +16,7 @@
    <section class="photogrid">
    {{ range .Page.Params.Photo }}
      {{ if isset . "value" }}
-        <a href="{{ .value }}"><img class="u-photo" src="{{ .value }}" alt="{{ .alt }}"/></a>
+        <a href="{{ .value }}"><img class="u-photo" src="{{ .value }}" alt="{{ .alt }}" title="{{ .alt }}"/></a>
        {{ else }}
          <a href="{{ . }}"><img class="u-photo" src="{{ . }}" alt=" Trying to fix"/></a>
      {{end}}
--- a/themes/nipponalba/layouts/index.html
+++ b/themes/nipponalba/layouts/index.html
@ -28,12 +28,15 @@
          <section class="photos">
        {{ $summary := .Content }}
          {{ range first 1 .Page.Params.Photo }}
+          <figure class="index-photos">
            {{ if isset . "value" }}
            <img class="u-photo thumb" src="{{ replace .value "800." "300."}}" title="{{$summary}}" alt="{{ .alt }}"/>
            {{ else }}
            <img class="u-photo thumb" src="{{ replace . "800." "300."}}" title="{{$summary}}" alt="Alt not yet added, will fix!"/>
            {{ end }}
          {{end}}
+          <figcaption class="index-photos-caption">{{ len .Page.Params.Photo }} {{if eq (len .Page.Params.Photo) 1 }}photo{{ else }}photos{{ end }}</figcaption>
+          </figure>
          </section>
          {{end}}
      </section>
--- a/themes/nipponalba/layouts/index.jp.html
+++ b/themes/nipponalba/layouts/index.jp.html
@ -25,16 +25,19 @@
      <article class="index-photo h-entry entry"><a class="u-url" href="{{ .Permalink }}">
      <section class="e-content">
        {{ if eq .Type "photo"}}
-          <section class="photos">
-        {{ $summary := .Content }}
-          {{ range first 1 .Page.Params.Photo }}
-            {{ if isset . "value" }}
-            <img class="u-photo thumb" src="{{ replace .value "800." "300."}}" title="{{$summary}}" alt="{{ .alt }}"/>
-            {{ else }}
-            <img class="u-photo thumb" src="{{ replace . "800." "300."}}" title="{{$summary}}" alt="Alt not yet added, will fix!"/>
-            {{ end }}
-          {{end}}
-          </section>
+        <section class="photos">
+      {{ $summary := .Content }}
+        {{ range first 1 .Page.Params.Photo }}
+        <figure class="index-photos">
+          {{ if isset . "value" }}
+          <img class="u-photo thumb" src="{{ replace .value "800." "300."}}" title="{{$summary}}" alt="{{ .alt }}"/>
+          {{ else }}
+          <img class="u-photo thumb" src="{{ replace . "800." "300."}}" title="{{$summary}}" alt="Alt not yet added, will fix!"/>
+          {{ end }}
+        {{end}}
+        <figcaption class="index-photos-caption">{{ len .Page.Params.Photo }} {{if eq (len .Page.Params.Photo) 1 }}photo{{ else }}photos{{ end }}</figcaption>
+        </figure>
+        </section>
          {{end}}
      </section>
      </a></article>{{ end }}</section>
--- a/themes/nipponalba/static/css/style.css
+++ b/themes/nipponalba/static/css/style.css
@ -476,6 +476,29 @@ main{
  margin:0;
  padding:0;
 }
+
+.index-photos{
+  position:relative;
+  width: 100%;
+  margin: 0;
+  padding: 0
+}
+
+.index-photos-caption{
+  display: block;
+  position: absolute;
+  width: 100%;
+  color: var(--text-colour);
+  left: 10px;
+  bottom: -10px;
+  padding: 1em;
+  font-weight: 700;
+  font-size: 1.2em;
+  text-align: right;
+  z-index: 2;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
 .index-article img,  .list-article img, .list-blog img{
  width:100%;
  height:100px;
@ -498,7 +521,7 @@ main{
 .index-article .e-content, .list-article .e-content{
  padding:5px;
 }
-.index-photo img, .index-current img{
+.index-photos img, .index-current img{
  width:100%;
  height:220px;
  object-fit:cover;
@ -924,13 +947,20 @@ time{
 .photogrid{
  display:flex;
  flex-wrap:wrap;
-  width:100%;
+  width: 100%;
  height: 100%;
  min-width:100%;
  margin-bottom:10px;
 }
+.photogrid img{
+  max-width: 700px;
+  margin: 0 auto;
+  padding: 10px;
+}
 .feed img.thumb{
  width:220px;
+  height: 220px;
+  object-fit:cover;
  border-radius: 15px;
  padding: 0px;
  margin:10px;
@ -1163,7 +1193,7 @@ article img{
 .post_content, .index_content, .index_exercise{
  width: 95%;
 }
-.photo .index_content{
+.photo .index_content .index-photos, .index-photos-caption{
  text-align: left;
 }
 .profile{
@ -1220,7 +1250,7 @@ nav{
  padding:10px 6px;
  height: 30px;
 }
-.index-article, .index-photo, .index-current, .list-article, .list-blog, .list-category, .index_content, .index_exercise{
+.index-article, .index-photos, .index-current, .list-article, .list-blog, .list-category, .index_content, .index_exercise, .index-photos{
  width:100%;
  margin-bottom:10px;
 }