화면 크기에 따른 블로그 이미지 비율 조정

본 블로그는 PC에서 접속하는 환경을 대상으로 작성되었다.

최근 스마트폰을 통해 블로그를 확인해보니, 이미지들의 비율이 블로그 작성시에 고려한 형태와 다른 것을 깨달았다.

웹페이지가 PC에서는 가로가 긴 화면을 통해 보이고, 스마트폰에서는 세로가 긴 화면을 통해 보이는 것이 위 문제의 원인이다.

다양한 디바이스의 화면 크기를 고려해서 웹페이지를 구성하는 것을 [반응형 웹 디자인]이라 한다.

필자는 반응형 웹 디자인까지는 아니더라도, 최소한 블로그에 들어가는 이미지가 화면 크기에 대해 비율적으로 삽입되게 하고자 했다.

확인 과정에서, 다음과 같은 이유로 테마의 short code를 일부 추가했다.

  • [Hugo]에서는 기본적으로 md 서식을 통한 블로그 작성이 가능하다.
    • [md 기반 이미지 사이즈 조절]이 가능했던 것으로 보이나, 필자의 블로그에는 적용되지 않았다.
    • md 기반으로 이미지를 삽입하면, 이미지 크기가 최대로(화면 가로 크기 기준) 설정된다.
  • [Hugo Refresh 테마]에서는 HTML 서식 기반의 블로그 작성을(short code) 제공한다.
    • Hugo Refresh 테마의 figure 태그는 고정 크기로 이미지를 삽입하도록 한다.
    • Hugo는 Static Site Generator로, 화면 크기를 동적으로 얻는 것은 불가하다.

Hugo Refresh 테마의 short code (themes/hugo-refresh/layouts/shortcodes 폴더 내부 파일 참조) 중 figure.html은 다음과 같이 작성되어 있다.

{{- $original := (.Page.Resources.ByType "image").GetMatch (printf "*%s*" (.Get "src")) -}}
{{- $width    := printf "%s" (.Get "width" ) -}}
{{- $height   := printf "%s" (.Get "height") -}}
{{- $size     := printf "%sx%s" $width $height -}}
...
{{- with $original -}}
{{- $image := .Resize $size -}}
...
{{- end -}}

이 중, figure 태그의 width 또는 height에 “…%“를 할당하지 못하도록 하는 코드는 ‘$image := .Resize $size’이다.

따라서, figure.html을 복사한 figure_per.html 파일을 만들고, 다음과 같이 수정했다.

{{- $original := (.Page.Resources.ByType "image").GetMatch (printf "*%s*" (.Get "src")) -}}
{{- $width    := printf "%s" (.Get "width" ) -}}
{{- $height   := printf "%s" (.Get "height") -}}
{{- $caption  := printf "%s" (.Get "caption") -}}
{{- $alt      := printf "%s" (.Get "alt") -}}
{{- with $original -}}
{{- $image := . -}}
<div class="columns is-centered container">
    <div class="column is-full">
        <figure>
            {{- if $caption -}}
                <img class="rounded-corners" src="{{- $image.RelPermalink -}}" 
                    width="{{- $width -}}" height="{{- $height -}}" alt="{{- $alt -}}" >
            {{- else -}}
                <img class="rounded-corners" src="{{- $image.RelPermalink -}}" 
                width="{{- $width -}}" height="{{- $height -}}" >
            {{- end -}}
            {{- if $caption -}}
                <figcaption>{{- $caption -}}</figcaption>
            {{- end -}}
        </figure>
    </div>
</div>
{{- end -}}