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 에게 부탁하면 금방 해줄 듯
타 프로그램의 API를 이용해서 게시판 본문...
php 8.4 업데이트시 글 작성 오류 해결
Tip이 도움이 되었다면 댓글과 평가 부탁합니다.
Tip에 대한 궁금한 점은 댓글로 남겨 주시면 성심껏 답변 드립니다. 
9
1
5