当前位置: 首页 > news >正文

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.lryc.cn/news/494964.html

相关文章:

  • vue3使用monaco编辑器(VSCode网页版)
  • Spark优化--开发调优、资源调优、数据倾斜调优和shuffle调优等
  • Day1 生信新手笔记
  • Python的秘密基地--[章节2]Python核心数据结构
  • 【Electron学习笔记(三)】Electron的主进程和渲染进程
  • [免费]SpringBoot+Vue景区订票(购票)系统【论文+源码+SQL脚本】
  • idea_工程与模块管理
  • A02、Java 设计模式优化
  • jdk8没有Buffer.put()
  • Artec Leo:航海设备维护的便携式3D扫描利器【沪敖3D】
  • HCIA笔记6--路由基础
  • 说说Elasticsearch拼写纠错是如何实现的?
  • Ubuntu20.04运行R-VIO2
  • 【软件项目测试文档大全】软件测试方案,验收测试计划,验收测试报告,测试用例,集成测试,测试规程和指南,等保测试(Word原件)
  • Kubernetes集群操作
  • 分布式事务调研
  • Webpack 的构建流程
  • Cesium 当前位置矩阵的获取
  • ubuntu24.04 python环境
  • YOLO系列论文综述(从YOLOv1到YOLOv11)【第9篇:YOLOv7——跨尺度特征融合】
  • Elasticearch索引mapping写入、查看、修改
  • 【大模型微调】一些观点的总结和记录
  • Vue 3 Hooks 教程
  • pandas数据处理及其数据可视化的全流程
  • docker 在ubuntu系统安装,以及常用命令,配置阿里云镜像仓库,搭建本地仓库等
  • torch.maximum函数介绍
  • Java面试之多线程并发篇(9)
  • Java全栈:超市购物系统实现
  • 1.1 数据结构的基本概念
  • 深度学习:GPT-2的MindSpore实践