TOP
首頁 > ECSHOP 相關文章與模板 > Ecshop 綜合文章 > ecshop 廣告位支援響應式模板修改

ecshop 廣告位支援響應式模板修改

2022-03-19 286

相關文章

ecshop 的廣告位一直都是固定尺寸,除非是小圖片,否則根本不適用於需要隨不同設備縮放的響應式環境,因為固定尺寸容易使得元素變形,如果要能順利使用於響應式模板中,有幾個地方需要修改:

1、資料庫欄位改為接受字串

ALTER TABLE `ecs_ad_position` CHANGE `ad_width` `ad_width` VARCHAR(5) NOT NULL DEFAULT '100%';
ALTER TABLE `ecs_ad_position` CHANGE `ad_height` `ad_height` VARCHAR(5) NOT NULL DEFAULT 'auto';

2、取消寬高驗證 admin\ad_position.php

<!-- 分別在 234~244 行與 268~278 註解即可 -->
    /* 宽度值必须是数字 
    if (!preg_match("/^[\.0-9]+$/",$ad_width))
    {
        make_json_error($_LANG['width_number']);
    }*/
    /* 广告位宽度应在1-1024之间 
    if ($ad_width > 1024 || $ad_width < 1)
    {
        make_json_error($_LANG['width_value']);
    }*/

當未定義寬高時使用預設值 admin\ad_position.php

<!-- 78、139 -->
$ad_width      = !empty($_POST['ad_width'])      ? intval($_POST['ad_width'])  : '100%';
<!-- 79、140 -->
$ad_height     = intval($_POST['ad_height'] > 0 )     ? intval($_POST['ad_height']) : 'auto';

3、廣告位表單預設值 admin\templates\ad_position_info.htm

<!-- 12 -->
<input type="text" name="ad_width" value="{if $posit_arr.ad_width} {$posit_arr.ad_width}{else}100%{/if}" size="30" />
<!-- 17 -->
<input type="text" name="ad_height" value="{if $posit_arr.ad_height} {$posit_arr.ad_height}{else}auto{/if}" size="30" /> 
<!-- 63~84取消驗證 -->
function validate()
{
    validator = new Validator("theForm");
    validator.required("position_name",   posit_name_empty);
   // validator.required("ad_width",        ad_width_empty);
    //validator.required("ad_height",       ad_height_empty);
    //validator.isNumber("ad_width",        ad_width_number, true);
    //validator.isNumber("ad_height",       ad_height_number, true);
    validator.required("position_style",  empty_position_style);
/*
    if (document.forms['theForm'].elements['ad_width'].value > 10240 || document.forms['theForm'].elements['ad_width'].value == 0)
    {
        alert(width_value);
        return false;
    }
    if (document.forms['theForm'].elements['ad_height'].value > 10240 || document.forms['theForm'].elements['ad_height'].value == 0)
    {
        alert(height_value);
        return false;
    }
*/
    return validator.passed();
}

日後新增廣告位時,圖片的寬度都是容器的100%,高度也會依比例自調整,不會再有圖片變形的問題...
點擊圖片可以放大檢視
ecshop 廣告位支援響應式模板修改

點擊圖片可以放大檢視
ecshop 廣告位支援響應式模板修改

如果你對ecshop 廣告位支援響應式模板修改有任何問題請到討論區發帖。