导航
模板制作首页
系统使用
插件使用
米拓商城
模板制作
应用开发
系统开发
https://doc.metinfo.cn/mb/
1
模板制作首页
模板标签大全
辅助功能
生成缩略图
更新时间：2020-05-26 16:16:25
作者：米拓建站
## 概述： 通过系统的`thumb`方法，可以将网站里的原始图片按设置的尺寸和系统设置的缩略图生成方式生成新的图片，输出一个新的图片路径。 【说明】 - 外站的图片不支持该方法； - 可参考"[$c 系统设置参数](https://doc.metinfo.cn/mb/mbtag/78.html "$c 系统设置参数")" 获取文章模块列表页、产品模块列表页和详情页、图片模块列表页和详情页自定义的图片尺寸； - 系统缩略图生成方式，可参考"[生成方式](https://doc.metinfo.cn/metinfo/imgs/imgs640.html "生成方式")"设置。 ## 使用范围： 所有模板文件页面。 ## 类型： 系统方法，用于按尺寸裁剪图片生成缩略图的方法。 ## 语法： **格式：{原始图片路径|thumb:缩略图宽度,缩略图高度}** //原始图片路径可以是变量，例如$v.imgurl；缩略图宽度,缩略图高度为数值, 例如：300,300，也可以是变量：例如$lang['index_img_w'],$lang['index_img_h']，$lang定义请参考文档https://doc.metinfo.cn/mb/mbtag/81.html 例如： <img src="{$v.imgurl|thumb:$lang['index_img_w'],$lang['index_img_h']}" alt="图片关键词" title="图片关键词"> //$v.imgurl:内容列表的封面图 //假如$lang['index_img_w'],$lang['index_img_h']的值分别为300和300，则以上示例表示将内容列表的封面图按照宽度为300，高度为300的尺寸生成新的缩略图，并且在前台会渲染成缩略图的路径 ## 示例： ### 自定义设置图片尺寸： **场景案例：**首页某区块调用了产品模块的内容列表，展示产品展示图，需可自定义设置展示图的尺寸。 **模板代码：** <ul>// 信息列表用ul、li标签的格式，可根据自己需求修改 <tag action="list" cid="4">//调用指定栏目的内容列表数据https://doc.metinfo.cn/mb/mbtag/65.html，可参考“如何获取栏目ID”https://doc.metinfo.cn/mb/faq/102.html 将获取的栏目id传入到参数cid中，cid参数的值可以是模板中自定义的变量,例如$lang['index_product_id']，具体请参考文档https://doc.metinfo.cn/mb/mb/28.html // $v包含了每条内容的所有数据，相当于一个数组，可以通过{$v.字段名}的方式来渲染信息数据，$v包含的字段名请参考文档https://doc.metinfo.cn/mb/mbtag/65.html <li> <img src="{$v.imgurl|thumb:400,300}" alt="图片关键词" title="图片关键词">//{$v.imgurl}：内容封面图路径； </li> </tag> 【注意】 - 文章、产品、图片模块内容列表页的缩略图实现，请参考`tag标签中各模块内容列表的文档`https://doc.metinfo.cn/mb/mbtag/list-91.html； - 实际编写时请去掉注释文字。 **前台页面输出HTML：** <ul> <li> <img src="upload/thumb_src/400_300/1515635850.jpg" alt="图片关键词" title="图片关键词"> </li> <li> <img src="upload/thumb_src/400_300/1515633453.jpg" alt="图片关键词" title="图片关键词"> </li> //内容列表可能有多条内容，示例只列举两条 </ul>
上一篇
: if 标签
下一篇
: location 面包屑导航
文档中心
米拓学堂
帮助中心
在线交流
{"status":1,"html":"<style type=\"text\/css\">\r\n.onlinebox_three{border:2px solid;}\r\n.onlinebox_three .onlinebox_three_list{width: 160px;padding: 10px 0px;}\r\n.onlinebox_three .online-item{margin-bottom: 5px; padding: 0px 17px; position: relative;display: block;color: #666;}\r\n.onlinebox_three .online-item:last-child{margin-bottom: 0px;}\r\n.onlinebox_three .online-item:hover{background: #f8f8f8;}\r\n.onlinebox_three .online-item i{font-size: 16px;}\r\n.onlinebox_three .onlinebox-open{font-size: 22px;display:none;cursor: pointer;padding: 0 10px; font-size: 18px; line-height: 40px;}\r\n.onlinebox.min .onlinebox-open{display:block;padding:0 10px;background:#444;font-size:18px;line-height:40px;color:#fff}\r\n.onlinebox .onlinebox-min{position: relative;top:-4px;}\r\n@media (max-width: 767px){\r\n.onlinebox_three .online-item{font-size: 12px;padding-top: 6px;}\r\n.onlinebox_three .online-item i{font-size: 14px;}\r\n}\r\n<\/style>\r\n<div id='onlinebox' class=\"onlinebox onlinebox_three hide\" m-type='online' m-id='online' style=\"border-color:#1baadb;\">\r\n <div class=\"onlinebox-open\" style=\"background:#1baadb;\"><i class=\"fa fa-comments-o\"><\/i><\/div>\r\n <div class=\"onlinebox-box\">\r\n <div class=\"onlinebox-top\" style=\"background:#1baadb;\">\r\n <div class=\"onlinebox-top-btn font-size-26\">\r\n <a href=\"javascript:;\" class=\"onlinebox-close\" title=\"\">×<\/a>\r\n <a href=\"javascript:;\" class=\"onlinebox-min\">-<\/a>\r\n <\/div>\r\n <h4>在线交流<\/h4>\r\n <\/div>\r\n <div class=\"met-editor onlinebox-bottom p-x-10 p-y-5\"><p style=\"text-align: center;\">\r\n <img src=\"..\/upload\/202001\/1579417409303256.png\" data-width=\"120\" width=\"120\" data-height=\"120\" height=\"120\" title=\"\"\/>\r\n<\/p>\r\n<p style=\"text-align: center;\">\r\n 微信公众号\r\n<\/p>\r\n<p style=\"text-align:center;\">\r\n <img src=\"..\/upload\/202001\/1579417452544806.png\" data-width=\"150\" width=\"150\" data-height=\"150\" height=\"150\" title=\"\"\/>\r\n<\/p>\r\n<p style=\"text-align: center;\">\r\n QQ交流群\r\n<\/p><\/div>\r\n <\/div>\r\n<\/div>","t":"4","x":"10","y":"130"}