배너출력 위젯(Vanner) 모바일화면 썸네일 가로전체로 resize 하는 방법 문의
CMS/프레임워크 | Rhymix 2.1 |
---|---|
개발 언어 | PHP 7.2 |
문제 페이지 주소 | 비공개 (작성 후 5일 경과) |
1. 모바일 사이트 화면에서 배너출력 위젯(Vanner)을 이용해,
가로 전체(100%)로 맞춰 채워지게 하려고 하는데 작은 사이즈로만 출력이 됩니다.
(위젯 크기편집에서 W:100%로 해봐도 안되구요.)
개발자 도구로 css 수정(width:100%)해봐도 사이즈가 위젯사이즈를 벗어나 커지기만 하네요ㅠ
2. 스킨의 list.html 파일의 getThumbnail($widget_info->thumbnail_width, 이 부분을 수정해봐도 안되구요.(어떻게 수정해야 될지 모르겠어요)
<!--%import("css/style.css")-->
<a cond="$widget_info->link_extra_idx" href="{$document->getExtraValue($widget_info->link_extra_idx)}" target="_blank"|cond="$widget_info->link_new_window=='Y'"><img class="vannerImage" src="{$document->getThumbnail($widget_info->thumbnail_width, $widget_info->thumbnail_height, $widget_info->thumbnail_type)}" /></a>
<!--@if(!$widget_info->link_extra_idx)-->
<img class="vannerImage" src="{$document->getThumbnail($widget_info->thumbnail_width, $widget_info->thumbnail_height, $widget_info->thumbnail_type)}" />
<!--@end-->
<a cond="$widget_info->link_extra_idx" href="{$document->getExtraValue($widget_info->link_extra_idx)}" target="_blank"|cond="$widget_info->link_new_window=='Y'"><img class="vannerImage" src="{$document->getThumbnail($widget_info->thumbnail_width, $widget_info->thumbnail_height, $widget_info->thumbnail_type)}" /></a>
<!--@if(!$widget_info->link_extra_idx)-->
<img class="vannerImage" src="{$document->getThumbnail($widget_info->thumbnail_width, $widget_info->thumbnail_height, $widget_info->thumbnail_type)}" />
<!--@end-->
3. vanner.class.php 파일의 thumbnail_width가 관련이 있을 듯 한데, 미천한 실력이라 어떻게 수정해야 될지 모르겠어요.
<?php
/**
* @author wiley (wiley@nurigo.net)
**/
class vanner extends WidgetHandler {
function proc($widget_info) {
// default
if (!$widget_info->link_new_window) $widget_info->link_new_window='N';
// 대상 모듈 (mid_list는 기존 위젯의 호환을 위해서 처리하는 루틴을 유지. module_srls로 위젯에서 변경)
$oModuleModel = getModel('module');
// $oModuleModel = &getModel('module');
if(isset($widget_info->mid_list)) {
// if($widget_info->mid_list) {
$mid_list = explode(",",$widget_info->mid_list);
if(count($mid_list)) {
$module_srls = $oModuleModel->getModuleSrlByMid($mid_list);
if(count($module_srls)) $widget_info->module_srls = implode(',',$module_srls);
else $widget_info->module_srls = null;
}
}
// 정렬 대상
$order_target = $widget_info->order_target;
if(!in_array($order_target, array('list_order','update_order'))) $order_target = 'list_order';
// 정렬 순서
$order_type = $widget_info->order_type;
if(!in_array($order_type, array('asc','desc'))) $order_type = 'asc';
// 목록 수
$list_count = (int)$widget_info->list_count;
if(!$list_count) $list_count = 10;
// 대상 모듈이 선택되어 있지 않으면 해당 사이트의 전체 모듈을 대상으로 함
$site_module_info = Context::get('site_module_info');
$obj = new stdClass();
if($widget_info->module_srls) $obj->module_srl = $widget_info->module_srls;
else if($site_module_info) $obj->site_srl = (int)$site_module_info->site_srl;
// 게시물 가져오기
$obj->sort_index = 'documents.'.$order_target;
$obj->order_type = $order_type=="desc"?"asc":"desc";
$obj->list_count = $list_count;
$output = executeQueryArray('widgets.vanner.getDocuments', $obj);
// document 모듈의 model 객체를 받아서 결과를 객체화 시킴
$oDocumentModel = getModel('document');
// $oDocumentModel = &getModel('document');
// 오류가 생기면 그냥 무시
if(!$output->toBool()) return;
// 결과가 있으면 각 문서 객체화를 시킴
if(count($output->data)) {
$keys = array_keys($output->data);
$ridx = mt_rand(0, count($keys)-1);
$key = $keys[$ridx];
$attribute = $output->data[$key];
$oDocument = null;
$oDocument = new documentItem();
$oDocument->setAttribute($attribute, false);
} else {
$oDocument = new documentItem();
}
Context::set('document', $oDocument);
isset($widget_info->thumbnail_width) && $widget_info->thumbnail_width = $widget_info->thumbnail_width;
// $widget_info->thumbnail_width = $widget_info->thumbnail_width;
$widget_info->thumbnail_height = $widget_info->thumbnail_height;
$widget_info->thumbnail_type = $widget_info->thumbnail_type;
Context::set('widget_info', $widget_info);
// 템플릿의 스킨 경로를 지정 (skin, colorset에 따른 값을 설정)
$tpl_path = sprintf('%sskins/%s', $this->widget_path, $widget_info->skin);
Context::set('colorset', $widget_info->colorset);
// 템플릿 파일을 지정
$tpl_file = 'list';
// 템플릿 컴파일
$oTemplate = TemplateHandler::getInstance();
// $oTemplate = &TemplateHandler::getInstance();
$output = $oTemplate->compile($tpl_path, $tpl_file);
return $output;
}
}
?>
/**
* @author wiley (wiley@nurigo.net)
**/
class vanner extends WidgetHandler {
function proc($widget_info) {
// default
if (!$widget_info->link_new_window) $widget_info->link_new_window='N';
// 대상 모듈 (mid_list는 기존 위젯의 호환을 위해서 처리하는 루틴을 유지. module_srls로 위젯에서 변경)
$oModuleModel = getModel('module');
// $oModuleModel = &getModel('module');
if(isset($widget_info->mid_list)) {
// if($widget_info->mid_list) {
$mid_list = explode(",",$widget_info->mid_list);
if(count($mid_list)) {
$module_srls = $oModuleModel->getModuleSrlByMid($mid_list);
if(count($module_srls)) $widget_info->module_srls = implode(',',$module_srls);
else $widget_info->module_srls = null;
}
}
// 정렬 대상
$order_target = $widget_info->order_target;
if(!in_array($order_target, array('list_order','update_order'))) $order_target = 'list_order';
// 정렬 순서
$order_type = $widget_info->order_type;
if(!in_array($order_type, array('asc','desc'))) $order_type = 'asc';
// 목록 수
$list_count = (int)$widget_info->list_count;
if(!$list_count) $list_count = 10;
// 대상 모듈이 선택되어 있지 않으면 해당 사이트의 전체 모듈을 대상으로 함
$site_module_info = Context::get('site_module_info');
$obj = new stdClass();
if($widget_info->module_srls) $obj->module_srl = $widget_info->module_srls;
else if($site_module_info) $obj->site_srl = (int)$site_module_info->site_srl;
// 게시물 가져오기
$obj->sort_index = 'documents.'.$order_target;
$obj->order_type = $order_type=="desc"?"asc":"desc";
$obj->list_count = $list_count;
$output = executeQueryArray('widgets.vanner.getDocuments', $obj);
// document 모듈의 model 객체를 받아서 결과를 객체화 시킴
$oDocumentModel = getModel('document');
// $oDocumentModel = &getModel('document');
// 오류가 생기면 그냥 무시
if(!$output->toBool()) return;
// 결과가 있으면 각 문서 객체화를 시킴
if(count($output->data)) {
$keys = array_keys($output->data);
$ridx = mt_rand(0, count($keys)-1);
$key = $keys[$ridx];
$attribute = $output->data[$key];
$oDocument = null;
$oDocument = new documentItem();
$oDocument->setAttribute($attribute, false);
} else {
$oDocument = new documentItem();
}
Context::set('document', $oDocument);
isset($widget_info->thumbnail_width) && $widget_info->thumbnail_width = $widget_info->thumbnail_width;
// $widget_info->thumbnail_width = $widget_info->thumbnail_width;
$widget_info->thumbnail_height = $widget_info->thumbnail_height;
$widget_info->thumbnail_type = $widget_info->thumbnail_type;
Context::set('widget_info', $widget_info);
// 템플릿의 스킨 경로를 지정 (skin, colorset에 따른 값을 설정)
$tpl_path = sprintf('%sskins/%s', $this->widget_path, $widget_info->skin);
Context::set('colorset', $widget_info->colorset);
// 템플릿 파일을 지정
$tpl_file = 'list';
// 템플릿 컴파일
$oTemplate = TemplateHandler::getInstance();
// $oTemplate = &TemplateHandler::getInstance();
$output = $oTemplate->compile($tpl_path, $tpl_file);
return $output;
}
}
?>
4. 관심과 도움 부탁드립니다.
그리고, 회원님들 모두 즐거운 설명절 되시길 바랍니다.

hatali
Lv. 4
댓글 15
이미지를 감싸고 있는 태그도 함께 조정해보세요.(사이트는 안 열리네요)
아 죄송합니다. 지금 봤어요. 사이트 열리게 했어요.(최근 mariadb가 자주 죽네요ㅠ)
위젯 설정에서 가로사이즈를 확인해보셔야 할 것 같네요.
그리고 모바일 기종에 따라 사이즈들이 모두 달라서 제대로 보이게 하려면 이미지를 감싸고 있는 태그(또는 위젯)의 세로 사이즈를 고정시키면 안될 것 같습니다.
img tag 상위 a tag에는 width가 먹히질 않습니다.
제가 말씀드린 가로 크기는 위젯에서의 사이즈가 아니라 css상에서의 사이즈입니다.
위젯에선 배너크기로 썸네일 생성을 해준 후 css에서 사이즈에 맞게 조정을 해야 됩니다.
alfredo 님 너무 감사드립니다.
도움주신 덕분에 거의 성공한 듯 합니다.
조언주신데로
위젯 설정에서 이미지의 가로/세로 사이즈 640/300 을 주고,
css에서 img.vannerImage width:100% height:150px 추가하니 이미지 높이300이 150px로 되는데(원하던 크기로),
위젯 크기 수정 화면에서 H:150px로 주면,
이미지가 Rendered size:375×176 px로 되면서 세로 150에 맞춰지지 않는데 맞출 수 없을까요?
배너 세로 사이즈를 여러개 쓰고 싶어서 위젯 크기 수정화면에서 조정하고 싶은데 방법이 있을런지요?
안된다면 위젯복사해서 배너 사이즈별로 css height 따로 줘야되나 싶기도 하구요.
아님 이미지를 만들때 세로 사이즈를 감안해서 좀 적게 줘야 되나 싶기도 하구요.
도움감사드리고 즐거운 명절 보내시길 바랍니다.
Rendered size는 모바일 화면 가로 사이즈에 맞도록 이미지를 100%로 하기 때문에 그 비율에 맞춰서 이미지를 보여주어서 그렇습니다.(그러니까 보시는 모바일의 가로가 375라는 얘기가 되는거네요) 세로를 150px로 고정하게 되면 모바일 가로폭이 작은 기기라면 이미지의 가로가 잘려서 보이고 큰 기기라면 가로 여백이 발생하게 됩니다.
세로를 고정할 지 안할 지 다각적으로 고민해봐야겠습니당.
배너 가로에 여백을 많이 줘서 작은 기기에서도 전달할 내용이 보이도록 해놓긴 했습니다.
갤럭시폴드 사이즈(280)로 보니 내용이 약간 잘리네요. 뭐 만든 사람 마음이긴 하지만...
배너를 작은 사이즈에서도 전달할 내용이 모두 보이도록 양쪽에 여백을 줘도 괜찮다면 고정으로 사용해도 무방하긴 합니다.
네이트와 같이 고정으로 할 경우 원본 640/300 작업, 위젯 설정 640/300으로 썸네일 생성, 불러들인 후 이미지를 감싸고 있는 a태그에는 높이 150, 가로100%, 이미지에는 가로100%는 빼고 높이값만 150 넣은 후 이미지를 가운데로 정렬하도록 값을 주면 될 것 같습니다.
대신 그런 경우 일정한 여백을 둬서 배너작업을 새로해야 합니다.
전 css a는 레이아웃 쪽이라 적용이 되질 않는데,(왜그런지 찬찬히 봐봐야겠어요)
그냥 css img에만 높이 150, 가로100% 주니 괜찮은 것 같습니다.
지금은 위젯에서 지정을 해주지 않으니 레이아웃의 값이 적용이 되는 겁니다.
css img에 높이 150, 가로 100%로 하는 경우 크게 티는 나지 않아도 기기에 따라 이미지가 변형이 되어 나타나게 됩니다. 가로가 길면 가로폭만 늘어나고 가로가 좁으면 가로폭만 줄어들어 찌그러진 형태가 되는거죠.
a 태그에 class 추가한 후 css 값줘도 왜그런지 먹지를 않습니다.
개발자도구에 비활성화 되게 나오고 수정도 안됩니다.
아예 위젯 css를 불러오지 못하고 레이아웃 css를 가져옵니다.
조언주신 찌그러지는 현상 감안하면서 계속 문제 찾아가봐야 될 듯 합니다. ( _ _ )
말씀하신 갤럭시폴드 사이즈(280)에서 가로 조금 잘리는데요. 음...
네이버,다음은 세로를 고정하지 않아서 잘리지 않는데 더 나은 듯 합니다.(세로 사이즈가 다소 제각각이지만)
이 점 고려하여 고민해봐야겠습니다.
자세한 원리와 로직을 가르쳐주셔서 많이 해결되었습니다. 지끈했던 머리가 개운해 지네요^^ 감사드립니다.