1. 모바일 사이트 화면에서 배너출력 위젯(Vanner)을 이용해,

가로 전체(100%)로 맞춰 채워지게 하려고 하는데 작은 사이즈로만 출력이 됩니다. 

(위젯 크기편집에서 W:100%로 해봐도 안되구요.)

 

개발자 도구로 css 수정(width:100%)해봐도 사이즈가 위젯사이즈를 벗어나 커지기만 하네요ㅠ

 

41.png

 

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-->

 

3. vanner.class.php 파일의 thumbnail_width가 관련이 있을 듯 한데, 미천한 실력이라 어떻게 수정해야 될지 모르겠어요.

<?php
    /**
     * @author wiley ([email protected])
     **/

    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. 관심과 도움 부탁드립니다.

그리고, 회원님들 모두 즐거운 설명절 되시길 바랍니다.

  • Lv4

    이미지를 감싸고 있는 태그도 함께 조정해보세요.(사이트는 안 열리네요)

  • Lv4 Lv4

    아 죄송합니다. 지금 봤어요. 사이트 열리게 했어요.(최근 mariadb가 자주 죽네요ㅠ)

  • Lv4 Lv4
    썸네일 가로사이즈가 제대로 반영이 안되고 있는 것 같습니다.
    위젯 설정에서 가로사이즈를 확인해보셔야 할 것 같네요.
    그리고 모바일 기종에 따라 사이즈들이 모두 달라서 제대로 보이게 하려면 이미지를 감싸고 있는 태그(또는 위젯)의 세로 사이즈를 고정시키면 안될 것 같습니다.
  • Lv4 Lv4
    말씀하신데로 모바일이라 이미지 가로 크기는 입력하지 않고(고정하지 않기위해) 이미지 세로 크기만 150px 줬었는데요.
    img tag 상위 a tag에는 width가 먹히질 않습니다.
  • Lv4 Lv4
    가로크기를 입력해줘야 썸네일이 그 사이즈로 생성이 됩니다.
    제가 말씀드린 가로 크기는 위젯에서의 사이즈가 아니라 css상에서의 사이즈입니다.
    위젯에선 배너크기로 썸네일 생성을 해준 후 css에서 사이즈에 맞게 조정을 해야 됩니다.
  • Lv4 Lv4

    alfredo 님 너무 감사드립니다.
    도움주신 덕분에 거의 성공한 듯 합니다.

    조언주신데로
    위젯 설정에서 이미지의 가로/세로 사이즈 640/300 을 주고,
    css에서 img.vannerImage width:100% height:150px 추가하니 이미지 높이300이 150px로 되는데(원하던 크기로),

    위젯 크기 수정 화면에서 H:150px로 주면,
    이미지가 Rendered size:375×176 px로 되면서 세로 150에 맞춰지지 않는데 맞출 수 없을까요?
    배너 세로 사이즈를 여러개 쓰고 싶어서 위젯 크기 수정화면에서 조정하고 싶은데 방법이 있을런지요?

    안된다면 위젯복사해서 배너 사이즈별로 css height 따로 줘야되나 싶기도 하구요.

    아님 이미지를 만들때 세로 사이즈를 감안해서 좀 적게 줘야 되나 싶기도 하구요.


    도움감사드리고 즐거운 명절 보내시길 바랍니다.

  • Lv4 Lv4

    Rendered size는 모바일 화면 가로 사이즈에 맞도록 이미지를 100%로 하기 때문에 그 비율에 맞춰서 이미지를 보여주어서 그렇습니다.(그러니까 보시는 모바일의 가로가 375라는 얘기가 되는거네요) 세로를 150px로 고정하게 되면 모바일 가로폭이 작은 기기라면 이미지의 가로가 잘려서 보이고 큰 기기라면 가로 여백이 발생하게 됩니다.

  • Lv4 Lv4
    아 그렇군요. 위젯사이즈도 고려하고 최대한 많은 기기에 맞을만한 이미지사이즈도 사용해야 될듯합니다. 감사드립니다.
  • Lv4 Lv4
    게시판의 썸네일은 고정하기도 합니다만 배너는 모두 보여야 하는 정보로 꽉 차있는 상태라 대부분 세로는 고정하지 않는걸로 알고 있습니다. 기기별로 모두 가로폭이 다르기 때문에 가로는 100%로 해놓고 세로는 이미지 비율에 따라 자동조절되도록 하고 있습니다.
  • Lv4 Lv4
    아네 그렇군요ㅎㅎ. nate 모바일화면이 맘에 들어 벤치마킹했었거든요.(세로 150 100 등으로 다양한 사이즈로 고정해서 쓰드라구요).

    세로를 고정할 지 안할 지 다각적으로 고민해봐야겠습니당.
  • Lv4 Lv4
    말씀하셔서 네이트 확인해보니 세로 고정 150으로 해놨네요
    배너 가로에 여백을 많이 줘서 작은 기기에서도 전달할 내용이 보이도록 해놓긴 했습니다.
    갤럭시폴드 사이즈(280)로 보니 내용이 약간 잘리네요. 뭐 만든 사람 마음이긴 하지만...
    배너를 작은 사이즈에서도 전달할 내용이 모두 보이도록 양쪽에 여백을 줘도 괜찮다면 고정으로 사용해도 무방하긴 합니다.
    네이트와 같이 고정으로 할 경우 원본 640/300 작업, 위젯 설정 640/300으로 썸네일 생성, 불러들인 후 이미지를 감싸고 있는 a태그에는 높이 150, 가로100%, 이미지에는 가로100%는 빼고 높이값만 150 넣은 후 이미지를 가운데로 정렬하도록 값을 주면 될 것 같습니다.
    대신 그런 경우 일정한 여백을 둬서 배너작업을 새로해야 합니다.
  • Lv4 Lv4
    아 넘 감사드립니다. 가로 양쪽 여백을 적당히 주는 식으로해서 가능한 많은 기기에 적용토록 했군요 나름 고민이 적용되었군요.

    전 css a는 레이아웃 쪽이라 적용이 되질 않는데,(왜그런지 찬찬히 봐봐야겠어요)
    그냥 css img에만 높이 150, 가로100% 주니 괜찮은 것 같습니다.
  • Lv4 Lv4
    위젯에서 a태그에 별도의 class를 준 후에 위젯 css에서 값을 지정해줘야 적용될 겁니다.
    지금은 위젯에서 지정을 해주지 않으니 레이아웃의 값이 적용이 되는 겁니다.
    css img에 높이 150, 가로 100%로 하는 경우 크게 티는 나지 않아도 기기에 따라 이미지가 변형이 되어 나타나게 됩니다. 가로가 길면 가로폭만 늘어나고 가로가 좁으면 가로폭만 줄어들어 찌그러진 형태가 되는거죠.
  • Lv4 Lv4

    a 태그에 class 추가한 후 css 값줘도 왜그런지 먹지를 않습니다.

     

    개발자도구에 비활성화 되게 나오고 수정도 안됩니다.
    아예 위젯 css를 불러오지 못하고 레이아웃 css를 가져옵니다.


    조언주신 찌그러지는 현상 감안하면서 계속 문제 찾아가봐야 될 듯 합니다. ( _ _ )

  • Lv4 Lv4
    네이트가 문제가 좀 있는 것 같습니다.
    말씀하신 갤럭시폴드 사이즈(280)에서 가로 조금 잘리는데요. 음...

    네이버,다음은 세로를 고정하지 않아서 잘리지 않는데 더 나은 듯 합니다.(세로 사이즈가 다소 제각각이지만)
    이 점 고려하여 고민해봐야겠습니다.

    자세한 원리와 로직을 가르쳐주셔서 많이 해결되었습니다. 지끈했던 머리가 개운해 지네요^^ 감사드립니다.