문하우스 확장변수 형식을 "파일 업로드" 선택시 웹진형식에 이미지로 출력되게 하는 방법
QR 코드를 스마트폰의 사진기로 스캔, 프로그램을 설치하는 웹앱을 만들었는데
관련 홈페이지를 만들던중 확장변수의 형식을 파일 업로드로 했을시 파일명이 출력되고
클릭시 파일 다운이 되는 것을 확인 후
Claude 를 괴롭혀서 섬네일 부분에 확장변수의 업로드 파일을 네일 자리에 출력하는 방법을 구현했다.
[ 해당 SketchBook5 게시판스킨 ]
1. 웹진형으로 선택하고 ⌈ 게시판 설정 > 게시판 정보 > 목록 설정 >

2. 확장 변수에서 아래와 같이 작성
확장 변수 ID : qr - 다른 ID로 작성해도 설정에서 수정 가능
형식 : 파일 업로드

3. ⌈ 웹진형 / FT형 ⌋ 설정에서 아래를 선택
선택 • ✔확장변수 출력 선택,
4. skin.xml 에 옵션 추가
<var name="qr" type="text">
<title xml:lang="ko">게시판 리스트에 이미지 형식으로 출력할 확장변수 ID</title>
<title xml:lang="en">Extra Variable ID for Image Format Output in Board List</title>
<description xml:lang="ko">게시판 리스트 목록에 확장변수중 형식이 파일 업로드를 선택했다면 이미지로 썸네일 부분에 출력할 확장변수 ID(웹진형) (기본은 qr)</description>
<description xml:lang="en">For the webzine layout, display the uploaded image from the extra variable (file upload type) as the thumbnail in the board list.(Webzine)</description>
</var>

5. 글 작성

6. 웹진형 리스트에 QR 코드가 섬네일 부분에 위치 - 클릭시 원본 크기의 이미지 팝업으로 출력

7. 본문안의 확장변수도 이미지로 출력되게 - 클릭시 원본 크기의 이미지 팝업으로 출력

