以下是织梦DedeCMS中图片设置的详细指南:
手机端文章内容图片自适应屏幕
为了使织梦DedeCMS手机端的文章内容图片能够自适应屏幕,可以采用以下几种方法:
1、使用CSS样式:
设置图片宽度为100%:在CSS中设置图片的宽度为100%,这样图片就会根据容器的宽度自动调整大小。
“`css
.content img {
maxwidth: 100%;
height: auto;
}
“`
这里的.content
是指包含文章内容的HTML元素类名,需要根据实际的织梦模板来确定。
使用响应式设计:可以使用媒体查询来针对不同屏幕尺寸设置不同的样式规则。
2、修改系统文件:
找到并打开手机端的文章内容页模板,将里面的{dede:field.body/}
标签修改一下,改为如下的标签:
“`php
{dede:field.body runphp=yes}
global $cfg_basehost;
$str = @me;
$search = ‘/(<img.*?)width=(["’])?(2)2|s)([^>]+>)/is’;
$search1 = ‘/(<img.*?)height=(["’])?.*?(?(2)2|s)([^>]+>)/is’;
$search2 = ‘#(<img.*?style=".*?)width:d+px;([^"]*?>)#i’;
$search3 = ‘#(<img.*?style=".*?)height:d+px;([^"]*?.*?>)#i’;
$content = preg_replace($search,’$1$3′,$str);
$content = preg_replace($search1,’$1$3′,$content);
$content = preg_replace($search2,’$1$2′,$content);
$content = preg_replace($search3,’$1$2′,$content);
@me = $content;
//@me = str_replace(‘/uploads/allimg/’, $cfg_basehost.’/uploads/allimg/’, $content); //手机版图片使用绝对路径
{/dede:field.body}
“`
通过这段PHP代码,可以将文章内容中的图片标签的宽度和高度全部去掉,从而实现自适应。
添加栏目图片
织梦CMS默认情况下没有为栏目提供图片功能,但可以通过一些自定义步骤来实现:
1、增加图片字段:
你需要为你的栏目表增加一个用于存储图片的字段,你可以在数据库管理工具中执行以下SQL语句来增加一个名为typeimg的字段:
“`sql
ALTER TABLE dede_arctype ADD typeimg VARCHAR(100);
“`
这将在dede_arctype表中添加一个新的字段,用于存储每个栏目的图片URL。
2、修改后台管理文件:
找到dede/templets/catalog_add.htm文件,并使用你喜欢的文本编辑器打开它,在文件的适当位置,找到类似下面的代码:
“`html
<tr>
<td>排列顺序:</td>
<td><input type="text" name="rank" /></td>
</tr>
“`
在这个代码行下方,增加以下代码:
“`html
<tr>
<td>栏目图片:</td>
<td><input type="text" name="typeimg" /></td>
</tr>
“`
这将添加一个新的输入字段,用于让管理员为每个栏目上传图片。
3、保存并上传图片:
当你添加或编辑一个栏目时,你会看到一个新的字段用于输入图片URL,你可以将你的图片URL粘贴到这个字段中,或者上传一个新图片到你的服务器,并将该图片的URL粘贴到这个字段中。
4、调用图片:
在你的网站模板中,你可以使用{dede:field type='typeimg'}
标签来调用这个图片URL,你可以将以下代码添加到你的页面模板中:
“`html
<img src="{dede:field type=’typeimg’}" alt="栏目图片" />
“`
这将显示你在后台为该栏目设置的图片。
添加栏目缩略图功能(织梦5.7版本)
在织梦5.7版本中,可以通过修改数据库表、模板文件和PHP文件来手动添加“栏目图片”和“缩略图”功能:
1、增加数据库字段:
后台 系统 系统设置 SQL命令行工具,执行以下SQL语句:
“`sql
ALTER TABLE dede_arctype ADD typebigpic CHAR(255) NOT NULL DEFAULT ”;
“`
2、修改后台管理文件:
打开dede/templets/catalog_add.htm
,在name="typename"
下面加入:
“`html
<script language=’javascript’ src="js/main.js"></script>
<tr id="pictable">
<td height="24" colspan="6">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="158"> 图片地址:</td>
<td width="560">
<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tr>
<td height="30">
<input name="typebigpic" type="text" id="picname" style="width:220px" value="" />
<input type="button" name="Submit2" value="站内选择" style="marginleft:8px;" onClick="SelectImage(‘form1.picname’,”);" class=’np coolbg’/>
</td>
</tr>
</table>
</td>
<td width="270">
<style>
.divpre,.divpre img{height:50px;}
</style>
<img src="images/pview.gif" width="100" height="50" id="picview" name="picview">
</td>
</tr>
</table>
</td>
</tr>
“`
打开dede/templets/catalog_edit.htm
,在name="typename"
下面加入:
“`html
<script language=’javascript’ src="js/main.js"></script>
<tr id="pictable">
<td height="24" colspan="6">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="158"> 图片地址:</td>
<td width="560">
<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tr>
<td height="30">
<input name="typebigpic" type="text" id="picname" style="width:220px" value="<?php echo $myrow[‘typebigpic’]?>" />
<input type="button" name="Submit2" value="站内选择" style="marginleft:8px;" onClick="SelectImage(‘form1.picname’,”);" class=’np coolbg’/>
</td>
</tr>
</table>
</td>
<td width="270">
<style>
.divpre,.divpre img{height:50px;}
</style>
<img src="images/pview.gif" width="100" height="50" id="picview" name="picview">
</td>
</tr>
</table>
</td>
</tr>
“`
3、调用图片:
在你的网站模板中,你可以使用{dede:field type='typebigpic'}
标签来调用这个图片URL,你可以将以下代码添加到你的页面模板中:
“`html
<img src="{dede:field type=’typebigpic’}" alt="栏目图片" />
“`
这将显示你在后台为该栏目设置的图片。
相关问答FAQs
1、如何在织梦DedeCMS中添加其他格式的图片?
解答:要添加其他格式的图片,如webp格式,可以按照以下步骤操作:
1. 修改系统设置,让织梦支持该图片格式,进入系统 > 系统基本参数 > 附件设置 > 图片浏览器文件类型,将jpg|gif|png
改成jpg|gif|png|webp
。
2. 让缩略图上传支持你所指定的图片格式,编辑includedialogselect_images_post.php
文件,将第44行的$sparr
数组添加新的图片格式,如webp
。
3. 上传缩略图之后,在已传列表中显示缩略图,编辑includedialogselect_images.php
文件,将第193行的正则表达式添加新的图片格式。
2、如何解决织梦DedeCMS手机端内容页图片不能自适应的问题?
解答:解决手机端内容页图片不能自适应的问题,可以采用以下方法:
1. 找到并打开手机端的文章内容页模板,将里面的{dede:field.body/}
标签修改一下,改为如下的标签:{dede:field.body runphp=yes}
。
2. 在runphp=yes
标签内添加PHP代码,通过正则表达式去掉图片的宽度和高度属性。
3. 保存修改后的模板文件,重新生成页面即可。
织梦的图片设置指南
目录
1、图片上传
2、图片编辑
3、图片插入到文章
4、图片尺寸与格式
5、图片水印设置
6、图片缓存与优化
7、常见问题解答
1. 图片上传
步骤:
1、登录织梦后台管理界面。
2、进入“内容管理”模块,选择相应的文章或页面。
3、点击“添加附件”或“上传图片”按钮。
4、选择本地图片文件,点击“上传”。
5、图片上传成功后,可以在附件列表中查看。
注意:
图片格式建议为jpg、png、gif等常见格式。
图片大小建议不超过2MB。
2. 图片编辑
步骤:
1、在图片上传成功后,点击图片旁的“编辑”按钮。
2、进入编辑界面,可以对图片进行裁剪、旋转、调整大小等操作。
3、编辑完成后,点击“保存”或“确定”按钮。
注意:
编辑过程中,请确保图片清晰度不受影响。
适当调整图片尺寸,以适应网页布局。
3. 图片插入到文章
步骤:
1、在文章编辑界面,将光标放置在需要插入图片的位置。
2、点击“插入图片”按钮。
3、在弹出的对话框中选择已上传的图片。
4、设置图片属性,如链接、宽高、对齐方式等。
5、点击“插入”按钮,图片即可插入到文章中。
注意:
图片链接设置可根据需要选择“打开新窗口”或“在同一窗口打开”。
图片宽高设置建议与文章布局相匹配。
4. 图片尺寸与格式
尺寸:
建议图片尺寸不超过1200px宽。
高度可根据实际内容调整。
格式:
推荐格式:jpg(适用于照片)、png(适用于图标)、gif(适用于动图)。
5. 图片水印设置
步骤:
1、在织梦后台,进入“系统设置”模块。
2、选择“水印设置”选项卡。
3、开启水印功能,并设置水印图片、位置、透明度等参数。
4、保存设置。
注意:
水印图片建议为透明背景。
水印透明度不宜过高,以免影响图片美观。
6. 图片缓存与优化
缓存:
织梦系统会自动缓存图片,以提高访问速度。
如需清除缓存,可在后台“系统设置”模块中操作。
优化:
使用图片压缩工具减小图片文件大小。
建议使用图片压缩工具对图片进行压缩,以提高网页加载速度。
7. 常见问题解答
Q:图片上传后无法显示?
A:请检查图片格式、大小是否符合要求,并确保图片已成功上传。
Q:图片插入后位置不正确?
A:请检查图片属性设置,如宽高、对齐方式等。
Q:图片水印显示不清晰?
A:请检查水印图片质量,并适当调整水印透明度。
通过以上步骤,您可以有效地在织梦后台管理系统中进行图片设置,为您的网站增添更多视觉元素。
原创文章,作者:未希,如若转载,请注明出处:https://www.kdun.com/ask/1152968.html
本网站发布或转载的文章及图片均来自网络,其原创性以及文中表达的观点和判断不代表本网站。如有问题,请联系客服处理。
发表回复