在文章的原生区块编辑器里,打开列表视图,选“图库”这一行,点工具栏上的链条按钮,选择“Enlarge on click(点击放大)”,保存文章。读者点图后,就能在文章上方看大图,切换同一图库里的图片,再关闭回到原文。
这种大图层叫“灯箱(Lightbox)”。下面用同一盏L-8桌面灯的正面、接口、安装三张照片,做一个能从接口图打开、连续看完三张的图库。
把三张照片放进同一个图库
准备你有权使用的三张照片,确认型号一致、接口和安装位置清楚,保留原件。文件可以叫 l8-front.jpg、l8-port.jpg、l8-install.jpg,方便选中;文件名不会自动决定图库顺序。本文是教学例子,没有在跨境YOUNG后台创建或点击这组三图,请在自己获准编辑的练习文章里操作。
后台进入“文章 → 所有文章”,找到练习文章,点“编辑”;已获准新建稿件时,也可以选“文章 → 新建文章”。在要放图的位置点“+”,搜索“图库”或“Gallery”,插入原生图库区块。
按图片所在位置选择一种方式:
- 照片在电脑上:点“上传(Upload)”,按住Ctrl逐张选中三张照片,再点“打开”。上传完成后,照片会进入图库,也保存在媒体库。
- 照片已在媒体库:点“媒体库(Media Library)”,选三张正确照片,点“创建新图库(Create a new gallery)”。进入“编辑图库(Edit Gallery)”后,点“插入图库(Insert gallery)”;修改已有图库时,最后按钮是“更新图库(Update gallery)”。直接上传的三张已进入正文,就不用再走这条弹窗路线。
这次手选三张,不选“Use attached images(使用附加图片)”。后者会自动展示附加到文章的图片,以后增加附件也可能改变图库内容;手选更适合固定展示正面、接口、安装。
打开编辑器左上角像三条横线的“列表视图”,展开“图库”。里面应有三行缩进的“图片”。三个平级的图片区块还不是这组三图;选错区块时,撤销插入,改用图库区块。
漏图时,选“图库”行,点它的“添加(Add)→ 打开媒体库(Open Media Library)”补选。误选图时,选对应的缩进“图片”行,点三个点,再选“删除”。这只移除正文这一处图片,原文件仍在媒体库。
编辑、上传和发布是不同权限。不能上传,就请有权的人上传;只能保存草稿,就由发布负责人处理公开。先完成自己能做的步骤,不需要共用管理员账号。
排顺序,填每张图的说明
逐张选图片,用工具栏的左右移动按钮,或在列表视图拖动图片行,排成“正面 → 接口 → 安装”。选图库后,在右侧区块设置中关闭“随机顺序(Randomize order)”:开启时,编辑器可能仍按原顺序显示,公开页面却会打乱。
接着逐张填写两处文字。选单张图片,用它自己的“图注(Caption)”按钮写图下可见的说明;右侧“区块 → 替代文本(Alternative text)”写图片内容。如果右侧面板没打开,点编辑器右上角“设置”。
图注告诉读者这张图看什么;替代文本也叫Alt,帮助使用辅助阅读工具或看不到图片的人理解内容。两栏用途不同,需要分别填写。图库外层的图注是整组说明,不能代替每张图的图注。
这三张照片可以这样写:
- 正面图:图注“L-8桌面灯正面”;Alt“L-8桌面灯的正面外观”。
- 接口图:图注“L-8接口位置”;Alt“L-8底部接口的位置”。
- 安装图:图注“L-8安装位置”;Alt“L-8固定在桌面边缘的安装位置”。
文字必须跟实际照片相符。照片没拍到底部,就改掉“底部”;也不要从照片猜功率或兼容型号。以后在媒体库改Alt,不保证旧文章里已插入的图片都自动更新,仍要查看当前图区块。更多字段和图片引用整理,可以看媒体库整理方法。
选整个图库,打开点击放大
回到列表视图,点“图库”这一行,而不是下面缩进的某张“图片”。点图库工具栏的链条形“链接(Link)”按钮,选“Enlarge on click(点击放大)”。选图库行设置链接,会一起更新组内图片;选单张图片设置,只影响那一张。
例如,接口图原来设成“媒体文件”,在外层图库选“点击放大”后,它的文件跳转也会被替换。想让三张连续浏览,就在图库这一层统一设置。
链接菜单里的选择,会决定点图后去哪里:
- 点击放大:在文章上方打开大图,可以切换同组已启用放大的图片。
- 媒体文件:打开图片文件,不是文章里的组内浏览。
- 附件页:打开媒体附件页面;部分站点会重定向,以最终打开的页面为准。
- 无:不添加普通跳转链接,但图片仍可能继承主题默认的放大设置。因此,“无”不等于关闭灯箱;本次直接选“点击放大”。
图库的右侧设置如果出现“导航按钮类型(Navigation button type)”,选“Both(图标和文字)”,让上一张、下一张、关闭更容易辨认。它控制大图层里的按钮,不会让正文图片自动轮播。没看到此项,先确认“点击放大”已启用。
接着处理照片的显示范围:把“列数(Columns)”先设为2,关闭“Crop images to fit(裁剪图片以适应)”;有“纵横比(Aspect ratio)”时,选“Original(原始比例)”。这样优先保留完整接口,横竖照片造成的行高或留白差异可以接受。
“分辨率(Resolution)”控制页面使用的图片尺寸,可以从现有选项里选“Large(大)”,再看清晰度和加载情况。可选尺寸取决于原图和站点;原文件没拍清接口,灯箱也不会补出细节。文件过大时,按图片优化方法处理,保留清晰源图。
保存,到公开页面看完三张图
点右上角“保存”或“更新”,等保存完成。重开同一篇文章,查看三张的顺序、各自图注和Alt,以及图库链接是否仍为“点击放大”。
文章已获准公开时,点“查看文章”,复制完整公开地址,在新的无痕窗口打开。未发布的稿件可以先预览布局,普通访客的访问和点击效果,要等负责人批准发布后用公开地址检查。
从第二张接口图开始,按顺序操作:
- 点接口图:大图应在文章上方打开,页面没有跳到图片文件或另一篇页面。
- 点下一张:应看到第三张安装图。
- 点上一张两次:先回接口图,再到第一张正面图。
- 点关闭:应回到原文章刚才看图的位置,能继续阅读下方内容。
电脑也可以用左右方向键切图、Esc键关闭。手机打开同一个公开地址,重复这条按钮路线,查看接口是否完整、按钮是否能点到、关闭后能否继续读原文,以及页面有没有横向溢出。缩窄电脑窗口只能检查布局,不能替代手机上的实际点击。
做到这里,交给读者的是一个可用的三图页面。留一条简短记录即可:“公开地址;接口图打开后实际去了哪里;前后能否看完三张;关闭回哪里;手机哪一步不对。”填自己看到的结果,别把上面的预期直接抄成已完成。缺一张或跳错位置时,按下面的症状处理。
点不开或显示不对,怎么处理
找不到“点击放大”:先选列表视图的图库行,确认是原生图库,不是Elementor或插件组件。本教程按WordPress 7.1.2说明;在“仪表盘 → 更新”查看版本,没有菜单就请管理员提供。当前版本仍缺此项,把版本、主题名称和图库截图交给维护者,请他查看主题是否允许编辑图片放大。设置本组图库不要求先找到“外观 → 编辑器”。
大图只有一张:展开图库,查看三张是不是它下面的缩进图片;平级独立图片不能组成这一组。选图库行重新设“点击放大”并保存。同一图库中启用放大的图片才参加组内浏览,单张被改成文件链接也可能从中缺席。
点图跳到文件,或出现两层大图:跳到文件时,把图库链接从“媒体文件”改为“点击放大”。两层大图可能是插件和原生灯箱同时处理点击,请维护者在授权教学副本中查重复功能,别在经营站随意停一批插件。
接口被截掉或放大仍模糊:先打开保留的原照片。原件已经裁掉或拍糊,请图片提供人补图;原件清楚,回图库关闭裁剪、选原始比例。仍与原件不同,把哪张图、原文件和公开页的差别交维护者查图片输出与主题样式,不直接套网上的全站样式代码。
编辑器对,公开页还是旧内容:确认已保存、打开的是同一篇公开地址,再用未登录窗口看。仍不一致,请维护者查看页面缓存或脚本加载。把“哪张图、点什么、实际出现什么”说清,比只说“灯箱坏了”更容易找到原因。
修好对应设置后,回公开地址重走“接口 → 安装 → 接口 → 正面 → 关闭”。需要协助时,可以通过跨境YOUNG联系页提供公开地址、版本和出错动作;未公开照片或后台资料先约定私密提供方式。
常见问题
做这个三图灯箱,必须买插件吗?
当前原生图库已有点击放大和组内前后浏览,不必为这项操作另买插件。旧版、主题限制或插件图库有不同控件时,先请维护者确认当前组件支持什么;需要额外功能,再比较插件兼容性和费用。
链接选“无”,是不是就不会放大了?
不一定。“无(None)”清掉普通跳转链接,图片仍可能继承主题的默认灯箱。明确要放大就选“点击放大”;若想禁止放大、单图又没有相应控制,请维护者确认主题默认和该图设置,不能把“无”当通用关闭按钮。
从文章里删掉图库,会把原照片也删掉吗?
不会。删除图库或其中的图片区块,只移除正文这处引用,原件仍在媒体库。要去掉误选的安装图,删对应子区块即可;不要因此永久删除媒体原件,它可能还被其他文章或页面使用。