이미지가 없는 글에 대체 이미지 보여주기

이미지가 필요 없는 글에 매번 대체 이미지 올려주는 것도 일이었지만 계속 이미지를 등록했었습니다. 요즘은 바빠서 안하고 있다가 간만에 주말에 PC 앞에 앉아서 게임도 하고 놀다 보니 블로그에 손을 대게 되네요.

 

아래 코드는 tocbot이랑 같이 합체된 코드로 아래 주석 처리된 부분을 복사한 후 맞게 수정하시면 됩니다.

<script>  
    var content = document.querySelector('#article');
    if (content) {
        var headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6, h7');  
        var headingMap = {};   
        Array.prototype.forEach.call(headings, function (heading) {      
            var id = heading.id ? heading.id : heading.textContent.trim().toLowerCase().split(' ').join('-').replace(/[\!\@\#\$\%\^\&\*\(\):]/ig, '');
            headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0;
            if (headingMap[id]) {        
                heading.id = id + '-' + headingMap[id];      
            } else {        
                heading.id = id;      
                }    
            });   
        tocbot.init({    tocSelector: '.toc',    contentSelector: '#article',    headingSelector:'h1, h2, h3',    hasInnerContainers: false , 
    //     scrollEndCallback: function (e) {
    //         var tocDiv = document.getElementsByClassName('toc');
    //         var scrollPos = window.scrollY || window.scrollTop || document.getElementById("article").scrollTop;
    //         var offsetTop = tocDiv[0].offset().top;
    //         console.log(scrollPos);
    //         console.log(offsetTop);
    //         if (scrollPos > offsetTop) {
    //         tocDiv.style.display = 'none';
    //         } else {
    //         tocDiv.style.display = 'block';
    //         }
    // }
   });   
        
        $(document).ready(function(){            
            $('.toc').addClass('toc-absolute');            
            var toc_top = $('.toc').offset().top - 96;            
            $(window).scroll(function() {                
                if ($(this).scrollTop() >= toc_top) {                    
                    $('.toc').addClass('toc-fixed');                    
                    $('.toc').removeClass('toc-absolute');                
                } else {                    
                    $('.toc').addClass('toc-absolute');                    
                    $('.toc').removeClass('toc-fixed');                
                }            
            });      
        });
    }
    else {
    	// 여기서부터 복사하면 됩니다.
        /// 리스트 화면에서 썸네일 없는 글만 대체 이미지로 교체
        var target = document.getElementsByClassName('index-width-support')[0];
        if (target){
            var observerOptions = {
                childList: true, // 자식 요소 변경 감지
                characterData: false, // 텍스트 노드 변경 감지
                subtree: false // 모든 자식 요소에 대해 변경 감지
            };

            var callback = function (mutationsList) {
                var inputs = document.getElementsByClassName('index-item-thumbnail');
                for (var i = 0; i < inputs.length; i++) {
                    if (!inputs[i].hasAttribute('style')) {
                    	// background-image:url( 다음 이미지 경로를 변경하시면 됩니다.
                        inputs[i].setAttribute('style', 'background-image:url(./images/default_image_01.png);background-position:50% 50%;background-size:cover'); // attribute가 없는 경우 다른 값으로 채워줍니다.
                    }
                }
            };

            // MutationObserver 객체를 생성하고 대상 요소와 콜백 함수를 등록합니다.
            var observer = new MutationObserver(callback);
            observer.observe(target, observerOptions);
        }
        
        /// 사이드 바 또는 글 더보기 등에서 사용
        window.onload = function () {

           var inputs = document.querySelectorAll('.post-module-visual-image, .related-item .index-item-thumbnail');
            for (var i = 0; i < inputs.length; i++) {
                if (!inputs[i].hasAttribute('style')) {
                    inputs[i].setAttribute('style', 'background-image:url(./images/default_image_01.png);background-position:50% 50%;background-size:cover'); // attribute가 없는 경우 다른 값으로 채워줍니다.
                }
            }
       
        };
        /// 여기 까지요
    }
    
</script>

처음에는 페이지 load 후 한번만 실행하게 만들었더니 더보기 형식의 경우 페이지를 다시 불러오지 않기 때문에 다음 페이지부터는 코드가 동작하지 않네요. 그래서 리스트에 해당하는 레이어의 변경을 감지하여 이벤트가 발생할 때마다 체크하는 방식으로 변경했습니다.

원래 스크립트를 고치면 더 좋겠지만 소스 최소화된 소스 열어서 보는 것은 별로 권장할만한 것은 아닌지라 이렇게 하는게 나은 것 같아요.

위 스크립트는 프라치노 공간 테마에서만 그대로 사용할 수 있고 다른 테마에서는 target에 해당하는 요소값을 변경해야 합니다.

 

※ ChatGPT의 많은 도움을 얻어 코드를 작성했습니다.