[ 코드 수정 ]
<!--// 썸네일 영역 -->
<div cond="$list_config['thumbnail']" class="tmb_wrp ribbon_v{$mi->ribbon_style}">
<!--// QR 확장변수가 있으면 QR 이미지를 썸네일로 사용 -->
{@
$qr_eid = trim($mi->qr ?? '');
if($qr_eid == '') $qr_eid = 'qr';
}
<block cond="$document->getExtraEidValue($qr_eid)">
{@
$qr_file_srl = $document->getExtraEidValue($qr_eid);
$qr_file = FileModel::getFile($qr_file_srl);
}
<a cond="$qr_file && $qr_file->uploaded_filename"
href="javascript:void(0);"
class="qr_extra_image"
onclick="showQrPopup('{$qr_file->uploaded_filename}', event);"
title="QR 이미지 크게 보기">
<img src="{$qr_file->uploaded_filename}"
alt="QR"
class="tmb"
style="cursor:pointer; margin-right:20px"
width="100" />
</a>
</block>
<!--// QR이 없을 때 기존 썸네일 출력 -->
<block cond="!$document->getExtraEidValue($qr_eid)">
<span cond="!$document->thumbnailExists()" class="no_img tmb">No Image</span>
<block cond="$document->thumbnailExists()">
<span cond="$mi->tmb_effect=='2'" class="no_img loading"></span>
<img class="tmb"
src="{$document->getThumbnail($mi->zine_thumb_width,$mi->zine_thumb_height,$mi->zine_thumb_type)}"
alt="" />
</block>
</block>
<!--// 리본 -->
<block cond="$mi->zine_ribbon!='N' && !$document->getExtraEidValue($qr_eid)">
<block cond="!$mi->zine_ribbon || $mi->zine_ribbon=='new_date'">
<!--@if((int)($document->getRegdate('YmdHis')>date("YmdHis", time()-$mi->duration_new*60*60)))-->
<span class="ribbon nnu new"><i>NEW</i></span>
<!--@elseif((int)(zdate($document->get('last_update'),'YmdHis')>date("YmdHis", time()-$mi->duration_new*60*60)))-->
<span class="ribbon nnu update"><i>Update</i></span>
<!--@else-->
<span cond="$mi->zine_ribbon=='new_date'" class="ribbon">
<i class="date">
<b>{$document->getRegdate("d")}</b>
<small>{$document->getRegdate("M")}</small>
</i>
</span>
<!--@end-->
</block>
<span cond="$mi->zine_ribbon && $mi->zine_ribbon!='new_date'" class="ribbon">
<i cond="$mi->zine_ribbon=='cate' && $document->get('category_srl')" class="cate">
{$category_list[$document->get('category_srl')]->title}
</i>
<i cond="$mi->zine_ribbon=='date'" class="date">
<b>{$document->getRegdate("d")}</b>
<small>{$document->getRegdate("M")}</small>
</i>
<i cond="$mi->zine_ribbon=='read'">
<b>{$document->get('readed_count')}</b>
<small>Views</small>
</i>
<i cond="$mi->zine_ribbon=='vote'">
<b>{$document->get('voted_count')}</b>
<small>Likes</small>
</i>
<i cond="$mi->zine_ribbon=='cmt'">
<b>{$document->getCommentCount()}</b>
<small>Replies</small>
</i>
<i cond="$mi->zine_ribbon=='extra'">
{$document->getExtraValueHTML($mi->extra_num)}
<!--//<small>{@$extravar_list = $document->getExtraVars()}{$extravar_list[$mi->extra_num]->name}</small>-->
</i>
</span>
</block>
</div>
<!--// 확장변수 제목상단에 출력 -->
<span cond="$val->eid!='rating' && $val->eid!='price' && $val->eid!=$qr_eid && $val->eid!==$mi->icon_url && $val->eid!==$mi->e_url && $document->getExtraValueHTML($val->idx)"
<include cond="$document->getExtraEidValue($qr_eid)" target="qr.html" />
<!--// QR 이미지 팝업 -->
<div id="qrImagePopup" class="qr-image-popup" onclick="closeQrPopup();">
<div class="qr-image-popup-inner" onclick="event.stopPropagation();">
<button type="button" class="qr-image-popup-close" onclick="closeQrPopup();">×</button>
<img id="qrPopupImage" src="" alt="QR 이미지">
</div>
</div>
<style>
.qr-image-popup {
display: none;
position: fixed;
z-index: 99999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.75);
align-items: center;
justify-content: center;
}
.qr-image-popup-inner {
position: relative;
max-width: 90vw;
max-height: 90vh;
padding: 10px;
background: #fff;
border-radius: 4px;
box-sizing: border-box;
}
.qr-image-popup-inner img {
display: block;
max-width: 80vw;
max-height: 80vh;
width: auto;
height: auto;
}
.qr-image-popup-close {
position: absolute;
right: 5px;
top: 5px;
z-index: 2;
width: 32px;
height: 32px;
border: 0;
border-radius: 50%;
background: #fff;
color: #333;
font-size: 25px;
line-height: 28px;
cursor: pointer;
}
.qr-image-popup-close:hover {
background: #eee;
}
</style>
<script>
function showQrPopup(src, e) {
if (e) {
e.preventDefault();
e.stopPropagation();
}
var popup = document.getElementById('qrImagePopup');
var image = document.getElementById('qrPopupImage');
if (!popup || !image) return false;
image.src = src;
popup.style.display = 'flex';
document.body.style.overflow = 'hidden';
return false;
}
function closeQrPopup() {
var popup = document.getElementById('qrImagePopup');
if (!popup) return;
popup.style.display = 'none';
document.getElementById('qrPopupImage').src = '';
document.body.style.overflow = '';
}
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
closeQrPopup();
}
});
</script>
{@
$etIdx=1;
$qr_eid = trim($mi->qr ?? '');
if($qr_eid == '') $qr_eid = 'qr';
}
~
수정 후 17줄
<th scope="row">{$val->name}</th>
<td cond="$val->eid!='rating' && $val->eid!==$mi->etc_name && $val->eid!=$mi->copy && $val->eid!==$mi->e_url && $val->eid!==$mi->dhidden && $val->eid!=$qr_eid" onclick="showUpdateExtraModal(this, {$oDocument->document_srl}, {$val->idx})"|cond="$oDocument->isGranted() && $use_extra_vars_update && isset($extra_keys_for_update[$val->idx]) && $val->eid === $extra_keys_for_update[$val->idx]->eid"><span style="cursor:pointer; text-decoration:underline; text-underline-position:under"|cond="$oDocument->isGranted() && $use_extra_vars_update && isset($extra_keys_for_update[$val->idx]) && $val->eid === $extra_keys_for_update[$val->idx]->eid">{$val->getValueHTML()|noescape}</span></td>
<!--// 지정 확장변수(파일업로드)를 이미지로 출력 -->
<td cond="$val->eid==$qr_eid">
{@ $qr_file = FileModel::getFile($oDocument->getExtraEidValue($qr_eid)); }
<a cond="$qr_file && $qr_file->uploaded_filename" href="javascript:void(0);" class="qr_extra_image" onclick="showQrPopup('{$qr_file->uploaded_filename}', event);" title="{$val->name} 크게 보기">
<img src="{$qr_file->uploaded_filename}" alt="{$val->name}" class="extravar_img" style="max-width:100px; height:auto; cursor:pointer;" />
</a>
<span cond="!$qr_file || !$qr_file->uploaded_filename">{$val->getValueHTML()|noescape}</span>
</td>
<!--@end-->
~
코드 제일 하단에 추가
<include cond="$oDocument->getExtraEidValue($qr_eid)" target="qr.html" />
다른 게시판 스킨들도 위의 코드들 활용해서 수정 하든지
Claude 에게 부탁하면 금방 해줄 듯
- 원작자
- 80san
- 적용여부
- 적용
- 적용시점 버전
- Rhymix 2.1.36
- 사진
- %photo1%