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"></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));
}
});
}
最后效果如图。
正在加载评论…