티스토리 이미지 삽입 세로 길이 맞추기 꿀팁

사진을 여러장 올릴 때는 세로 길이가 같아야 보기좋음. 그런데 기본 설정은 가로 길이가 같은 거임.

예전엔 이미지들의 세로 길이가 같게 만들었을 때의 각 이미지의 가로 길이를 계산 해주는 코드를 짜서 값을 구한다음에 일일히 이미지 너비를 지정해주는 방법을 썼음. 근데 불편하고 귀찮음.

그래서 자동으로 정렬해주는 방법을 찾을려고 노력함.

일단 티스토리는 <table> 태그를 이용해 한줄짜리 표를 만들어서 여러 이미지를 한 줄에 보여줌. 흠.. 고전적인 방법이군!

암튼 위의 정보를 참고해서 일단 순수 CSS로 이미지 정렬을 시도해봤는데 잘 안 됨.

그으래서 걍 속편하게 자바스크립트로 구현함. 로딩이 좀 느려지겠지만 알게뭐야 요새 컴 발전하는 속도가 빨라서 괜찮을 듯.

이젠 컴퓨터가 알아서 사진 가로 길이를 조절해줌. 크으 자동화시스템에 취한다!

JS

function imgAdjust() {
    $(".article table .imageblock:only-child").parent("td").parent("tr").parent("tbody").parent("table").addClass("imageblock");
    $("table.imageblock").attr({"cellspacing":0});
    $("table.imageblock img").attr("width",null);

    var obj, flex, i, j;                         //.img로 묶인 이미지를 높이에 맞게 정렬
    $("table.imageblock tr").css({"display":"flex"}).each(function(){
        obj = new Array();
        i = $("table.imageblock tr").index(this);
        $(this).children().each(function(){
            obj.push([$(this).children("span").children("img").width(),$(this).children("span").children("img").height()]);
            // console.log(i+"번 값 저장: " + obj[i][0] + ", " + obj[i][1]);
        });
        $(this).children().each(function(){
            j = $("table.imageblock tr:nth(" + i + ") > td").index(this);
            flex = 100 * obj[j][0] * obj[0][1] / obj[j][1];
            // console.log(i+"번 .img의 "+j+"번째 img 정렬: " + flex);
            $(this).css( {"flex" : flex + "%"} );
        });
    });
}

$(window).load(function() {
    imgAdjust();
});

CSS

.article table.imageblock { border-spacing: 0; width:100%;/* for IE */ }	/* 2, 3장의 사진을 넣었을 때 */
.article table.imageblock td { padding: 0 .5em; display: block; }
.article table.imageblock td:first-child { padding-left: 0; }
.article table.imageblock td:last-child { padding-right: 0; }
.article table.imageblock td > .imageblock {width: inherit!important;}

작동 확인 ^^

넘나 멋진 것! 끝.