20241127 给typecho文章编辑附件 添加视频 图片预览

Typecho在写文章时,如果一次性上传太多张图片可能分不清哪张,因为附件没有略缩图,无法实时阅览图片,给文章插入图片时很不方便。

 编辑admin/file-upload.php
大约十八行的位置
一个while 循环里面,这是在进行html元素更新操作,在合适的位置插入视频或者图片标签即可.
最终成为这样

<?php while ($attachment->next()): ?><li data-cid="<?php $attachment->cid(); ?>" data-url="<?php echo $attachment->attachment->url; ?>" data-image="<?php echo $attachment->attachment->isImage ? 1 : 0; ?>"><input type="hidden" name="attachment[]" value="<?php $attachment->cid(); ?>" /><!-- 视频,图片预览 --><?php if($attachment->attachment->isImage==1): ?><img src="<?php echo $attachment->attachment->url; ?>" width="80%"></src><br/><?php endif; ?><?php if ($attachment->attachment->mime == "video/mp4"): ?><video src="<?php echo $attachment->attachment->url; ?>" width="100%" controls="true"></video><br/><?php endif; ?><a class="insert" title="<?php _e('点击插入文件'); ?>" href="###"><?php $attachment->title(); ?></a><div class="info"><?php echo number_format(ceil($attachment->attachment->size / 1024)); ?> Kb<a class="file" target="_blank" href="<?php $options->adminUrl('media.php?cid=' . $attachment->cid); ?>" title="<?php _e('编辑'); ?>"><i class="i-edit"></i></a><a href="###" class="delete" title="<?php _e('删除'); ?>"><i class="i-delete"></i></a></div></li>
<?php endwhile; ?>

当然仅仅是这里还不够,还有admin/file-upload-js.php需要修改,原理差不多
大约103行,额外追加一点代码

