프라치노 스킨에서 이미지, 동영상 댓글 사용하는 법

최근 스킨을 입맛에 맞게 수정하고 있는데, 여러가지 기능 중에서 네이버 블로그처럼 댓글에 이미지를 삽입하는 기능을 꼭 사용하고 싶었어요. 그래서 구글링을 해보니 이 내용에 대해 자세하게 설명해주시는 marshall(원문보기)님이 계셨는데, 정말 친절하게 설명을 해주셨음에도 불구하고 기본 베이스 스킨이 저와 다르기 때문에 적용하기가 상당히 어렵더라구요.

어떻게든 해결해보고 싶어서 제가 사용하는 스킨의 제작자인 프라치노님께도 카톡을 보내서 적용 방법을 여쭈어봤지만 기본적인 기능 외에는 답변이 어렵다는 말을 듣고 그대로 포기하려고 하던 찰나..! marshall님께서 직접 방법을 알려주셔서 성공적으로 적용할 수 있었고 이제 마로니에 공간 티스토리에서도 댓글에 이미지와 동영상을 사용할 수 있게 되었습니다!

프라치노 스킨 이미지&동영상 댓글 사용법

const autoWrap = (containerId, selector) => {
  const wrapping = async () => {
    const link = /(\b(https?|ftp|file):\/\/[-A-Z0-9|ㄱ-ㅎ|ㅏ-ㅣ|가-힣|+&@#\/%?=~_|!:,.;]*[-A-Z0-9|ㄱ-ㅎ|ㅏ-ㅣ|가-힣|+&@#\/%=~_|])/gi; // 링크 찾기
    const mail = /((\S+.)@[a-z]+.[a-z]+)/gi;
    const imageType = /\.(?:jpe?g(:(large|orig))?|gif|png(:(large|orig))?|svg)$/i; // 이미지
    const TistoryImage = /(?:\?original)$/i; // 티스토리 ?original 이미지
    const videoType = /\.(?:mp4|webm)$/i; // 비디오
    const audioType = /\.(?:mp3|ogg|wav)$/i; // 오디오
    const youtubeLink = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?/g; // 유튜브 비디오
    const createAnchor = (string, type = "link") => {
      const anchor = document.createElement("a");

      anchor.href = type === "link" ? string : `mailto:${string}`;
      type === "link" &&
        ((anchor.target = "_blank"),
        anchor.setAttribute("rel", "noopener, noreferrer"));
      anchor.innerText = string;

      return anchor;
    };

    document.querySelectorAll(selector).forEach((comment) => {
      !comment.classList.contains("modded") &&
        comment.hasChildNodes &&
        [...comment.childNodes].forEach((text) => {
          if (text.nodeType === 3) {
            let textArray = text.textContent.split(link);
            if (textArray.length === 1)
              textArray = text.textContent.split(mail);
            if (textArray.length === 1) return;
            const fragment = document.createDocumentFragment();

            for (
              let i = 0, length = textArray.length, j = 1;
              i < length;
              i++
            ) {
              if (j % 3 !== 0) {
                const string = textArray[i];
                if (j % 2 === 0) {
                  if (string.includes("http:")) {
                    const anchor = createAnchor(string);

                    fragment.append(anchor);
                  } else {
                    if (
                      imageType.test(string) ||
                      TistoryImage.test(string)
                    ) {
                      const img = document.createElement(
                        "img"
                      );

                      img.src = string;
                      img.alt = "userContent";

                      fragment.append(img);
                    } else if (videoType.test(string)) {
                      const video = document.createElement(
                        "video"
                      );

                      video.src = string;
                      video.autoplay = 1;
                      video.muted = 1;
                      video.loop = 1;
                      video.setAttribute(
                        "playsinline",
                        1
                      );

                      fragment.append(video);
                    } else if (audioType.test(string)) {
                      const audio = document.createElement(
                        "audio"
                      );

                      audio.src = string;
                      audio.controls = 1;

                      fragment.append(audio);
                    } else if (youtubeLink.test(string)) {
                      const wrapper = document.createElement(
                        "div"
                      );
                      const div = document.createElement(
                        "div"
                      );
                      const iframe = document.createElement(
                        "iframe"
                      );

                      wrapper.className =
                        "youtubevid-wrapper";
                      div.className = "resvid";

                      iframe.src = `https://www.youtube.com/embed/${string.replace(
                        youtubeLink,
                        ""
                      )}?rel=0&playsinline=1`;
                      iframe.allowFullscreen = 1;
                      iframe.frameBorder = 0;

                      div.append(iframe);
                      wrapper.append(div);
                      fragment.append(wrapper);
                    } else if (mail.test(string)) {
                      const anchor = createAnchor(
                        string,
                        "mail"
                      );

                      fragment.append(anchor);
                    } else {
                      const anchor = createAnchor(string);

                      fragment.append(anchor);
                    }
                  }
                } else {
                  const textNode = document.createTextNode(
                    string
                  );

                  fragment.append(textNode);
                }

                j += 1;
              } else {
                j = 1;
              }
            }

            text.parentNode.insertBefore(fragment, text);
            text.remove();
          }

          comment.classList.add("modded");
        });
    });
  };

  document.addEventListener(
    "DOMContentLoaded",
    wrapping().then(() => {
      // 수정, 삭제, 이전 댓글 불러오기 등 변화 감지
      const container = document.getElementById(containerId);
      const observer = new MutationObserver(wrapping);

      container &&
        observer.observe(container, {
          attributes: true,
          childList: true,
          subtree: true,
        });
    })
  );
};

aaa.js

0.01MB

먼저 첨부된 스크립트 파일을 다운받으신 후 스킨편집-파일업로드에 추가해주세요.

스킨편집-HTML영역으로 들어가셔서 <s_rp_container>를 검색하신 후 그 바로 아래에 <div id="comment-list">라는 코드를 넣어주세요. 그리고 아래로 더 내려와서 </s_rp_container>바로 위에 </div>를 입력해서 감싸주세요.

<script src='./images/aaa.js'></script>
<script>autoWrap("comment-list", ".icon.comment-desc");</script>

그리고 </body>를 검색하시고 </body>바로 위에다가 아까 넣었던 aaa.js파일 주소와 코드 호출을 위해 auroWrap코드를 넣어주시면 됩니다. 프라치노 스킨을 사용하시는 분들이라면 위의 코드를 그대로 사용하시면 끝입니다!

댓글에 사진이나 동영상을 그대로 업로드할 수 없기 때문에 주소를 복사해서 사용해야 합니다. 인터넷에 떠도는 사진의 경우에는 그냥 이미지 주소를 복사하시면 되고, 업로드가 개인이 캡쳐해서 업로드를 해야하는 경우라면 imgur uproad와 같은 곳에 이미지를 업로드 한 후 주소를 복사하셔서 댓글에 그대로 입력하시면 됩니다!(단점은 PC에서 사진으로 보여지지만 모바일에서 그대로 주소로 보인다는것..)

상당히 쓸데없는 기능일지 모르겠으나.. 간혹 제 블로그에 있는 내용을 따라하시면서 잘 이해를 못하시는 분들이 계셨는데, 그럴때마다 글로 설명드리기가 상당히 어려워서 사진 댓글 기능이 있으면 어떨까..?라는 생각을 정말 많이 했답니다. 티스토리에서 공식적으로 지원하는 기능이 아니기에 완벽하지는 않지만 그래도 이정도라면 한동안 유용하게 사용할 수 있지 않을까 싶네요.😍