우선 사진을 업로드하기 전에 파일 이름을 일괄되게 만들어야 한다..

보통의 사진 편집툴에도 있는 기능이며 이 기능만을 하는 툴들도 있다..

포토스케이프 기준..

파일명이 YYYYMMDD- 로 시작하게 옵션을 주고 저장..

티스토리에 업로드된 사진의 HTML 코드를 보면 아래와 같다..

필요한 것은 data-filename 속성의 속성 값!

포토스케이프는 Exif 데이터의 촬영 날짜를 가져와서 파일 이름으로 붙여서 저장..

블로그에서는 스크립트를 통해서 저 속성 값만 가져와서 처리를 해주면 된다..

특정 사진에만 속성을 붙혀서 개별 적용도 가능하고..

카테고리별로 구분을 해서 적용도 가능하고..

글 작성 시점으로 구별해서 차별 적용도 가능하다..

특정 속성이 붙은 사진만 보여주기 예제        적용하기

$(document).ready(function(){
  var f_name = $(".imageblock img").attr("data-filename");
   /* 연월일까지만 잘라서 */
  f_name = f_name.substr(0, 8);
  /* 연월일 구분점 찍어주기 */
  f_name = f_name.substr(0, 4) + ". " + f_name.substr(4, 2) + ". " + f_name.substr(6, 2) + ".";
  /* 사진 바로 이전(윗쪽)에 출력 */
  $(".imageblock img").before("촬영날짜 - " + f_name);
});


$(document).ready(function(){
/* 다수의 사진이 있고, 첫 번째 사진에만 보여주려면 */
  var f_name = $(".imageblock img").attr("data-filename");
  f_name = f_name.substr(0, 8);
  f_name = f_name.substr(0, 4) + ". " + f_name.substr(4, 2) + ". " + f_name.substr(6, 2) + ".";
  $(".imageblock:first img").before("촬영날짜 - " + f_name);
});


/* 다수의 사진이 있고, 모든 사진에 적용하려면 */
$(document).ready(function(){
  $(".imageblock img").each(function(){
    var f_name = $(this).attr("data-filename");
    f_name = f_name.substr(0, 8);
    f_name = f_name.substr(0, 4) + ". " + f_name.substr(4, 2) + ". " + f_name.substr(6, 2) + ".";
    $(this).before("촬영날짜 - " + f_name);  
  });
});


/* 특정 사진만 선택 적용하려면, 글 작성시 업로드된 사진에 속성을 하나 주고 */
/* 여기서는 class="view_date" */
［#...age|kage@bdbhvf/.../img.jpg|alignCenter|class="view_date" data-filename="Untitled-5.jpg" data-origin-width="741" data-origin-height="447" data-ke-mobilestyle="widthContent"#］

$(document).ready(function(){
  var f_name = $(".imageblock").find("img.view_date").attr("data-filename");
  f_name = f_name.substr(0, 8);
  f_name = f_name.substr(0, 4) + ". " + f_name.substr(4, 2) + ". " + f_name.substr(6, 2) + ".";
  $(".imageblock").find("img.view_date").before("촬영날짜 - " + f_name);
});