[자바스크립트] 티스토리의 대표 이미지를 배너에 불러오기

티스토리 블로그를 처음 시작했을 때, 이런 방식이 적용된 블로그를 보고 관련 정보를 한참 찾아다니다 포기했었습니다 ㅠㅠ

배너를 영상으로 넣고 사느라 잊어버리고 있다가, 새로운 스킨을 만들며 생각이 나서 작업해봤습니다.

위 사진처럼 배너를 꾸밀 때 사용하실 수 있습니다.

HTML

<div id="blog-banner">
    <div class="banner_wrapper">
        <div id="banner"></div>
    </div>
</div>

CSS

#banner, #blog-banner {
  width: 100%;
  height: 50vh
}


#blog-banner {
  top: 0;
  left: 0
}


#blog-banner .banner_wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  background: #000;
  overflow: hidden;
  z-index: -1
}


#banner {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
  opacity: .7
}

JS

$(function() {
  var a = $("meta[property='og:image']"),
    b = $("#banner"),
    c = $("body");
  if (c.is("#tt-body-page")) {
    if (a.length >= 1) {
      b.css("background-image", "url(" + a.attr("content") + ")")
    } else {
      b.css("background-image", "url(" + $(".article img:first").attr("src") + "?original)")
    }
  }
  if (c.is("#tt-body-index")) {
    b.addClass("banner-index")
  }
  if (c.is("#tt-body-category")) {
    b.addClass("banner-category")
  }
  if (c.is("#tt-body-guestbook")) {
    b.addClass("banner-guestbook")
  }
  if (c.is("#tt-body-tag")) {
    b.addClass("banner-tag")
  }
  if (c.is("#tt-body-archive")) {
    b.addClass("banner-archive")
  }
  if (c.is("#tt-body-search")) {
    b.addClass("banner-search")
  }
  if (c.is("#tt-body-location")) {
    b.addClass("banner-location")
  }
});

ES

$(function() {
  var d = $("meta[property='og:image']"),
    e = $("#banner"),
    f = $("body");
  f.is("#tt-body-page") && (1 <= d.length ? e.css("background-image", "url(" + d.attr("content") + ")") : e.css("background-image", "url(" + $(".article img:first").attr("src") + "?original)")), f.is("#tt-body-index") && e.addClass("banner-index"), f.is("#tt-body-category") && e.addClass("banner-category"), f.is("#tt-body-guestbook") && e.addClass("banner-guestbook"), f.is("#tt-body-tag") && e.addClass("banner-tag"), f.is("#tt-body-archive") && e.addClass("banner-archive"), f.is("#tt-body-search") && e.addClass("banner-search"), f.is("#tt-body-location") && e.addClass("banner-location")
});

.article을 본인이 사용 중인 글을 감싸는 요소의 class(혹은 id)로 변경해주세요.

body의 id를 확인해서 배너에 백그라운드 이미지를 추가하거나, 특정 class를 추가하는 방식입니다.

제가 사용하는 스킨을 모조리 둘러보면서 #tt-body-blahblah를 최대한 다 채우려고 해봤는데, 모든 id를 추가했는지 확신이 없네요 ㅠㅠ

#tt-body-page 에선 대표 이미지의 경로를 가져옵니다. 만약 대표 이미지가 없다면 글에 첨부된 이미지 중 첫 번째의 경로를 가져옵니다.

그 외에는 배너에 class를 추가해서 css에서 미리 백그라운드 이미지를 추가해놓을 수 있도록 했습니다.

물론 싹 지우시고 tt-body-page에서만 배너가 표시되도록 하셔도 됩니다.