엠원리액트 댓글에 프로필사진 보이게 하기

728x90

수성비전자방입니다. 티스토리 스킨 중 '엠원리액트'라는 스킨이 있습니다. 지금 수성비전자방 스킨도 엠원리액트 기반입니다. 엠원리액트 스킨에는 단점이 있는데, 그것은 바로 댓글을 단 사람의 프로필사진이 보이지 않는다는 것입니다.

수성비전자방 필자가 단 댓글인데 프로필사진이 보이지 않음
제가 단 댓글인데 제 프로필사진이 보이지 않습니다. 오늘은 엠원리액트 스킨에서 댓글 프로필사진이 보이게 수정해 보겠습니다.

1. index.html에서 주석 코멘트 리스트 s를 찾습니다.(Ctrl+F를 이용하면 편하겠죠?)

html 소스 수정 결과
2. <span class="name">[##_rp_rep_name_##]</span>이 있을텐데 <span class="name">[##_rp_rep_name\_##] 사이에 아래 소스코드를 추가해 줍니다.

<img src="[##_rp_rep_logo_##]" alt="댓글 프로필 사진"/>

(alt 태그 내용은 임의로 작성하셔도 됩니다.)

3. style.css에서 주석 댓글 보기를 찾습니다.

css 소스 수정 결과
4. 아래 소스코드를 추가합니다.

.comment_in img {width: 64px; height: 64px; object-fit: contain;}

3~4번 주의사항: '댓글 보기'가 PC화면 소스코드와 모바일 화면 소스코드에 각각 있으므로 둘 다 수정해 주어야 합니다. Ctrl+F를 이용하실 때 주의하여 잘 찾으시기 바랍니다.

필자 프로필사진 업로드
5. images 폴더 안에 필자의 프로필사진을 넣습니다.

필자 프로필사진 css
6. style.css에서 주석이 변수 [##_rp_rep_class_##]인 곳과 변수 [##_guest_rep_class_##]인 곳을 찾습니다. .rp_admin의 background url만 수정해 줄 것입니다. 3~4번과 마찬가지로 PC, 모바일 각각 수정해야 하므로 총 4번의 수정을 하겠군요. .rp_admin 부분만 아래와 같이 바꾸어 줍니다.

.guest_admin { background: url(./images/본인프로필사진파일명.확장명) no-repeat; }

본인프로필사진파일명.확장명은 5번 과정에서 업로드 하신 파일의 이름과 확장명을 쓰시는 겁니다.

7. 수정한 스킨을 적용합니다.

프로필사진 나타남
이제 댓글에 프로필사진이 보입니다!

제 글을 읽어 주셔서 감사합니다. 다음에 만나요!

댓글()
누리집 또는 블로그 주소