썸네일 : 대표이미지가 없을때 대체 이미지로 보여주는 방법

나의 블로그에 처음 들어오면 20개의 글 목록과 함께 이미지가 노출된다.

최근 포스팅을 하던중, 

첨부된 이미지가 없는 경우 이미지가 노출되지 않고 공간만 차지하는 형태로 노출되는 것을 확인 했다.

반응형 스킨이나 혹은 썸네일 방식의 티스토리 스킨에서 사용하는 <s_article_rep_thumbnail> 티스토리 태그는 이미지가 없을 경우,

<s_article_rep_thumbnail>안에 포함된 태그 모두가 사라진다는 것을 어제 알게되었다.

그래서 썸네일 방식의 스킨에서 대표이미지가 없는 경우,

대체 이미지를 노출되도록 맨아래와 같이 추가했다.

이와 같은 방식은 다른 썸네일 스킨에서도 적용이 가능하다.

내가 사용하는 원본 skin.html 의 소스는 이렇다

대표이미지가 없는 경우, 소스를 보면 이렇게 <s_article_rep_thumbnail> 부분이 사라지고 없다

추가된 스크립트는 이렇다.

.index_article 태그에서 index_thumbnail 를 찾아(hasClass) 없으면 새로운 태그를 추가(append)하는 방식이다.

여기서 <div class=\"index_thumbnail\" style=\"background-image:url(./images/ooppa-og_image.png);\"></div>에서 

div를 그대로 사용하는 것은 style.css에 적용된 설정값을 그대로 사용하기 위함이다.

스크립트를 추가하고 이렇게 적용되었다.

그러면 여기서 한가지 의문사항이 생긴다.

저의 블로그는 포스팅 본문에 배경으로 이미지가 노출되도록 되어있는데..., 첨부된 이미지가 없으면 아래와 같은 배경이미지가 나타난다

〈!-- BEGIN OPENGRAPH --〉

〈meta property="og:image" content="https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png" 〉

〈!-- END OPENGRAPH --〉

소스보기를 해보니 티스토리에 첨부된 이미지가 없으면 위와 같은 메타태그가 노출되도록 되어있던데...,

이 놈은 또, 어째 수정할까 ???

아래의 이미지처럼 "META tag : 티스토리 대표이미지와 이미지 없을때 기본 제공되는 이미지 변경방법"과 같이 수정 되었습니다