티스토리 커버 랜덤 이미지로 변경하기

안녕하세요. 오늘은 티스토리에서 html 편집을 통해서 아래처럼 게시글 제목 부분의 배경 이미지를 변경하는 방법을 알아보겠습니다. 

이걸 변경을 안해주면 대표 이미지로 항상 보이던데, 대표 이미지는 비율이 300x300으로 해놔서 저렇게 넓은 커버 이미지 영역에 들어갈 경우 보기 좋지 않게 깨지는 이슈가 있었습니다. 

비율이 깨지고 보기 좋지 않을바에 관련은 없지만 깔끔한 사진을 보여주는 게 좋을 것 같아서 변경했는데요. 

랜덤 이미지 API

저는 고정된 이미지보다는 매번 다른 이미지를 보여주는 게 좋을 것 같아서 랜덤 하게 이미지를 보여주는 unsplash api를 이용하기로 했습니다. 이것을 이용하면 이미지의 키워드와 사이즈를 정해서 받을 수 있습니다. 

source.unsplash.com/1920x680/?stock이런 형식으로 url을 작성하면 1920x 680 사이즈, 키워드는 stock 인 이미지를 랜덤 하게 보내줍니다. 

 

HTML 편집

티스토리의 html편집 을 눌러주신 후에 가장 아래에 이렇게 추가해주시면 되는데요. 

<script>
	// 커버 랜덤
	$(document).ready(function(){ 
		$(".post-cover").css("background-image" , 'url(https://source.unsplash.com/1920x680/?stock)' );
	}); 
</script>

이렇게 하시면 동작은 하지만 궁금하신 분들을 위해 설명드리자면, 아래 부분은 화면에 커버 이미지가 들어갈 준비가 되었는지 물어보는 코드입니다.

<script>
	$(document).ready(function(){ 
		
	}); 
</script>

커버 이미지가 들어갈 준비가 되었다면 이제 커버 이미지에 위에서 사용했던 url을 통해서 배경이미지를 등록해줘야겠죠? 

아래에서 보시는 것 처럼 커버 이미지가 html에서. post-cover 이기 때문에 이런 코드를 작성해주게 됩니다. 

$(".post-cover").css("background-image" , 'url(https://source.unsplash.com/1920x680/?stock)' );

. post-cover의 css 중에서 background-image(배경 이미지)를 내가 원하는 url로 바꿀 거야!라는 코드입니다. 

쉽죠? html과 css는 사실 알고면 굉장히 쉽게 수정할 수 있답니다. 이렇게 하고 나면 이제 게시글에서 새로고침 할 때마다 지정해놓은 키워드의 랜덤 이미지가 커버 이미지로 등록되게 됩니다. 

랜덤 이미지가 싫으시다면 그냥 고정 이미지로 해놓으셔도 상관없습니다!