| 티스토리 Exif 플러그인이나 다른 외부 스크립트가 아닌 사진 파일명에서 날짜 가져오기.. |
우선 사진을 업로드하기 전에 파일 이름을 일괄되게 만들어야 한다..
보통의 사진 편집툴에도 있는 기능이며 이 기능만을 하는 툴들도 있다..
포토스케이프 기준..
파일명이 YYYYMMDD- 로 시작하게 옵션을 주고 저장..
티스토리에 업로드된 사진의 HTML 코드를 보면 아래와 같다..
필요한 것은 data-filename 속성의 속성 값!
포토스케이프는 Exif 데이터의 촬영 날짜를 가져와서 파일 이름으로 붙여서 저장..
블로그에서는 스크립트를 통해서 저 속성 값만 가져와서 처리를 해주면 된다..
특정 사진에만 속성을 붙혀서 개별 적용도 가능하고..
카테고리별로 구분을 해서 적용도 가능하고..
글 작성 시점으로 구별해서 차별 적용도 가능하다..
| Demo & Code |
[Demo] 사진 촬영날짜 보여주기 feat. 포토스케이프
마지막 사진만 표시하기
dd-stuff.tistory.com
// javascript
// 사용자 설정
// all - 모든 사진에 출력 || last - 마지막 사진만 출력
const sopt = "last"
// 날짜 접두어 || 필요 없으면 따옴표 안의 내용을 삭제
const shl = "Shooting date - ";
// cap - 사진속 캡션으로 삽입 || p - 사진 아래에 <p>태그로 출력
const which = "p";
function _0x30b3(){const _0x861957=['346819MFadFq','.imageblock','549jkJIze','add','img','5894SyItGn','.imageblock.setdate','350AqDXGv','9948apsfgu','querySelector','data-filename','cap','41224WYSogE','</p>','136239bYcsFD','1786452lySKOj','</figcaption>','substr','body','tt-body-page','querySelectorAll','setdate','insertAdjacentHTML','765JiZXMa','afterend','231DtpFPq','26CiDxeG','classList','<figcaption>','getAttribute','30034AtjWAq','<p\x20style=\x27margin-top:-16px\x20!important;\x20text-align:center\x27>','forEach','1516zwpFLs','beforeend'];_0x30b3=function(){return _0x861957;};return _0x30b3();}const _0x3674f1=_0x4404;(function(_0x239fc4,_0x468494){const _0x2af0a5=_0x4404,_0x1db960=_0x239fc4();while(!![]){try{const _0x501a16=-parseInt(_0x2af0a5(0x16a))/0x1+-parseInt(_0x2af0a5(0x157))/0x2*(-parseInt(_0x2af0a5(0x152))/0x3)+parseInt(_0x2af0a5(0x15a))/0x4*(parseInt(_0x2af0a5(0x150))/0x5)+parseInt(_0x2af0a5(0x164))/0x6*(-parseInt(_0x2af0a5(0x161))/0x7)+-parseInt(_0x2af0a5(0x168))/0x8*(parseInt(_0x2af0a5(0x15e))/0x9)+-parseInt(_0x2af0a5(0x163))/0xa*(-parseInt(_0x2af0a5(0x15c))/0xb)+-parseInt(_0x2af0a5(0x16b))/0xc*(-parseInt(_0x2af0a5(0x153))/0xd);if(_0x501a16===_0x468494)break;else _0x1db960['push'](_0x1db960['shift']());}catch(_0x363a99){_0x1db960['push'](_0x1db960['shift']());}}}(_0x30b3,0xbbbb1));if(sopt=='last'){let figs=document[_0x3674f1(0x170)](_0x3674f1(0x15d))['length']-0x1;document['querySelectorAll'](_0x3674f1(0x15d))[_0x3674f1(0x159)](function(_0x19301f,_0x4f5c28){const _0x29d05f=_0x3674f1;_0x4f5c28==figs&&_0x19301f[_0x29d05f(0x154)][_0x29d05f(0x15f)](_0x29d05f(0x14e));});}function _0x4404(_0x559c26,_0x3b2082){const _0x30b386=_0x30b3();return _0x4404=function(_0x440492,_0x30c8dd){_0x440492=_0x440492-0x14e;let _0x2fb39b=_0x30b386[_0x440492];return _0x2fb39b;},_0x4404(_0x559c26,_0x3b2082);}let page,setdate,date;if(document[_0x3674f1(0x165)](_0x3674f1(0x16e))['id']==_0x3674f1(0x16f)&&document[_0x3674f1(0x165)]('.imageblock.setdate')){setdate=document['querySelector'](_0x3674f1(0x162)),date=setdate[_0x3674f1(0x165)](_0x3674f1(0x160))[_0x3674f1(0x156)](_0x3674f1(0x166)),date=date[_0x3674f1(0x16d)](0x0,0x8),date=date[_0x3674f1(0x16d)](0x0,0x4)+'.\x20'+date[_0x3674f1(0x16d)](0x4,0x2)+'.\x20'+date[_0x3674f1(0x16d)](0x6,0x2)+'.',date=shl+date;if(which=='p')document[_0x3674f1(0x165)](_0x3674f1(0x162))[_0x3674f1(0x14f)]('afterend',_0x3674f1(0x158)+date+_0x3674f1(0x169));else which==_0x3674f1(0x167)&&document[_0x3674f1(0x165)](_0x3674f1(0x162))[_0x3674f1(0x14f)](_0x3674f1(0x15b),_0x3674f1(0x155)+date+'</figcaption>');}else(page=document[_0x3674f1(0x165)](_0x3674f1(0x16e))['id']==_0x3674f1(0x16f)&&document[_0x3674f1(0x165)](_0x3674f1(0x15d))&&!document[_0x3674f1(0x165)](_0x3674f1(0x162)))&&document['querySelectorAll'](_0x3674f1(0x15d))[_0x3674f1(0x159)](function(_0x1e353c){const _0x595f78=_0x3674f1;date=_0x1e353c[_0x595f78(0x165)](_0x595f78(0x160))['getAttribute'](_0x595f78(0x166)),date=date[_0x595f78(0x16d)](0x0,0x8),date=date[_0x595f78(0x16d)](0x0,0x4)+'.\x20'+date[_0x595f78(0x16d)](0x4,0x2)+'.\x20'+date[_0x595f78(0x16d)](0x6,0x2)+'.',date=shl+date;if(which=='p')_0x1e353c[_0x595f78(0x14f)](_0x595f78(0x151),_0x595f78(0x158)+date+'</p>');else which==_0x595f78(0x167)&&_0x1e353c['insertAdjacentHTML'](_0x595f78(0x15b),_0x595f78(0x155)+date+_0x595f78(0x16c));});
<!-- 설치법 -->
'티스토리 관리자 페이지 - 스킨 편집 - html편집 - 파일업로드'로 이동.
setdate_feat.photoscape.js 파일 업로드.
'티스토리 관리자 페이지 - 스킨 편집 - html편집 - HTML'로 이동.
</body> (닫는) 태그 윗쪽 언저리에 아래의 구문을 추가 후 저장.
<script src="./images/setdate_feat.photoscape.js"></script>
setdate_feat.photoscape.js
3.6 kB
