티스토리, 대표 이미지를 상단 글제목 배경이미지로 사용

티스토리, 대표 이미지를 상단 글제목 배경이미지로 사용


 

 그 동안 블로그를 수정하며 사용하던 글 제목의 배경이미지를 티스토리 대표 이미지로 구현하는 것에 고민을 하고 있었습니다.

 

 이렇게 저렇게 알아보던 중..., 

 

 항상 도움을 받던 마샬님의 블로그"티스토리의 대표 이미지를 배너에 불러오기"라 좋은 스크립트를 공유해 주셨네요 ^^



그 동안 블로그 상단의 글 제목에 배경으로 실행되던 동영상이 포스팅 글이 노출될 때, 대표이미지를 배경이미지로 출력 되도록 수정되었고 대표이미지가 없는 경우 블로그 기본 이미지가 노출됩니다.

 

 마샬님 블로그 참고 - https://marshall-ku.tistory.com/141

 

 저의 경우는 


 <script>

$(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)")

}

  }

});

</script>

 

 이것만 사용하여 포스팅 글을 볼 경우만 대표이미지를 불러오도록 하였습니다.

 자세한 것은 마샬님의 블로그에 문의하시면 빠르고 시원한 답을 얻으실 수 있습니다.


마샬님, 항상 도움을 주셔서 감사합니다 ^;

묘한오빠

남자의 호칭 중에 "오빠"처럼 묘한 것도 없었다

이미지 맵

도움/나눔을 실천한다 다른 글

이 글에 담긴 의견 16

*

*

    • 추석 명절 잘 지내셨나요^^ 연휴동안 블록질을 쉬다 오늘 처음 답방중인데 새글이 딱!+_+
      이거 저도 궁금했던건데 이런 고난도(!) 스크립트같은게 필요했군요.
      유용한 정보 감사합니다!!

    • 추석은 건강하게 보내셨죠? ㅎㅎ
      저야 그냥 복사해서 쓰는 입장이라... ㅋㅋ

    • 이렇게 하나에만 쓰실 거면 var c 를 지우시고 c.is에 $("body").is를 쓰시는 게 아주 조금이나마 더 낫긴 합니다 ㅋㅋㅋㅋ

    • ^^; 똥손에게 너무 많은 걸 바라시는 것 아니신가요? ㅋㅋ
      알려주실려면 소스를 같이 알려주셔야죠 ㅎ
      일단, 나오니까 쓰고 있는 중이라..., ㅋㅋㅋ

    • 참, body에 적용할때, 풀커버로도 가능한가 싶어..?
      혹시, 상단의 타이틀 제목 부분이 풀커버 방식도 고민중이라..., 아니면 할수 없고요 ㅋㅋㅋ

    • 뭐 그렇게 크게 중요한 수정 사항은 아닙니다 ㅋㅋㅋ
      c = $("body);
      지우시고 b = $() 뒤의 ,를 ;로 수정하고
      c.is 를 $("body").is를 수정하면 됩니다.

      전체 화면이야 뭐 css로 높이만 수정하면 되는 것 아닌가요??
      제 인덱스 페이지에 적용한 마우스 아이콘이랑 스크롤 따라서 천천히 배경도 움직이는 스크립트도 함께 적용하면 좋을 것 같긴 하네요 ㅎㅎ

    • 역시 b:
      금손입니다 ㅎㅎㅎ
      왠지 빨릿해진 느낌이랄까? 잘 나오니 선물 받은 것처럼 기분이 좋네요 .
      감사합니다 LOV

    • 별것도 아닌데요 뭐 ㅎㅎ;
      전체화면 배너 쓰실 일 있으면 위에 언급한 두 가지 소스들도 함께 드리겠습니다!

      https://i.imgur.com/cS1aC7G.gif

    • 나중에 시간될 때, 포스팅 해주시지 말입니다. ^^
      포스팅 글쓰기 입력시 간단하게 태그로 할수 있으면 좋겠지 말입니다. ㅎㅎㅎ

      전에 알려주신 대/댓글 버턴 정말 편하고 좋네요 ㅎ

이전 글

다음 글

티스토리 툴바