外贸网站建设,外贸网站建设公司,跨境电商独立站

PB扩展字段多图带描述添加副标题并修改样式

时间:2026-10-06   访问量:1000

第一:在sigle.html和content.html中找到并修改,添加subtitle

  {if($value->type==24)}
                                <!-- 多图上传(带标题/描述) -->
                                    {php}
                                    $name=$value->name;
                                    $description = $value->description;
                                    if([$content->$name]){
                                    $pics= unserialize([$content->$name]);
                                    }else{
                                    $pics = array();
                                    }
                                    {/php}
                                    <div class="layui-input-inline">
                                    {php}
                                    $picssrc = array();
                                    foreach ($pics as $key2 => $value2) {
                                    $picssrc[]= $value2['src'];
                                    }
                                    $picssrc = implode(',', $picssrc);
                                    echo "<input type='text' name='".$name."' id='".$name."' value='".$picssrc."' placeholder='请上传".$description."'  class='layui-input'>";
                                    {/php}
                                    </div>
                                    <button type="button" class="layui-btn uploads watermark" data-des="[value->name]" data-type="3">
                                        <i class="layui-icon">&#xe67c;</i>上传多图
                                    </button>
                                    <a class="layui-btn layui-btn-warm" onclick="GetPictureFolder(100,'[value->name]','3');"><i class="layui-icon layui-icon-picture"></i>图库</a>                                  
                                    <div id="[value->name]_box" class="pic addedit">
                                    <dl class="hide"></dl> <!-- 规避空内容拖动bug -->
                                    {php}
                                    foreach ($pics as $key2 => $value2) {
                                        //需要留一个空,不然被解析为标签了 [$key ]
                                        echo "<dl class='pics-ask'><dt class='pics-ask-img'><img lay-src='".SITE_DIR.$value2['src']."' data-url='".$value2['src']."'></dt><a class='replace'>更换</a><dd>删除</dd><dt  class='pics-ask-title'><input type='text' name='".$name."|title[]' value='".$value2['title']."'  placeholder='标题' class='title-input' style='width:95%'/></dt><dt class='pics-ask-subtitle'><input type='text' name='".$name."|subtitle[]' value='".$value2['subtitle']."'  placeholder='副标题' class='title-input' style='width:95%'/></dt><dt class='pics-ask-desc'><textarea name='".$name."|desc[]' placeholder='描述' class='layui-textarea' style='display:unset;height:100px;min-height:100px;width:95%'>".$value2['desc']."</textarea></dt></dl>";
                                    }
                                    {/php}
                                    </div>
                                    <script type="text/javascript">picsSortable('[value->name]'); </script>
                                {/if}

第二步:在media_index.html中也需要修改:添加副标题

else if (inputType == '3') {
                        html += "<dl class='pics-ask'><dt class='pics-ask-img'><img src='" + sitedir + images_array[i] + "' data-url='" + images_array[i] + "' alt='" + images_name_array[i] + "'></dt><dd>删除</dd>" +
                            "<dt class='pics-ask-title'><input type='text' name='" + inputId + "|title[]' value='" + images_name_array[i] + "' placeholder='标题' class='title-input' style='width:95%'/></dt>" +
                            "<dt class='pics-ask-subtitle'><input type='text' name='" + inputId + "|subtitle[]' value='' placeholder='副标题' class='title-input' style='width:95%'/></dt>" +
                            "<dt  class='pics-ask-desc'><textarea name='" + inputId + "|desc[]' placeholder='描述' class='layui-textarea' style='display:unset;height:50px;min-height:50px;width:95%'></textarea></dt>" +
                            "</dl>";
                    }

第三步:在SingleController.php和ContentController.php控制中添加副标题:

case 24: // 多图文处理
                            case 26: // 多附件处理
                                if($field_data) {
                                    $pics_arr = explode(',', $field_data);
                                    $pics_arr2 = [];
                                    foreach ($pics_arr as $key2 => $value2) {
                                        $pics_arr2[$key2]['src'] = $pics_arr[$key2];
                                        $pics_arr2[$key2]['title'] = array_values(post($value->name . '|title'))[$key2];
                                        $pics_arr2[$key2]['subtitle'] = array_values(post($value->name . '|subtitle'))[$key2];
                                        $pics_arr2[$key2]['desc'] = array_values(post($value->name . '|desc'))[$key2];
                                    }
                                    $field_data = serialize($pics_arr2);
                                } else {
                                    $field_data = '';
                                }
                                break;

第四步:我们给他一个样式:

<style>
	.pic .pics-ask{width:100%; max-width: 100%;display:block;}
	.pic .pics-ask .pics-ask-img{width:120px; float: left;}
	.pic .pics-ask .pics-ask-title,
	.pic .pics-ask .pics-ask-subtitle{ width:calc(100% - 130px); float: left; margin-bottom: 5px;}
	.pic .pics-ask .pics-ask-desc{ width:calc(100% - 130px); float: left;}

</style>


第五步:在ParserController.php中修改代码:

case 'title':
                                $one_html = str_replace($matches2[0][$j], $this->adjustLabelData($params, isset($picstitle[$vkey]) ? $picstitle[$vkey] : ''), $one_html);
                                break;
                                下面添加副标题
                            case 'subtitle':
                                $one_html = str_replace($matches2[0][$j], $this->adjustLabelData($params, isset($picssubtitle[$vkey]) ? $picssubtitle[$vkey] : ''), $one_html);
                                break;
  
  // 读取内容多图
                $pics = $picstitle = $picssubtitle = $picsdesc = [];
                if (!!$rs) {
                    $type = $this->model->getExtfieldType($field); // 获取模型字段类型
                    // 处理不同类型的图片数据
                    if (($targetType === '' || $targetType === 'sort') && $type === '10') { // 纯多图无标题
                        $pics = explode(',', $rs);
                    } elseif (in_array($targetType, ['label', 'company', 'sort'], true) || in_array($type, ['24', '26'], true)) { // 序列化多图数据
                        $picsarr = @unserialize($rs);
                        if (is_array($picsarr)) {
                            foreach ($picsarr as $value) {
                                $pics[] = isset($value['src']) ? $value['src'] : '';
                                $picstitle[] = isset($value['title']) ? $value['title'] : '';
                                $picssubtitle[] = isset($value['subtitle']) ? $value['subtitle'] : '';
                                $picsdesc[] = isset($value['desc']) ? $value['desc'] : '';
                            }
                        }
                    } else { // 内容默认多图
                        $pics = isset($rs->$field) ? explode(',', $rs->$field) : [];
                        $picstitle = isset($rs->picstitle) ? explode(',', $rs->picstitle) : [];
                    }
                }


第六步,关键,否则拖动会造成数据出错。

在com.js中修改:

 // if (single == false) {
                //     var $input = $(evt.item).find('input.title-input');
                //     $input.attr('name', $input.attr('name').replace(field, newName));
                //     if (field != 'pics' && field != 'pics_batch') {
                //         var $textarea = $(evt.item).find('textarea.layui-textarea');
                //         $textarea.attr('name', $textarea.attr('name').replace(field, newName));
                //     }
                // }
                // ====== 替换为以下新代码 ======
                if (single == false) {
                    // 挨个遍历当前拖拽项(evt.item)里的所有 input 和 textarea,精准替换前缀,不篡改后缀
                    $(evt.item).find('input, textarea').each(function() {
                        var oldName = $(this).attr('name');
                        if (oldName) {
                            $(this).attr('name', oldName.replace(field, newName));
                        }
                    });
                }


多图带描述添加副标题并修改样式

最后效果如图。


正在加载评论…