[Chirpy] 포스트 내 이미지의 그림자 및 둥근 모서리 미적용 버그 수정
Fix Image Shadow and Border Radius Not Applied in Posts
[Chirpy] 포스트 내 이미지의 그림자 및 둥근 모서리 미적용 버그 수정
이미지 그림자 및 라운딩 미적용 되는 현상
Chirpy 의 튜토리얼 포스트를 보면 아래와 같은 설명이 기재되어 있다.
How to apply shadow to image
그리고 다른 게시글의 작성된 마크다운을 보면 아래와 같은 형식으로 작성되어 있다.
1
{: .light .w-75 .shadow .rounded-10 w='700' h='550' }
그리고 이것이 적용된 게시물의 사진은 아래와 같다.
…this is false
게시물 을 보면 알테지만 애초에 둥근 이미지를 삽입하였고 .rounded 는 적용되지 않았고,
.shadow 도 마찬가지로 미적용 되어있는 모습을 확인할 수 있다. (내가 눈이 나쁜 줄 알았다…)
이 2 개의 버그를 수정해보도록 하자.
이미지 라운딩 수정
2025년 5월 12일 이후 개설한 블로그는 버그가 수정되었음.
코드가 길어서 토글로 접어두었다.
./_includes/refactor.content.html 경로에 해당 파일을 수정한다.
기존 코드를 전부 지운 뒤, 수정 코드를 복사 및 붙여넣기를 하면 이미지 라운딩이 정상적으로 동작한다.
이와 관련된 정보는 아래의 링크 참조.
기존 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!-- Refactor the HTML structure -->
{% assign _content = include.content %}
<!--
In order to allow a wide table to scroll horizontally,
we suround the markdown table with `<div class="table-wrapper">` and `</div>`
-->
{% if _content contains '<table' %}
{% assign _content = _content
| replace: '<table', '<div class="table-wrapper"><table'
| replace: '</table>', '</table></div>'
| replace: '<code><div class="table-wrapper">', '<code>'
| replace: '</table></div></code>', '</table></code>'
%}
{% endif %}
<!--
Fixed kramdown code highlight rendering:
https://github.com/penibelst/jekyll-compress-html/issues/101
https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
-->
{% if _content contains '<pre class="highlight">' %}
{% assign _content = _content
| replace: '<div class="highlight"><pre class="highlight"><code', '<div class="highlight"><code'
| replace: '</code></pre></div>', '</code></div>'
%}
{% endif %}
<!-- Change the icon of checkbox -->
{% if _content contains '<input type="checkbox"' %}
{% assign _content = _content
| replace: '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />',
'<i class="fas fa-check-circle fa-fw checked"></i>'
| replace: '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />',
'<i class="far fa-circle fa-fw"></i>'
%}
{% endif %}
<!-- Handle images -->
{% assign IMG_TAG = '<img ' %}
{% if _content contains IMG_TAG %}
{% assign _img_content = null %}
{% assign _img_snippets = _content | split: IMG_TAG %}
{% for _img_snippet in _img_snippets %}
{% if forloop.first %}
{% assign _img_content = _img_snippet %}
{% continue %}
{% endif %}
{% assign _left = _img_snippet | split: '>' | first %}
{% assign _right = _img_snippet | remove: _left %}
{% unless _left contains 'src=' %}
{% continue %}
{% endunless %}
{% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
{% assign _attrs = _left | split: '" ' %}
{% assign _src = null %}
{% assign _lqip = null %}
{% assign _class = null %}
{% for _attr in _attrs %}
{% unless _attr contains '=' %}
{% continue %}
{% endunless %}
{% assign _pair = _attr | split: '="' %}
{% capture _key %}{{ _pair | first }}{% endcapture %}
{% capture _value %}{{ _pair | last | remove: '"' }}{% endcapture %}
{% case _key %}
{% when 'src' %}
{% assign _src = _value %}
{% when 'lqip' %}
{% assign _lqip = _value %}
{% when 'class' %}
{% assign _class = _value %}
{% endcase %}
{% endfor %}
<!-- take out classes -->
{% if _class %}
{% capture _old_class %}class="{{ _class }}"{% endcapture %}
{% assign _left = _left | remove: _old_class %}
{% endif %}
{% assign _final_src = null %}
{% assign _lazyload = true %}
{%- capture _img_url -%}
{% include media-url.html src=_src subpath=page.media_subpath %}
{%- endcapture -%}
{% assign _path_prefix = _img_url | remove: _src %}
{% unless _src contains '//' %}
{% assign _final_src = _path_prefix | append: _src %}
{% assign _src_alt = 'src="' | append: _path_prefix %}
{% assign _left = _left | replace: 'src="', _src_alt %}
{% endunless %}
{% if _lqip %}
{% assign _lazyload = false %}
{% assign _class = _class | append: ' blur' %}
{% unless _lqip contains 'data:' %}
{% assign _lqip_alt = 'lqip="' | append: _path_prefix %}
{% assign _left = _left | replace: 'lqip="', _lqip_alt %}
{% endunless %}
<!-- add image placeholder -->
{% assign _left = _left | replace: 'src=', 'data-src=' | replace: ' lqip=', ' data-lqip="true" src=' %}
{% else %}
{% assign _class = _class | append: ' shimmer' %}
{% endif %}
<!-- lazy-load images -->
{% if _lazyload %}
{% assign _left = _left | append: ' loading="lazy"' %}
{% endif %}
{% if page.layout == 'home' %}
<!-- create the image wrapper -->
{% assign _wrapper_start = '<div class="preview-img ' | append: _class | append: '">' %}
{% assign _img_content = _img_content | append: _wrapper_start %}
{% assign _right = _right | prepend: '></div' %}
{% else %}
<!-- make sure the `<img>` is wrapped by `<a>` -->
{% assign _parent = _right | slice: 1, 4 %}
{% if _parent == '</a>' %}
<!-- add class to exist <a> tag -->
{% assign _size = _img_content | size | minus: 1 %}
{% capture _class %}
class="img-link{% unless _lqip %} shimmer{% endunless %}"
{% endcapture %}
{% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>' %}
{% else %}
<!-- create the image wrapper -->
{% assign _wrapper_start = _final_src
| default: _src
| prepend: '<a href="'
| append: '" class="popup img-link '
| append: _class
| append: '">'
%}
{% assign _img_content = _img_content | append: _wrapper_start %}
{% assign _right = '></a' | append: _right %}
{% endif %}
{% endif %}
<!-- combine -->
{% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %}
{% endfor %}
{% if _img_content %}
{% assign _content = _img_content %}
{% endif %}
{% endif %}
<!-- Add header for code snippets -->
{% if _content contains '<div class="highlight"><code>' %}
{% assign _code_spippets = _content | split: '<div class="highlight"><code>' %}
{% assign _new_content = '' %}
{% for _snippet in _code_spippets %}
{% if forloop.last %}
{% assign _new_content = _new_content | append: _snippet %}
{% else %}
{% assign _left = _snippet | split: '><' | last %}
{% if _left contains 'file="' %}
{% assign _label_text = _left | split: 'file="' | last | split: '"' | first %}
{% assign _label_icon = 'far fa-file-code fa-fw' %}
{% else %}
{% assign _lang = _left | split: 'language-' | last | split: ' ' | first %}
{% capture _label_text %}{% include language-alias.html language=_lang %}{% endcapture %}
{% assign _label_icon = 'fas fa-code fa-fw small' %}
{% endif %}
{% capture _label %}
<span data-label-text="{{ _label_text | strip }}"><i class="{{ _label_icon }}"></i></span>
{% endcapture %}
{% assign _new_content = _new_content
| append: _snippet
| append: '<div class="code-header">'
| append: _label
| append: '<button aria-label="copy" data-title-succeed="'
| append: site.data.locales[include.lang].post.button.copy_code.succeed
| append: '"><i class="far fa-clipboard"></i></button></div>'
| append: '<div class="highlight"><code>'
%}
{% endif %}
{% endfor %}
{% assign _content = _new_content %}
{% endif %}
<!-- Create heading anchors -->
{% assign heading_levels = '2,3,4,5' | split: ',' %}
{% assign _heading_content = _content %}
{% for level in heading_levels %}
{% assign mark_start = '<h' | append: level | append: ' id="' %}
{% assign mark_end = '</h' | append: level | append: '>' %}
{% if _heading_content contains mark_start %}
{% assign _new_content = null %}
{% assign heading_snippets = _heading_content | split: mark_start %}
{% for snippet in heading_snippets %}
{% if forloop.first %}
{% assign _new_content = snippet %}
{% continue %}
{% endif %}
{% assign id = snippet | split: '"' | first %}
{% assign anchor = '<a href="#'
| append: id
| append: '" class="anchor text-muted"><i class="fas fa-hashtag"></i></a>'
%}
{% assign left = snippet | split: mark_end | first %}
{% assign right = snippet | slice: left.size, snippet.size %}
{% assign left = left | replace_first: '">', '"><span class="me-2">' | append: '</span>' %}
{% assign _new_content = _new_content | append: mark_start | append: left | append: anchor | append: right %}
{% endfor %}
{% assign _heading_content = _new_content %}
{% endif %}
{% endfor %}
{% assign _content = _heading_content %}
<!-- return -->
{{ _content }}
수정 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
<!-- Refactor the HTML structure -->
{% assign _content = include.content %}
<!--
In order to allow a wide table to scroll horizontally,
we suround the markdown table with `<div class="table-wrapper">` and `</div>`
-->
{% if _content contains '<table' %}
{% assign _content = _content
| replace: '<table', '<div class="table-wrapper"><table'
| replace: '</table>', '</table></div>'
| replace: '<code><div class="table-wrapper">', '<code>'
| replace: '</table></div></code>', '</table></code>'
%}
{% endif %}
<!--
Fixed kramdown code highlight rendering:
https://github.com/penibelst/jekyll-compress-html/issues/101
https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
-->
{% if _content contains '<pre class="highlight">' %}
{% assign _content = _content
| replace: '<div class="highlight"><pre class="highlight"><code', '<div class="highlight"><code'
| replace: '</code></pre></div>', '</code></div>'
%}
{% endif %}
<!-- Change the icon of checkbox -->
{% if _content contains '<input type="checkbox"' %}
{% assign _content = _content
| replace: '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />',
'<i class="fas fa-check-circle fa-fw checked"></i>'
| replace: '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />',
'<i class="far fa-circle fa-fw"></i>'
%}
{% endif %}
<!-- Handle images -->
{% assign IMG_TAG = '<img ' %}
{% if _content contains IMG_TAG %}
{% assign _img_content = null %}
{% assign _img_snippets = _content | split: IMG_TAG %}
{% for _img_snippet in _img_snippets %}
{% if forloop.first %}
{% assign _img_content = _img_snippet %}
{% continue %}
{% endif %}
{% assign _left = _img_snippet | split: '>' | first %}
{% assign _right = _img_snippet | remove: _left %}
{% unless _left contains 'src=' %}
{% continue %}
{% endunless %}
{% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
{% assign _attrs = _left | split: '" ' %}
{% assign _src = null %}
{% assign _lqip = null %}
{% assign _class = null %}
{% for _attr in _attrs %}
{% unless _attr contains '=' %}
{% continue %}
{% endunless %}
{% assign _pair = _attr | split: '="' %}
{% capture _key %}{{ _pair | first }}{% endcapture %}
{% capture _value %}{{ _pair | last | remove: '"' }}{% endcapture %}
{% case _key %}
{% when 'src' %}
{% assign _src = _value %}
{% when 'lqip' %}
{% assign _lqip = _value %}
{% when 'class' %}
{% assign _class = _value %}
{% endcase %}
{% endfor %}
<!-- take out classes -->
{% assign _wrapper_class = '' %}
{% if _class %}
{% assign _remain = _class %}
{% assign _class_array = _class | split: ' ' %}
{% for c in _class_array %}
{% assign _pick = false %}
{% case c %}
{% when 'preview-img', 'normal', 'left', 'right', 'light', 'dark' %}
{% assign _pick = true %}
{% else %}
{% if c contains '-' %}
{% assign start = c | split: '-' | first %}
{% if start == 'w' %}
{% assign _pick = true %}
{% endif %}
{% endif %}
{% endcase %}
{% if _pick %}
{% assign _remain = _remain | remove: c | strip %}
{% assign _wrapper_class = _wrapper_class | append: ' ' | append: c %}
{% endif %}
{% endfor %}
{% unless _wrapper_class == '' %}
{% capture _old_class %}class="{{ _class }}"{% endcapture %}
{% assign _left = _left | remove: _old_class %}
{% unless _remain == '' %}
{% capture _new_class %}class="{{ _remain }}"{% endcapture %}
{% assign _left = _left | append: _new_class %}
{% endunless %}
{% endunless %}
{% endif %}
{% assign _final_src = null %}
{% assign _lazyload = true %}
{%- capture _img_url -%}
{% include media-url.html src=_src subpath=page.media_subpath %}
{%- endcapture -%}
{% assign _path_prefix = _img_url | remove: _src %}
{% unless _src contains '//' %}
{% assign _final_src = _path_prefix | append: _src %}
{% assign _src_alt = 'src="' | append: _path_prefix %}
{% assign _left = _left | replace: 'src="', _src_alt %}
{% endunless %}
{% if _lqip %}
{% assign _lazyload = false %}
{% assign _wrapper_class = _wrapper_class | append: ' blur' %}
{% unless _lqip contains 'data:' %}
{% assign _lqip_alt = 'lqip="' | append: _path_prefix %}
{% assign _left = _left | replace: 'lqip="', _lqip_alt %}
{% endunless %}
<!-- add image placeholder -->
{% assign _left = _left | replace: 'src=', 'data-src=' | replace: ' lqip=', ' data-lqip="true" src=' %}
{% else %}
{% assign _wrapper_class = _wrapper_class | append: ' shimmer' %}
{% endif %}
<!-- lazy-load images -->
{% if _lazyload %}
{% assign _left = _left | append: ' loading="lazy"' %}
{% endif %}
{% if page.layout == 'home' %}
<!-- create the image wrapper -->
{% assign _wrapper_start = '<div class="preview-img ' | append: _class | append: '">' %}
{% assign _img_content = _img_content | append: _wrapper_start %}
{% assign _right = _right | prepend: '></div' %}
{% else %}
<!-- make sure the `<img>` is wrapped by `<a>` -->
{% assign _parent = _right | slice: 1, 4 %}
{% if _parent == '</a>' %}
<!-- add class to exist <a> tag -->
{% assign _size = _img_content | size | minus: 1 %}
{% capture _class %}
class="img-link{% unless _lqip %} shimmer{% endunless %}"
{% endcapture %}
{% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>' %}
{% else %}
<!-- create the image wrapper -->
{% assign _wrapper_start = _final_src
| default: _src
| prepend: '<a href="'
| append: '" class="popup img-link'
| append: _wrapper_class
| append: '">'
%}
{% assign _img_content = _img_content | append: _wrapper_start %}
{% assign _right = '></a' | append: _right %}
{% endif %}
{% endif %}
<!-- combine -->
{% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %}
{% endfor %}
{% if _img_content %}
{% assign _content = _img_content %}
{% endif %}
{% endif %}
<!-- Add header for code snippets -->
{% if _content contains '<div class="highlight"><code>' %}
{% assign _code_spippets = _content | split: '<div class="highlight"><code>' %}
{% assign _new_content = '' %}
{% for _snippet in _code_spippets %}
{% if forloop.last %}
{% assign _new_content = _new_content | append: _snippet %}
{% else %}
{% assign _left = _snippet | split: '><' | last %}
{% if _left contains 'file="' %}
{% assign _label_text = _left | split: 'file="' | last | split: '"' | first %}
{% assign _label_icon = 'far fa-file-code fa-fw' %}
{% else %}
{% assign _lang = _left | split: 'language-' | last | split: ' ' | first %}
{% capture _label_text %}{% include language-alias.html language=_lang %}{% endcapture %}
{% assign _label_icon = 'fas fa-code fa-fw small' %}
{% endif %}
{% capture _label %}
<span data-label-text="{{ _label_text | strip }}"><i class="{{ _label_icon }}"></i></span>
{% endcapture %}
{% assign _new_content = _new_content
| append: _snippet
| append: '<div class="code-header">'
| append: _label
| append: '<button aria-label="copy" data-title-succeed="'
| append: site.data.locales[include.lang].post.button.copy_code.succeed
| append: '"><i class="far fa-clipboard"></i></button></div>'
| append: '<div class="highlight"><code>'
%}
{% endif %}
{% endfor %}
{% assign _content = _new_content %}
{% endif %}
<!-- Create heading anchors -->
{% assign heading_levels = '2,3,4,5' | split: ',' %}
{% assign _heading_content = _content %}
{% for level in heading_levels %}
{% assign mark_start = '<h' | append: level | append: ' id="' %}
{% assign mark_end = '</h' | append: level | append: '>' %}
{% if _heading_content contains mark_start %}
{% assign _new_content = null %}
{% assign heading_snippets = _heading_content | split: mark_start %}
{% for snippet in heading_snippets %}
{% if forloop.first %}
{% assign _new_content = snippet %}
{% continue %}
{% endif %}
{% assign id = snippet | split: '"' | first %}
{% assign anchor = '<a href="#'
| append: id
| append: '" class="anchor text-muted"><i class="fas fa-hashtag"></i></a>'
%}
{% assign left = snippet | split: mark_end | first %}
{% assign right = snippet | slice: left.size, snippet.size %}
{% assign left = left | replace_first: '">', '"><span class="me-2">' | append: '</span>' %}
{% assign _new_content = _new_content | append: mark_start | append: left | append: anchor | append: right %}
{% endfor %}
{% assign _heading_content = _new_content %}
{% endif %}
{% endfor %}
{% assign _content = _heading_content %}
<!-- return -->
{{ _content }}
이미지 그림자 추가
구글에 검색해보았지만, 이에 대해 언급한 글이 없었고, 이슈가 된 것 같지도 않아서 직접 수정을 진행했다.
./_sass/base/_base.scss 경로에 해당 파일을 수정한다.
_base.scss 파일의 최하단에 아래의 내용을 추가한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.
.
#tail-wrapper {
@include bp.xxxl {
padding-right: 4.5rem !important;
}
> :not(script) {
margin-top: 3rem;
}
}
/* --- 이미지 그림자 설정, 아래의 코드 추가 --- */
img.shadow {
@extend %rounded;
box-shadow: 0 0.4rem 0.8rem var(--img-shadow-color) !important;
}
이후, 라이트 모드와 다크모드 각각의 테마에 따른 색상설정을 위해 각 파일에 변수를 추가한다.
./_sass/themes/_light.scss
1
2
3
4
5
6
7
8
/* Posts */
--toc-highlight: #0550ae;
--toc-popup-border-color: lightgray;
.
.
.
--prompt-danger-icon-color: #df3c30;
--img-shadow-color : rgb(0, 0, 0, 1); // 라이트모드 이미지 그림자 색상 변수 추가
./_sass/themes/_dark.scss
1
2
3
4
5
6
7
8
/* Posts */
--toc-highlight: rgb(205, 92, 92); // rgb(116, 178, 243);
--toc-popup-border-color: #373737;
.
.
.
--prompt-danger-icon-color: #cd0202;
--img-shadow-color : rgba(186, 191, 196, 0.3); // 다크모드 이미지 그림자 색상 변수 추가
Result
여기까지 진행 했다면, 아래의 이미지처럼 라운딩 및 각 테마별로 그림자 색상이 바뀌는 것을 확인할 수 있다.
원래 안되던걸 되게 바꾼 것 뿐이라서, 사용방법은 본래의 방식대로 그대로 적용하면 된다.
사진을 클릭하면 원본의 이미지와 같이 각진 모습으로 보여진다.
1
{: .shadow .rounded-10 w='700' h='550' }
Test Image.jpg