Tistory 썸네일 랜덤 이미지 적용

 

새로고침 할 때마다 비어있는 이미지의 썸네일이 랜덤으로 바뀌도록 설정했다.

 

 

오랜만에 HTML/CSS를 하려니까 매우 고생했는데, 결국 짧은 코드로 끝났다.

 

작성 코드

<!--jQuery-->
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<!--랜덤하게 이미지 출력-->
<script>
	var images = ['nophoto.png', 'nophoto2.png'];

	$(document).ready(function(){
		$('.post-item .thum').css({"background":"url(./images/" + images[Math.floor(Math.random() * images.length)]+ ")", 'background-repeat' : 'no-repeat', 'background-position': 'center center', 'background-size' : '100%'});
	});
</script>

 

jQuery cdn을 복사하여 header안에 script로 삽입하였다.

이후 jQuery를 이용해, image에 올려둔 두 개의 사진들을 랜덤하게 출력했다.

여기서 이미지 위치가 매우 중요한데, tistory의 경우 ./images 폴더 밑에 업로드한 이미지가 존재한다.

이후 Math를 이용해 랜덤한 값을 뽑아 배열에 담긴 이름으로 출력하면 끝

 

 

참고로 tistory 북클럽의 post 썸네일의 class 이름은

.post-item .thum

이다.

 

원래는 썸네일 별로 랜덤하게 뽑을라 했는데,

아무래도 썸네일들이 모두 .post-item .thum 클래스를 가져서 불가능 한 것 같다.

 

더 세부적으로 클래스를 나눠서 들어가야 할 듯 싶다.