[티스토리 티에디션 첫화면 꾸미기] 별도 대표이미지 적용하기

현재 데스크탑 웹용 블로그 첫화면은 티에디션으로 꾸며져 있다. 꽤나 오래전에 적용했던건데 찾아보니 2010년도에 티스토리에서 서비스를 시작했었군. 요즘은 반응형 스킨적용이 점차 늘고 있는데, 이런 추세랑 티에디션이랑은 잘 안맞는거 같다. 티에디션은 거의 독립되다시피하는 서비스기 때문에 반응형 스킨도 티에디션에는 적용이 되지 않는다. 난 아직까진 반응형 스킨을 적용할 계획이 없기 때문에 티에디션 첫화면도 당분간은 이어질꺼 같다.(사실 현재 적용되어있는 블로그 스킨이 초반에 꽤나 힘들게 적용한거라 애착이 많이간다.)

글,사진 ｜ 미뇩사마

현재 블로그 첫화면에 나오는 사진들은 해당 글에 포함된 대문사진들이 대부분이다. 예전부터 몇 번 고민을 했었는데, 본문에 포함되어있는 사진말고 티에디션 블로그 첫화면용으로 따로 사진을 올릴 수 없을까?

현재 내가 설정해 놓은 티에디션 사진 비율은 7:4 다. 본문에 올라가는 사진들의 비율이 딱 7:4가 아니기 때문에 티에디션용으로 올릴 때 깔끔하게 적용되지 않는다.(사진이 잘리거나 사진에 작성된 멘트도 잘 보이지 않는다.) 반면 위(▲)와 같이 티에디션용으로 편집된 이미지는 좀 더 깔끔하게 적용이 가능할 뿐더러 글의 주제에 대해 좀 더 명확하게 표현이 가능하다.

대표이미지를 편집하기 위해서는 위(▲) 사진에 표시해 놓은 순서대로 들어가 이미지를 선택하고, 대표이미지로 적용할 수 있다. 이때 선택할 수 있는 이미지가 해당 본문 글에 포함된 사진들만 선택이 가능하기 때문에 어찌됐든 대표이미지용 사진도 본문에는 삽입이 되어야 한다. 이 대표이미지란게 블로그 첫화면에서만 보이고 본문에는 안나와야 하기 때문에 살짝 html 수정이 필요하다. 완전 간단했는데 html에 대해 거의 아는게 없으니 시간이 좀 걸렸다. 

먼저 일반 글쓰기 모드에서 대표이미지로 사용할 사진을 본문에 추가한다. 이제 추가한 대표이미지 사진은 본문에서는 출력이 안되어야 하기 때문에 해당 이미지를 숨김 처리하면 된다. 그러면 본문에서는 해당 이미지가 보이지 않게 되고, 나중에 티에디션 대표이미지를 설정할 때에는 해당 이미지가 글 본문에 올라가 있는 상태이기 때문에 선택이 가능하게 된다. 이미지를 숨김처리하는 html 수정은 아래(▼)와 같다. 빨간색 부분을 추가해주면 된다.

<p style="text-align: center; clear: none; float: none; display:none;">[##_1N|cfile29.uf@