搜索到
16
篇与
的结果
-
让访客可以在 Typecho 评论贴图（Typecho 评论插图功能实现） 在 Typecho 评论的内容中，如果用 <img src="图片地址" />的语法，将被 Typecho 自带的过滤器删除，所以评论后看不到贴图。接触贴图限制我们需要手动打开限制，这个一般推荐在themeInit函数里强制设置，这样对用户来说就无需额外操作。修改functions.phpfunction themeInit($archive) { $options = Helper::options(); //允许图片标签 $options->commentsHTMLTagAllowed .= '<img class="" src="" data-src="" alt="" style=""/>'; }这样我们就可以在评论区通过 <img src="图片地址" />的语法来贴图了。支持使用短代码格式贴图使用短代码的格式贴图 [img src="图片地址"]好处是有别的html过滤器也不怕图片被过滤掉了。处理评论内用需要用到钩子，往functions.php加入以下代码。Typecho_Plugin::factory('Widget_Abstract_Comments')->contentEx = ['CommensHelper', 'parse']; class CommensHelper { public static function parse(string $content, $archive, ?string $lastResult) :string { if ($lastResult) $content = $lastResult; // 判断是不是在文章页 $isSingle = Typecho_Widget::widget('Widget_Archive')->is('single'); if ($isSingle) { $content = preg_replace_callback('/\[img=?\]*(.*?)(\[\/img)?\]/ism', function ($matches) { return sprintf('', Typecho_Common::safeUrl($matches[1])); }, $content); } else { $content = preg_replace('/\[img=?\]*(.*?)(\[\/img)?\]/ism', _t("[图片]"), $content); } return $content; } }评论框增加一个按钮用于插入图片修改comments.php，在合适位置加入以下代码：<a id="insert-image" href="javascript:void(0)" data-textarea="textarea[name='text']" data-prompt-text="请输入图片链接">插入图片</a> <script> let el = document.getElementById('insert-image'); el.addEventListener('click', (event) => comment_image.apply(el, [event, document.querySelector(el.dataset.textarea)]), false); function comment_image(event, textarea) { var URL = prompt(this.getAttribute("data-prompt-text") || ""); if (URL) { replaceSelectedText(textarea, '[img]' + URL + '[/img]'); } return false; } function getInputSelection(el) { var start = 0, end = 0, normalizedValue, range, textInputRange, len, endRange; if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") { start = el.selectionStart; end = el.selectionEnd; } else { range = document.selection.createRange(); if (range && range.parentElement() == el) { len = el.value.length; normalizedValue = el.value.replace(/\r\n/g, "\n"); // Create a working TextRange that lives only in the input textInputRange = el.createTextRange(); textInputRange.moveToBookmark(range.getBookmark()); // Check if the start and end of the selection are at the very end // of the input, since moveStart/moveEnd doesn't return what we want // in those cases endRange = el.createTextRange(); endRange.collapse(false); if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) { start = end = len; } else { start = -textInputRange.moveStart("character", -len); start += normalizedValue.slice(0, start).split("\n").length - 1; if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) { end = len; } else { end = -textInputRange.moveEnd("character", -len); end += normalizedValue.slice(0, end).split("\n").length - 1; } } } } return { start: start, end: end }; } function replaceSelectedText(el, text) { var sel = getInputSelection(el), val = el.value; el.value = val.slice(0, sel.start) + text + val.slice(sel.end); } </script>JS代码积分下载：
-
利用PHP输出文件夹下所有文件名称 有时候批量上传到服务器一些图片，然后需要贴出图片url，数量少还可以手动，但图片数量很多的时候，有点太费力气，正好群友昨晚问及，写几段代码就能轻松搞定，问题有二，1是图片是有序图片，例如从1.jpg-299.jpg，2是图片无序，例如http://scriptsz.com/images/eghj.jpg http://scriptsz.com/images/ehhj.jpg http://scriptsz.com/images/evhj.jpg下面分别用两端代码说明,用到了循环中的for和while1，针对有序：<?php for($i=1;$i<=100;$i++){ //其中100是生成到结束的数字 echo 'http://xxx.cc/'.$i.'.jpg<br>'; //替换域名和文件扩展名称 } ?>2，针对无序：<? $dir = "dirname"; //如果是文件所在目录，则填写/www/wwwroot/domain.com/ ，如果是文件所在目录下的子目录，直接填写子目录名称 if (is_dir($dir)) { if ($dh = opendir($dir)) { while (($file = readdir($dh)) !== false) { if($file!='.' & $file!='..') { echo "http://xxx.cc/da/$file.jpg <br>"; } } closedir($dh); } } ?>保存到服务器，然后打开文件即可获取到想要的内容，如果是粘贴到论坛也可以预先将BBcode加进去。 -
使用CSS3实现鼠标移到图片上图片放大 在现在的网页设计中，鼠标移到图片上图片放大的效果常常被用到，这个效果多应用于文章列表里。我一开始以为是用JQuery来实现的，后来才知道原来是用CSS3来实现的。虽然用JQuery也能实现同样的效果，但用CSS3来实现会更加简单和方便。本文将介绍如何用CSS3来实现这个功能。请把鼠标移到图片上看到效果是：鼠标移到图片上时，图片会自动放大。CSS3实现方法如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 200px; height: 138px; border: #000 solid 1px; margin: 50px auto; overflow: hidden; } #div1 img{ cursor: pointer; transition: all 0.6s; } #div1 img:hover{ transform: scale(1.4); } </style> </head> <body> <div id="div1"> <img src="demo.jpg" /> </div> </body> </html>代码分析：1、首先知道DIV和IMG的层次关系，IMG是在某DIV里面，图片放大后不应该超出DIV的盒子。2、设置DIV的 overflow: hidden; 属性，作用是图片变大后超过DIV区域的部分会自动隐藏。3、设置 transition: all 0.6s; 属性和 transform: scale(1.4); 属性，其中 transition: all 0.6s; 是变化速度，数值越小速度越快，而 transform: scale(1.4); 是变化范围， scale(1.4) 是放大1.4倍的意思。实例二：图片放大不受限于DIV盒子如果想图片放大后完全显示，而不是只显示DIV里的区域，那么我们只需把div的 overflow 属性去掉即可，不能设为 auto ，否则div出现滚动条。效果演示如下：请把鼠标移到图片上html代码如下<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 200px; height: 138px; border: #000 solid 0px; margin: 50px auto; /* overflow: hidden; */ } #div1 img{ cursor: pointer; transition: all 0.6s; } #div1 img:hover{ transform: scale(1.4); } </style> </head> <body> <div id="div1"> <img src="demo.jpg" /> </div> </body> </html>代码分析：把div的 overflow 属性去掉，其他代码不变。
-
Typecho 使用 fslightbox 给图片添加暗箱效果 以前我是很喜欢使用FancyBox来提供暗箱效果的，但是FancyBox是纯收费插件。fslightbox同样是收费插件，但是免费部分我们已经够用了。效果fslightbox_demo.png教程下面开始教程~引用 fslightbox[attach]1317[/attach]把下面内容添加到header.php中的</head>前面 <script src="fslightbox.min.js"></script> 修改post.php打开post.php 将 <?php $this->content(); ?> 修改成<?php $pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i'; $replacement = '<a href="$1" data-fslightbox="gallery"><img src="$1" alt="'.$this->title.'" title="点击放大图片" /></a>'; $content = preg_replace($pattern, $replacement, $this->content); echo $content; ?>pjax/ajax 只需要在重载的时候添加一行代码 refreshFsLightbox(); 完美解决问题。最后对，就是这么简单
-
响应式图片灯箱插件 baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox图片灯箱纯JavaScript脚本，拥有图像放大缩小并带有相应的CSS3过度，并能在触摸屏等设备上完美展示。主要特点纯JS编写，无任何依赖支持多重画廊(Multiple-gallery)效果, 且允许自定义参数支持手势滑动(仅在支持多点触控设备上)现代简约风格图像字幕支持响应式的图像CSS3转换SVG按钮，没有额外的文件下载压缩后大约2.3KB浏览器兼容IE 8+ChromeFirefox 3.6+Opera 12+Safari 5+Sleipnir演示和下载官方下载： https://github.com/feimosi/baguetteBox.js在线演示： https://feimosi.github.io/baguetteBox.js/WordPress插件： https://github.com/mikejandreau/baguetteBox-WP （好像仅适用于WP插入的相册）
-
emlog pro实现图片粘贴上传功能 前言emlog pro默认使用了Editor.md编辑器，由于官方并没有在该编辑器插件调用处留下钩子供开发者进行插件拓展，所以需要进行修改文件实现。实现新增插件新增JS文件，建议路径：/admin/editor.md/plugins/image-handle-paste/image-handle-paste.js文件内容：/*! * editormd图片粘贴上传插件 * * @file image-handle-paste.js * @author codehui * @date 2018-11-07 * @link https://www.codehui.net */ (function() { var factory = function (exports) { var $ = jQuery; // if using module loader(Require.js/Sea.js). var pluginName = "image-handle-paste"; // 定义插件名称 //图片粘贴上传方法 exports.fn.imagePaste = function() { var _this = this; var cm = _this.cm; var settings = _this.settings; var editor = _this.editor; var classPrefix = _this.classPrefix; var id = _this.id; if(!settings.imageUpload || !settings.imageUploadURL){ console.log('你还未开启图片上传或者没有配置上传地址'); return false; } //监听粘贴板事件 $('#' + id).on('paste', function (e) { var items = (e.clipboardData || e.originalEvent.clipboardData).items; //判断图片类型 if (items && items[0].type.indexOf('image') > -1) { var file = items[0].getAsFile(); /*生成blob var blobImg = URL.createObjectURL(file); */ /*base64 var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { var base64Img = e.target.result //图片的base64 } */ // 创建FormData对象进行ajax上传 var forms = new FormData(document.forms[0]); //Filename forms.append(classPrefix + "image-file", file, "file_"+Date.parse(new Date())+".png"); // 文件 _this.executePlugin("imageDialog", "image-dialog/image-dialog"); _ajax(settings.imageUploadURL, forms, function(ret){ if(ret.success == 1){ $("." + classPrefix + "image-dialog").find("input[data-url]").val(ret.url); //cm.replaceSelection("![](" + ret.url + ")"); } console.log(ret.message); }) } }) }; // ajax上传图片 可自行处理 var _ajax = function(url, data, callback) { $.ajax({ "type": 'post', "cache": false, "url": url, "data": data, "dateType": "json", "processData": false, "contentType": false, "mimeType": "multipart/form-data", success: function(ret){ callback(JSON.parse(ret)); }, error: function (err){ console.log('请求失败') } }) } }; // CommonJS/Node.js if (typeof require === "function" && typeof exports === "object" && typeof module === "object") { module.exports = factory; } else if (typeof define === "function") // AMD/CMD/Sea.js { if (define.amd) { // for Require.js define(["editormd"], function(editormd) { factory(editormd); }); } else { // for Sea.js define(function(require) { var editormd = require("./../../editormd"); factory(editormd); }); } } else { factory(window.editormd); } })();插件调用修改文件 /admin/views/article_write.phppro v1.0.0(RC622)是195行在 onload : function() {内添加//粘贴上传 editormd.loadPlugin("/admin/editor.md/plugins/image-handle-paste/image-handle-paste", function(){ Editor.imagePaste(); });其中 /admin/editor.md/plugins/image-handle-paste/image-handle-paste是插件文件路径去掉后缀成品参考闲麻烦的朋友可以直接下载我修改的文件并覆盖下载地址：https://github.com/wuxiaocong/emlogproforimagepaste
-
WordPress删除文章自动删除文章中的图片 说明代码放在function.php内步骤-文章删除到垃圾箱-垃圾箱内彻底删除，然后你就发现媒体库里那个文章内的图片已经不见了代码// 删除文章同步删图片 function delete_post_and_attachments($post_ID) { global $wpdb; //删除特色图片 $thumbnails = $wpdb->get_results( “SELECT * FROM $wpdb->postmeta WHERE meta_key = ‘_thumbnail_id’ AND post_id = $post_ID” ); foreach ( $thumbnails as $thumbnail ) { wp_delete_attachment( $thumbnail->meta_value, true ); } //删除图片附件 $attachments = $wpdb->get_results( “SELECT * FROM $wpdb->posts WHERE post_parent = $post_ID AND post_type = ‘attachment'” ); foreach ( $attachments as $attachment ) { wp_delete_attachment( $attachment->ID, true ); } $wpdb->query( “DELETE FROM $wpdb->postmeta WHERE meta_key = ‘_thumbnail_id’ AND post_id = $post_ID” ); } add_action(‘before_delete_post’, ‘delete_post_and_attachments’); // 结束
-
emlog根据图片数量来改变显示方式 一直以来我博客的文章列表页面都是那么的单调，无论里面的图片或多或少都是取得首张图片，标题，摘要。电脑上看吧还是可以的，但是手机上的阅读体验并不是太好，所以在其他模板里面扒出来了这个代码。可以获取文章内的图片数量，当图片大于或者小于多少多少张的时候可以使用特定的显示方式。首先在module.php里面添加代码：<?php function img_array($content){ //正则获取文章内的外链图片数量 preg_match_all("/\]\((.*?)\)/", $content, $imgarr); $result = $imgarr[1]; return $result; } ?> <?php function img_count($content){ return count(img_array($content)); } ?>然后在文章列表页，一般是log_list.php文件内这样调用：<?php $logImgCount = img_count($value['content']); ?> <?php if(img_count($value['content']) >=1 && img_count($value['content']) < 3){?> <!--图片小于三张时显示--> <?php }elseif(img_count($value['content']) >= 3){?> <!--图片等于三张时显示--> <?php }elseif(img_count($value['content']) == 0){?> <!--无图片时显示--> <?php }?>本教程用于emlog pro版本，如果是6.0或者5.3.1的话第一步的代码是<?php function img_array($content){ //正则获取文章内的外链图片数量 preg_match_all("|<img[^>]+src=\"([^>\"]+)\"?[^>]*>|is", $content, $imgarr); $result = $imgarr[1]; return $result; }https://su1018.cn/jiaocheng/14.html ?> <?php function img_count($content){ return count(img_array($content)); } ?>
-
在线无损压缩图片神器Optimizilla 前言因为经常给博客做配图，所以发现Optimizilla在线图片压缩服务，操作接口非常简单、易用，无须额外下载或安装任何软件，透过浏览器就能够进行图片压缩，并且支持中文语言界面，国内用户轻松掌握，听上去是不是很不错呢？此外，Optimizilla 提供中文接口，当你完成图片压缩后，还能一键打包、下载所有最佳化后的图片，上传的相片会保存于服务器一小时，超过时间后就会被自动删除。使用打开 在线图片优化器 (imagecompressor.com) 网站后，点选"上传文件"来选择要压缩的图片，如果你的图片有很多张，也可以直接全选、拖曳到 Optimizilla 网站（单次最多 20 张），一样可以压缩。上传后，Optimizilla 会开始逐步转换、压缩文件在默认情况下，Optimizilla 会自动调整、选择最合适的颜色数量，借此降低图片大小，如果你觉得效果还不够理想，可在下方自己调整颜色，调整后即时查看原文件和压缩后的图片呈现效果，进行对比，即使压缩达 77% ，以肉眼还是看不出什么差异。最后，点选单张相片下方的"下载"来取得压缩后的图片(文件名称会多一个min)，或者点选"合并"来一次打包所有图片并下载。小结最后说一下值得一试的5个理由使用 Optimizilla 可保证最佳质量、文件大小，压缩后得到最佳效果支援 JPG、PNG 两大常见图片格式可自由调整相片压缩效果，即时在线预览支持文件合并打包下载最关键一点全中文的界面，让国内使用者能够轻松掌握`
-
Typecho如何获取文章图片数量？ 该功能适合那些壁纸博客站，非常实用的一个小功能，显示文章内图片的数量，实现起来也非常的简单，有2种方法。方法一在主题function.php里添加代码如下（joe主题放在core/core.php里）：function imgNum($content){ $output = preg_match_all('#<img(.*?) src="([^"]*/)?(([^"/]*)\.[^"]*)"(.*?)>#', $content,$s); $cnt = count( $s[1] ); return $cnt; }调用方法：<?php echo ''.imgNum($this->content).'' ; ?>适用于图片型主题.仅计算文章内使用的img标签数量.应用环境为：文章列表方法二在主题function.php里添加代码如下（joe主题放在core/core.php里）：function imgNum($content){ $output = preg_match_all("/<img.<em>?src="(.</em>?)"<sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup>*>/i", $content,$matches); $cnt = count( $matches[1] ); return $cnt; }调用方法：<?php echo ''.imgNum($this->content).'' ; ?>
-
EMLOG调用正文中图片(多图模式)的方法 代码说明(为修改代码的情况下，可根据自己的情况修改)：使用本代码将实现当正文少于4张图片时候只调用一张图片；当少于8张图片时，调出4张；当大于8张图片时，调出8张图片代码效果：代码详情：<?php if(preg_match_all("/<img.*src=[\"'](.*)[\"']/Ui", $value['content'], $imgs) && !empty($imgs[1])){ $imgNum = count($imgs[1]); if($imgNum < 4) $n = 1; elseif($imgNum < 8) $n = 4; else $n = 8; for($i=0; $i < $n; $i++){ $img = $imgs[1][$i];echo "<img src='$img'>";} }else{ echo "<img src='图片地址'>";}//没有图片时显示 ?>下面代码自用，增加判断当只有一张图片时用不同css表达<?php if(preg_match_all("/<img.*src=[\"'](.*)[\"']/Ui", $value['content'], $imgs) && !empty($imgs[1])){ $imgNum = count($imgs[1]); if($imgNum < 5) $n = 1; elseif($imgNum < 10) $n = 5; else $n = 10; for($i=0; $i < $n; $i++){ if($n == 1){$img = $imgs[1][$i];echo "<p><img src='$img'></p>";} elseif($n > 1){$img = $imgs[1][$i];echo "<ul><li><img src='$img'><li></ul>";} } }else{ echo '<p><img src="图片地址" ></p>';}//没有图片时显示，为空则不显示 ?>代码说明：把上面代码直接放入log_list.php中你想要放入的位置即可，当然你也可以放入你的首页。
-
WordPress 点击图片放大悬浮效果图片浮层代码 WordPress文章中点击图片放大悬浮效果 图片浮层相册轮播点击下一张图片代码在 header.php 添加以下代码<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />在 footer.php 添加以下代码<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>在 functions.php 添加以下代码/**图片灯箱自动给图片加链接**/ add_filter('the_content', 'fancybox'); function fancybox($content){ $pattern = array("/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>/i","/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)<\/a>/i"); $replacement = array('<a$1href=$2$3.$4$5 data-fancybox="gallery"><img$1src=$2$3.$4$5$6></a>','<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>'); $content = preg_replace($pattern, $replacement, $content); return $content; }
-
emlog文章列表获取附件（图片）数量方法 本方法实际获取的是文章附件的数量，而非只是图片的数量，如果你的文章含有文件附件，列表也会显示成图片数量。所以此方法最适合于文章图片特别多而且没有附件的博客。有强迫症必须显示图片实际数量的，请绕道。 emlog文章列表获取附件（图片）数量，方法过于简单，修改博客emlog模板文件步骤如下：1、在module.php文件里面加入以下代码：<?php //图片数量 function pic_num($attnum){ if ($attnum > 0) { echo '<span class="attnum" title="此文有 '.$attnum.' 张图片">',$attnum,'</span>'; } }?>2、在log_list.php文件里面进行以下操作：`找到 <?php echo $value['log_title']; ?> ，在其后 加上 <?php pic_num($value['attnum']); ?> 即可。`3、添加css样式到你的样式文件`.attnum{background: url(images/img.gif) no-repeat 5px center;padding-left: 20px} //图片可替换自己的图片，字体大小自己调节`
-
Typecho 评论中嵌入图片 有时发表评论需要添加图片，Typecho本身支持在评论中开启嵌入图片，但是还需要手工补全<img src= />来实现图片插入，比较麻烦。其实可以学习 v2ex 自动把图片后缀的文件自动转换为图片链接。首先在functions.php中添加转换函数function parseComment($comment) { $size = auto; $comment = preg_replace(array('#(http://([^\s]*)\.(jpg|gif|png|JPG|GIF|PNG))#', '#(https://([^\s]*)\.(jpg|gif|png|JPG|GIF|PNG))#'), '<img src="$1" alt="评论" style="width:' . $size . '; height:' . $size . '" />', $comment); return $comment; }如果你的主题有评论自定义，那么请找到 threadedComments 函数，在里头把$comments->content();修改为echo pareseComment($comments->content);没有的话你还要参照Typecho官方文档自定义评论才行。来源：https://xiamp.net/archives/embed-pictures-in-typecho-comments.html
-
Typecho 评论中嵌入图片 有时发表评论需要添加图片，Typecho本身支持在评论中开启嵌入图片，但是还需要手工补全<img src= />来实现图片插入，比较麻烦。其实可以学习 v2ex 自动把图片后缀的文件自动转换为图片链接。首先在functions.php中添加转换函数function parseComment($comment) { $size = auto; $comment = preg_replace(array('#(http://([^\s]*)\.(jpg|gif|png|JPG|GIF|PNG))#', '#(https://([^\s]*)\.(jpg|gif|png|JPG|GIF|PNG))#'), '<img src="$1" alt="评论" style="width:' . $size . '; height:' . $size . '" />', $comment); return $comment; }如果你的主题有评论自定义，那么请找到 threadedComments 函数，在里头把$comments->content();修改为echo pareseComment($comments->content);没有的话你还要参照Typecho官方文档自定义评论才行。
-
Wordpress自判断文章图片或特色图像的调用代码 下面代码将帮助您自动从文章中调用缩略图，在制作主题是相当有用哦！将以下代码贴入主题的function.php文件： //thumbnails add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 200, 140 ,true ); function don_the_thumbnail() { global $post; // 判断该文章是否设置的缩略图，如果有则直接显示 if ( has_post_thumbnail() ) { echo '<a href="'.get_permalink().'">'; the_post_thumbnail(); echo '</a>'; } else { //如果文章没有设置缩略图，则查找文章内是否包含图片 $content = $post->post_content; preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER); $n = count($strResult[1]); if($n > 0){ // 如果文章内包含有图片，就用第一张图片做为缩略图 echo '<a href="'.get_permalink().'"><img src="'.$strResult[1][0].'" /></a>'; }else { // 如果文章内没有图片，则用默认的图片。 echo '<a href="'.get_permalink().'"><img src="'.get_bloginfo('template_url').'/img/thumbnail.jpg" /></a>'; } } }
