OpenCms使用标签就可以达到的图片缩放功能是非常的有用的。我也在以前就转载过《cms:img标签用法说明》这篇文章。为了形象的说明,摘录下面内容,让大家看看几个参数的修改就可以输出不同的图片效果。
[王毅原创,转载注明]
注意:数据库里面还是唯一的图片,但是你可以在静态输出来的时候,设置不同的版本!这个很重要。
OpenCms 图片缩放设置
图片缩放
使用默认图片缩放<cms:img src="logo_opencms_png24.png" width="width"/>以后,将会生成一下html代码,并显示一下效果。 |
<img
src="/opencms/opencms/alkacon-documentation/documentation_taglib/logo_opencms_png24.png?__scale=w:400,h:97"
width="400" height="97"> 缩略为:400×97 |
|
<img
src="/opencms/opencms/alkacon-documentation/documentation_taglib/logo_opencms_png24.png?__scale=w:206,h:50"
width="206" height="50"> 缩略为:206×50 |
|
<img
src="/opencms/opencms/alkacon-documentation/documentation_taglib/logo_opencms_png24.png?__scale=w:100,h:24"
width="100" height="24"> 缩略为:100×24 |
|
图片填充
使用图片缩略的填充方式,例如这句代码,象下面一样做个两个参数的替换,就可以呈现下面这些效果。 <cms:img
src="logo_opencms_png24.png" scaleType="1" scalePosition="7"
scaleColor="#FF0000" width="300" height="100" /> |
scalePosition="7" scaleColor="#FF0000" | scalePosition="6" scaleColor="#00FF00" | scalePosition="8" scaleColor="#0000FF" |
| | |
scalePosition="4" scaleColor="#00FF00" | scalePosition="0" scaleColor="#0000FF" | scalePosition="5" scaleColor="#FF0000" |
| | |
scalePosition="1" scaleColor="#0000FF" | scalePosition="3" scaleColor="#FF0000" | scalePosition="2" scaleColor="#00FF00" |
| | |
图片虑镜
<cms:img src="logo_opencms_png24.png" scaleFilter="grayscale" width="300" height="100" /> 将代码中的参数用下列参数替换,将会得到下面这些虑镜效果。 |
scaleFilter="grayscale" | scaleFilter="shadow" | scaleFilter="shadow:grayscale" |
| | |
图片缩放类型
<cms:img src="logo_opencms_png24.png" scaleType="0" width="300" height="60" /> 将这行代码中的“scaleType”参数做修改,分别得到下面这些显示和输出的html代码。 |
<img
src="/opencms/opencms/alkacon-documentation/documentation_taglib/logo_opencms_png24.png?__scale=w:300,h:60"
width="300" height="60"> |
scaleType="0" |
<img
src="/opencms/opencms/alkacon-documentation/documentation_taglib/logo_opencms_png24.png?__scale=w:300,h:60,t:1"
width="300" height="60"> |
scaleType="1" |
<img
src="/opencms/opencms/alkacon-documentation/documentation_taglib/logo_opencms_png24.png?__scale=w:300,h:60,t:2"
width="300" height="60"> |
scaleType="2" |
<img
src="/opencms/opencms/alkacon-documentation/documentation_taglib/logo_opencms_png24.png?__scale=w:300,h:60,t:3"
width="300" height="60"> |
scaleType="3" |
<img
src="/opencms/opencms/alkacon-documentation/documentation_taglib/logo_opencms_png24.png?__scale=w:300,h:60,t:4"
width="300" height="60"> |
scaleType="4" |
转换模式
而使用另一个参数scaleRendermode,可以让图片输出不同的质量,譬如降低图片质量可以加快图片显示速度。 <cms:img src="logo_opencms_png24.png" scaleRendermode="2" width="300" height="60" /> 将上面代码中这个参数分别修改为“1”和“2”,你将会看到下面的显示效果和输出的html代码。 |
<img
src="/opencms/opencms/alkacon-documentation/documentation_taglib/logo_opencms_png24.png?__scale=w:300,h:60"
width="300" height="60"> |
|
<img
src="/opencms/opencms/alkacon-documentation/documentation_taglib/logo_opencms_png24.png?__scale=w:300,h:60,r:2"
width="300" height="60"> |
|
我的相关日志:
2007-03-23 |
[转]OpenCms for MySql 安装图解2007-03-23 |
[转][图文]OpenCms VFS plugin for Eclipse 安装与使用2008-04-11 |
<cms:img>标签的用法举例说明2008-04-10 |
再谈<cms:contentaccess>标签的使用2008-04-09 |
浅谈<cms:contentaccess>标签的使用2008-03-21 |
<cms:contentload>标签的使用2007-12-14 |
<cms:editable>标签的使用2007-12-13 |
<cms:contentshow>标签的使用2007-12-12 |
<cms:contentloop> 标签的使用2007-12-11 |
<cms:contentinfo>标签的使用2007-12-10 |
<cms:contentcheck>标签的使用2007-06-19 |
OpenCms的<cms:info>标签
分享到:
相关推荐
Avaya™ Call Management System (CMS) Database Items and Calculations
完整的cms系统,包括数据库,前端页面和后端。直接可以用eclipase导入meavn项目,用navicat链接本地mysql即可进行调试。
Error #541: 'NordicSemiconductor::Device:Startup:8.27.0' component is missing (previously found in pack 'NordicSemiconductor.nRF_DeviceFamilyPack_NordicLicense')
Laravel Wordpress CMS 版本Laravel 7.1 版本Laravel Wordpress CMS 1.0欢迎来到GitHub Pages Laravel Admin相同的CMS Wordpress :) 演示链接: : 安装与设定###选项1: php artisan install###选项2: 第一步: ...
Subrion CMS是一个免费的开源内容管理系统,这允许您为任何目的构建网站,从博客到企业大型门户。Subrion CMS 4.1.4 更新日志:2017-05-16错误#125:为多语言网站生成不正确的站点地图;错误#400:重新加载页面后,...
... ...Master database design principles Write robust, maintainable, best practice code ...CMS) And much more! This book is suitable for beginner level web developers. No prior PHP experience is needed.
Pratt CMS是一个内容管理系统,它提供了一个简单的嵌入式WYSIWYG html编辑器。 数据库侧,测试环境和模块化系统的用户权限只是其中一些新增功能。
... ...Master database design principles Write robust, maintainable, best practice code ...CMS) And much more! This book is suitable for beginner level web developers. No prior PHP experience is needed.
##易于使用:##### Visual Studio:要安装Kooboo.CMS.Toolkit,请在运行以下命令 PM> Install-Package Kooboo.CMS.Content.UserKeyGenerator.Chinese >``` >#####Web server: >click [here]...
作为国内最知名的Java开源CMS系统,我们一直秉承开源、易用、高性能、安全的系统开发原则,并以作国内优秀的开源网站管理系统为己任,始终坚持不懈地为用户提供强大的Java技术web应用服务。 JEECMS v2.4.2 正式版...
CMS标签大全CMS标签大全CMS标签大全CMS标签大全CMS标签大全CMS标签大全CMS标签大全
6、{aspcms:cimages}全站可用 和无法使用if 7、搜索页{aspcms:topsortid} 报错 8、后台关闭英文栏目名称 出错 9、后台用户列表 分页错误 10、自定义参数 修改 11、简单版后台无法显示三级栏目 12、简单版后台单篇...
WEBInsta:trade_mark:CMS为想要使自己的网站存在感的小型企业和个人观众提供了动态的网站建设解决方案。 它为不了解html或PHP的人们提供了一个强大的系统。
Dreamer CMS 梦想家内容发布系统采用流行的SpringBoot搭建,支持静态化、标签化建站。不需要专业的后台开发技能,会HTML就能建站,上手超简单;只需使用系统提供的标签就能轻松建设网站。全面支持各类表单字段,真正...
CMS,CMS标签提取,CMS标签提取方法,CMS核心标签提取
并且本CMS为开源免费提供广大用户使用. 作者QQ: 13699576 mail: badwolf@qq.com 网站: www.withost.cn QQ群: 12067810 ***************************** * 使用说明: ***************************** 1.架设wamp...
ASP.NET CMS:管理模板 技术 ASP.NET,ASP.NET MVC,ASP.NET Web窗体 主题 HTML5,用户界面,建筑和设计,XAML和HTML的转换,企业内容管理(ECM)
主要为大家介绍了帝国CMS中[!--no.num--]标签的用法,较为详细的分析了[!--no.num--] 标签在进行数字编号排序时的使用技巧,非常具有实用价值,需要的朋友可以参考下
项目说明:1,yycms.admin 后台站点项目2,yycms.entity 数据库实体层3,yycms.service windows服务4,yycms.union 第三方平台SDK集合使用说明:1,同步项目到本地,并生成。2,下载数据库脚本,创建数据库。3,修改...
Avaya Call Management System (CMS) 是Avaya的运营效率解决方案,为客户提供客户服务中心呼叫信息管理工具-通过监控,测量,管理和报告呼叫中心的工作状况来提高其效率