function fileUploadComplete (id, url, data) {let media = ''if(data.type==="png"){media=' <img src='+data.url+' width="80%"></src><br/>'}else if(data.type==="mp4"){media=' <video src='+data.url+' width="80%" controls="true"></video><br/>'}var li = $('#' + id).removeClass('loading').data('cid', data.cid).data('url', data.url).data('image', data.isImage).html('<input type="hidden" name="attachment[]" value="' + data.cid + '" />'+ media+ '<a class="insert" target="_blank" href="###" title="<?php _e('点击插入文件'); ?>">' + data.title + '</a><div class="info">' + data.bytes+ ' <a class="file" target="_blank" href="<?php $options->adminUrl('media.php'); ?>?cid=' + data.cid + '" title="<?php _e('编辑'); ?>"><i class="i-edit"></i></a>'+ ' <a class="delete" href="###" title="<?php _e('删除'); ?>"><i class="i-delete"></i></a></div>').effect('highlight', 1000);attachInsertEvent(li);attachDeleteEvent(li);updateAttacmentNumber();if (!completeFile) {completeFile = data;}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/62607.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

YOLO的框架及版本迭代

YOLO&#xff08;You Only Look Once&#xff09;是一种非常流行的实时目标检测算法&#xff0c;其特点是将目标检测任务转换为一个回归问题&#xff0c;通过一次前向传播就可以同时完成目标的分类和定位。以下是YOLO框架的整体架构和工作原理&#xff1a; 一、YOLO的基本框架…

Linux命令系列-常见查看系统资源命令

Linux命令系列-常见查看命令 进程管理内存管理磁盘空间管理网络管理主机系统 摘要&#xff1a;本文将对linux系统上常见的查看系统各种资源的命令进行介绍&#xff0c;包括du&#xff0c;df&#xff0c;netstat等命令。所有这些命令都有相关实验截图&#xff0c;实验平台为ubun…

【Python网络爬虫笔记】6- 网络爬虫中的Requests库

一、概述 Requests 是一个用 Python 语言编写的、简洁且功能强大的 HTTP 库。它允许开发者方便地发送各种 HTTP 请求&#xff0c;如 GET、POST、PUT、DELETE 等&#xff0c;并且可以轻松地处理请求的响应。这个库在 Python 生态系统中被广泛使用&#xff0c;无论是简单的网页数…

SolarCube: 高分辨率太阳辐照预测基准数据集

太阳能作为清洁能源在减缓气候变化中的作用日益凸显&#xff0c;其稳定的供应对电网管理至关重要。然而&#xff0c;太阳辐照受云层和天气变化的影响波动较大&#xff0c;给光伏电力的管理带来挑战&#xff0c;尤其是在调度、储能和备用系统管理方面。因此&#xff0c;精确的太…

对拍详细使用方法

对拍的作用 对于我们在学校OJ&#xff0c;cf&#xff0c;牛客…各种只提供少量测试数据的题目&#xff0c;常常交上代码常常超时&#xff0c;能写出正确的暴力代码而题目要求的时间复杂度更低。然而这时你写出了能通过样例且时间复杂度更低的代码&#xff0c;但交上去就是错误…

玄机应急:Apache日志分析Mysql应急Redis应急

目录 第二章&#xff1a;Linux的Apache日志分析 1、提交当天访问次数最多的IP&#xff0c;即黑客IP 2、黑客使用的浏览器指纹是什么&#xff0c;提交指纹的md5 3、查看index.php页面被访问的次数&#xff0c;提交次数&#xff1a; 4、查看黑客IP访问了多少次&#xff0c;提…

使用easyexcel导出复杂模板,同时使用bean,map,list填充

背景 在使用easyexcel导出时&#xff0c;如果遇到一个模板中同时存在 一部分是实体类中的字段&#xff0c;另外部分是列表的字段&#xff0c;需要特殊处理一下&#xff0c;比如下面的模板&#xff1a; 这里面 user&#xff0c; addr 是实体类&#xff08;或者map&#xff09…

深入解析 Django 中数据删除的最佳实践:以动态管理镜像版本为例

文章目录 引言场景与模型设计场景描述 删除操作详解1. 删除单个 Tag2. 批量删除 Tags3. 删除前确认4. 日志记录 高阶优化与问题分析1. 外键约束与误删保护2. 并发删除的冲突处理3. 使用软删除 结合 Django Admin 的实现总结与实践思考 引言 在现代应用开发中&#xff0c;服务和…

otter 扩展

参见otter官方的说明&#xff1a;数据处理自定义&#xff0c;比如Extract , Transform的数据处理. 目前Select/Load不支持数据自定义处理。 Extract模块&#xff1a; 1.EventProcessor : 自定义数据处理&#xff0c;可以改变一条变更数据的任意内容。 2.FileResolver : 解决数…

STM32的CAN波特率计算

公式&#xff1a; CAN波特率 APB总线频率 / &#xff08;BRP分频器 1&#xff09;/ (SWJ BS1 BS2) SWJ一般为1。 例如STM32F407的&#xff0c;CAN1和CAN2都在在APB1下&#xff0c;频率是42000000 如果想配置成1M波特率&#xff0c;则计算公式为&#xff1a;

Z2400039基于Java-+ SpringBoot + vue 企业信息管理系统的设计与实现(源码 配置 PPT 文档 分享)

企业信息管理系统 1.项目描述2.项目结构后端&#xff08;Spring Boot&#xff09;前端&#xff08;Vue.js Element UI&#xff09; 2. 功能实现登录页首页系统管理岗位管理部门管理 3. 部署和运行注意事项 4.界面展示5.源码获取 1.项目描述 基于你的描述&#xff0c;这个项目…

hhdb数据库介绍(10-20)

监控 监控面板 监控面板为用户提供计算节点、服务器相关的监控功能&#xff0c;包含&#xff1a;计算节点服务状态、计算节点流量、计算节点服务器资源、其他服务器资源。 数据采集说明&#xff1a; 监控面板显示24小时内采集的数据&#xff08;需要放大显示&#xff0c;正…

python学习——什么是集合

在 Python 中&#xff0c;集合&#xff08;Set&#xff09;是一种内置的数据类型&#xff0c;用于存储不重复的元素集合。集合中的元素必须是不可变&#xff08;immutable&#xff09;的&#xff0c;例如整数、浮点数、字符串、元组等&#xff0c;但是集合本身是可变的&#xf…

Java面向对象. 多态

目录 java多态是什么东西&#xff1f;首先要理解什么是多态 Java多态指同一行为具有多个不同表现形式。如父类引用指向子类对象&#xff0c;调用重写方法时呈现不同结果。 1.多态的概念 一、多态的基本概念 二、多态的实现方式 接口实现 三、多态的好处 提高代码的可扩展…

医学机器学习:数据预处理、超参数调优与模型比较的实用分析

摘要 本文介绍了医学中的机器学习&#xff0c;重点阐述了数据预处理、超参数调优和模型比较的技术。在数据预处理方面&#xff0c;包括数据收集与整理、处理缺失值、特征工程等内容&#xff0c;以确保数据质量和可用性。超参数调优对模型性能至关重要&#xff0c;介绍了多种调…

SystemUI 下拉框 Build 版本信息去掉

需求及场景 去掉SystemUI 下拉框 Build 版本信息 如下图所示&#xff1a;去掉 12 &#xff08;SP1A.201812.016) 了解 去掉之前我们先了解它是个什么东西:其实就是一个Build RTM 信息显示 Android_12_build_SP1A.210812.016 修改文件 /frameworks/base/packages/Syste…

transformer学习笔记-词嵌入embedding原理

.在学习transformer的时候&#xff0c;可以看到&#xff0c;输入通常需要对词token进行embedding处理&#xff0c;如果没有先了解embedding的原理可能会有疑问&#xff0c;这个embedding&#xff0c;到底怎么来的&#xff0c;怎么就把一个token 变成一个矩阵&#xff0c;这个矩…

Apache Airflow 快速入门教程

Apache Airflow已经成为Python生态系统中管道编排的事实上的库。与类似的解决方案相反&#xff0c;由于它的简单性和可扩展性&#xff0c;它已经获得了普及。在本文中&#xff0c;我将尝试概述它的主要概念&#xff0c;并让您清楚地了解何时以及如何使用它。 Airflow应用场景 …

python+django自动化部署日志采用‌WebSocket前端实时展示

一、开发环境搭建和配置 # channels是一个用于在Django中实现WebSocket、HTTP/2和其他异步协议的库。 pip install channels#channels-redis是一个用于在Django Channels中使用Redis作为后台存储的库。它可以用于处理#WebSocket连接的持久化和消息传递。 pip install channels…

[MySQL]流程控制语句

流程控制语句需要借助存储过程才有效。关于存储过程&#xff0c;我会在后续的文章详述&#xff0c;本篇文章只是阐述流程控制语句。因此&#xff0c;大家只需要注意存储过程中相应的流程控制语句即可。 如果文中阐述不全或不对的&#xff0c;多多交流。 参考笔记三&#xff0c…