워드프레스의 홈페이지나 카테고리 페이지에서 특성 이미지를 클릭하면 보통 글(Post) 본문으로 연결됩니다. 특성 이미지(썸네일 이미지)의 URL 주소를 활용하면 해당 이미지를 클릭할 때 글 본문으로 들어가는 대신 라이트박스 형태나 팝업 형태로 특성 이미지를 여는 것이 가능합니다. 다음과 같은 코드로 전면 페이지나 카테고리 페이지 등 원하는 아카이브 페이지에서 썸네일을 라이트박스 형태로 활용이 가능합니다.
<?php $thumbimage = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'large'); ?>
<a href="<?php echo $thumbimage[0]; ?>" rel="lightbox">
<?php the_post_thumbnail('excerpt-thumbnail'); ?></a>
라이트박스 플러그인에 따라 rel="lightbox" 형태로 코드를 삽입하거나 경우에 따라서는 이미지 링크만 있으면 자동으로 라이트박스 형태로 실행될 것입니다.
그리고 특성 이미지(썸네일 이미지)의 크기 조정은 이 글을 참고하여 정의하고 위의 코드에서 'large', 'excerpt-thumbnail' 대신 사용할 수 있습니다.
가령 아래와 같이 카테고리 레이아웃을 만든 경우 위의 코드를 이용하여 썸네일 이미지를 클릭하면 라이트박스 형태로 실행할 수 있습니다.
카테고리 페이지를 갤러리 레이아웃으로 바꾸고 싶은 경우 이 방법을 이용할 수 있습니다.
으아, 특성 이미지 URL만 뽑는 방법 찾아서 헤맸는데 여기서 발견했네요. 좋은 팁 잘 참고하고 갑니다.
블로그를 방문해주셔서 감사합니다.
글 내용이 도움이 되기를 바라겠습니다.
즐거운 저녁 시간 보내세요:)
외부이미지를 불러와서 사용하고 있습니다. 그러다보니 프론트 페이지에서 이미지 크기가 들쭉날쭉 합니다.
균일한 크기로 조정할 수 있을까요?
안녕하세요?
테마 소스 파일을 조금 수정하면 쉽게 가능할 것 같습니다.
(https://www.quora.com/How-do-I-make-all-images-in-my-CSS-styling-to-be-the-same-proportionate-size 글의 내용을 응용하면 이미지의 너비와 높이 비율을 일정하게 맞출 수 있을 것입니다.)
현 상태로서는 다음과 같은 코드를 넣어서 테스트해보시겠어요?
.post-thumbnail img {object-fit: cover;
height: 250px !important;
}
(참고: https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio )
해상도별로 Height를 달리하면 좋을 것 같습니다.
이 부분은 CSS media query로 검색하여 해상도별로 높이를 달리 설정할 수 있습니다.
앗! 해결되었어요!
정말 감사합니다. ^^
안녕하세요. 워드프레스에서 섬네일에 외부 링크를 걸어 -blank 형태로 이동하게 할 수 있는 방법을 찾고 있습니다. 혹시 이러한 기능이 가능한 플러그인이나 방법이 있을까요...