구글블로그스팟 포함 링크 이미지 썸네일2, createElement();

 

대표적으로 티스토리를 보면, 링크를 게시글에 걸고, enter를 누르면, 관련 이미지가 떠오른다.

구글 브로거 링크 이미지 썸네일 가능해요? (xehostel.blogspot.com)

opengraph 기능이라고,

나도 이 것을 쓸려고 했다가,

파싱을 쓰다보니, 결국 이 길로 빠져버렸다.

파싱을 쓰던, rss를 쓰던, opengraph를 쓰던, 중요하지 않다.

See the Pen 구글블로그스팟 링크 이미지 썸네일 by xelaw (@xelaw) on CodePen.

결국 이 게시글의 주제는 createElement(); 이기 때문이다.

기존의 구글 html은 건드는 것은 싫고,

그렇다고 링크 걸때 마다 일일히 html을 작성하기는 싫고,

그럴 때 쓰면 좋은 기능이다.

createElement();

즉, 엘레멘트, 허상을 만든다는 의미다.

근디, 막상 만드니, 흥미가 떨어졌다.

좀 더 꾸미면, 티스토리 따위 씹어 먹을 수 있는데,,,

기존에 마우스 호버 시 그림을 띄우는 것이 아무래도 좀 더 동적인 느낌이 강해서...

만들어 놓기는 한데, 실전에 투입은 유보 상태이다.

차라리 해당 링크가 눈에 띄면, 갑자기 이미지가 나오도록 애니를 적용하던가...

여기다,

요즘 ai 트랜드가 글자를 막 써놓고, 링크를 거는 것이 트렌드라 그 트렌드를 따르도록 한다.

이런 거 하나 하나 작성 해 놓으면, 뭐, 언젠가는 써 먹을 날이 오겠지.

혹시나 해서 말하지만,

지금은 파싱을 써서 있는 그림, 없는 그림 싹다 모았지만,

rss라든지, opengraph를 쓰면, 대표 사진이나 게시자가 의도한 글 또는 그림을 깔삼하게 보여 줄 수 있다.

결국 오늘의 주제는

 function insertThumbnail(link, data) {

                const thumbnailDiv = document.createElement('div');

                thumbnailDiv.className = 'thumbnail-container';

                

                const thumbnailTitle = document.createElement('div');

                thumbnailTitle.className = 'thumbnail-title';

                thumbnailTitle.textContent = data.title;

                

                const thumbnailImages = document.createElement('div');

                thumbnailImages.className = 'rss2-post-images';

                

                data.imageUrls.forEach(imageUrl => {

                    const imageElement = document.createElement('img');

                    imageElement.src = imageUrl;

                    imageElement.onerror = () => imageElement.remove();

                    thumbnailImages.appendChild(imageElement);

                });

                

                thumbnailDiv.appendChild(thumbnailTitle);

                thumbnailDiv.appendChild(thumbnailImages);

                

                link.insertAdjacentElement('afterend', thumbnailDiv);

                

                // Add loaded class to trigger transition

                requestAnimationFrame(() => {

                    thumbnailDiv.classList.add('loaded');

                });

            }

이거다.

이 것에 주어지는 이미지는 어디에서 끌어오든 크게 상관 없다.

마치 re100과 cfe 중 무엇이 우리나라에 적합할까??? (xehostel.blogspot.com)

re100이든 cre든 환경을 위한 에너지가 무엇이든 말이다.