Light TT EX 대체재는?
Light TT EX 플러그인을 사용하지 않는 이유
필자는 블로그 포스팅을 하기 위해 마크다운(Markdown)을 사용한다. 마크다운 에디터에서 이미지도 쉽게 추가가 가능하면 좋겠지만, 아직까지 만족스러운 방법이 없었기에 구글 포토에 업로드 후 이미지를 링크하여 사용하고 있다.
이러한 방법으로 사용하게 되면 가장 큰 단점은 티스토리의 이미지 확대 플러그인인 'Light TT EX'이 작동하지 않는 것이다. Light TT EX플러그인은 티스토리 에디터를 사용하여 업로드한 이미지에만 적용되기 때문에, 마크다운을 사용하는 필자에게는 꽤나 문제가 되었다.
따라서, Light TT EX 플러그인 기능과 유사한 기능을 하는 무언가를 찾거나 만들 필요가 있었다.
대체제를 찾기 위한 여정
티스토리 플러그인 검색부터 구글 검색까지 여러 가지 방면으로 대체재를 찾아 헤멨다. 시도 해 본 방법도 여러 가지였는데, 작동이 안되는 것이 대부분이었고 작동 되는 것도 맘에 쏙 드는 것은 없었다. 그러다가 이 블로그에서 아이디어를 얻었다.
맨 처음은 그대로 쓸까 했는데, 그래도 내 맘에 맞게 커스터마이징 하는게 좋을거 같아서 약간 손봐서 만들었다. 최종적으로 적용하면 아래와 같이 된다.(Responsive하게 작동하도록 CSS도 수정하였다.)
이미지 팝업 적용하기
이미지 팝업 적용을 위해서는 티스토리 스킨 수정이 필요하다. 티스토리 블로그 관리 > 꾸미기 > 스킨 편집 > HTML 편집으로 들어간다.
HTML, JS
우선 자바 스크립트 코드를 <head> 와 </head> 사이에 넣는다. 필자는 </head> 바로 전에 해당 스크립트를 입력했다.
<!-- Pop Image Start-->
<script type="text/javascript">
$(function(){
// 이미지 클릭시 해당 이미지 모달
$("p img").click(function(){
let img = new Image();
img.src = $(this).attr("src")
$('.modalBox').html(img);
$(".modal").show();
});
// 모달 클릭할때 이미지 닫음
$(".modal").click(function (e) {
$(".modal").toggle();
});
});
</script>
<!-- Pop Image End-->다음으로 HTML에 해당 div를 만들어준다. <body> 와 </body> 사이 아무 데나 위치해도 무방하나, 필자는 </body>바로 전에 해당 스크립트를 입력했다.
<!-- Image modal Start -->
<div class="modal">
<div class="modalBox">
</div>
</div>
<!-- Image modal End -->CSS
다음으로 CSS를 입력할 차례이다. 필자는 여기에서 조금 수정을 가했다. 일단 수정 사항은 아래와 같다.
- Desktop, Mobile 둘 다 적용 가능하도록 media query 이용해서 수정
- Desktop의 경우 높이 기준으로 이미지 크기 설정, Mobile의 경우 폭 기준으로 이미지 크기 설정
- 이미지가 더 잘 보이도록 회색 테두리 적용
- 중앙 정렬
해당 내용을 적용하기 위해서는 CSS탭에 아래 내용을 입력하면 된다.
/*-- image modal --*/
.modal {
display: none;
z-index: 500;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
}
/* for desktop size */
.modalBox img{
position: absolute;
width: auto;
max-width: 90%;
height: 80%;
top : 50%;
left : 50%;
transform: translate(-50%, -50%);
border: 10px solid rgba(128, 128, 128);
}
/* for mobile size */
@media only screen and (max-width: 1024px){
.modalBox img{
position: absolute;
width: 90%;
height : auto;
max-height : 90%;
top : 50%;
left : 50%;
transform: translate(-50%, -50%);
border: 5px solid rgba(128,128,128);
}
}
p img:hover{
cursor: -webkit-zoom-in;
}
/*-- image modal end --*/'IT > Tistory' 카테고리의 다른 글
| [스킨 수정] 상단 진행 바(Progress Bar) 적용 (0) | 2021.09.23 |
|---|---|
| [스킨 수정] 티스토리 자동 ToC 적용 및 설정 변경 (0) | 2021.09.06 |