playts: 2009-06

2009年6月30日星期二

Image Resize Filter试用笔记

在FileField Insert试用笔记中我讲到Image Resize Filter 模块，接下来我再以更多的例子和大家分享Image Resize Filter 模块的使用

Image Resize Filter 模块需要 PHP 5 以上的版本，安装之前请确认自己的服务器php的版本哦

安装：
解压后复制到sites/all/modules，然后到模块中启用

Image Resize Filter 模块属于过滤器，我们需要到“输入格式”（URL：admin/settings/filters），以“Filtered HTML”为例，点击“配置”（URL：admin/settings/filters/1）

在“过滤器”中找到 Image resize filter 并选中它，然后保存

保存后会退到“输入格式”（URL：admin/settings/filters）比较烦人，呵呵。继续重复点击“配置”（URL：admin/settings/filters/1），然后点击“设置"

在允许使用的HTML标签: 增加 "<img>" 标签，如上图

在 Image resize settings 选项中
Resize images stored:*下有2个选择

Locally
On remote servers

Locally是默认启用的，是指本地的意思
On remote servers是远程的图片

Link to the original:

如果启用，可以给生成指定大小的图片链接到最初大小的图片，如果你安装了lightbox2 或shadowbox还可以附加class和rel attribute

我没有安装 lightbox2 或shadowbox ，所以没有设置class和rel attribute

现在我们把在 Image resize settings 选项中的3个选框都选中保存。

Image Resize Filter 模块怎么使用？往下看吧

点击导航菜单的"创建内容"--"Page"（URL：node/add/page）

标题：随便填
然后我们为了测试，需要上传一张图片，我用的示例图片：img_1080.jpg 尺寸：1600x1067

图片上传后，得到的URL是/sites/default/files/img_1080.jpg

在文章内容中输入<img src="/sites/default/files/img_1080.jpg" width="360" />

确认你的输入格式是“Filtered HTML”，如果你用别的输入格式也可以，但是要做和到我前面讲的设置

保存，效果如下图：

到sites\default\files\resize目录下看，会生成img_1080-360x240.jpg文件

试一下远程图片，我拿http://www.google.cn/intl/zh-CN/images/logo_cn.gif 举例，尺寸：276x100

编辑刚才的文章，在内容中加入<img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif” width="180" />

保存后，效果如下图。

Image Resize Filter 模块会在 sites\default\files\resize目录下建立 remote 目录，调整大小后的图片的文件名为：md5后-宽度x高度.后缀名

由于之前我们在“输入格式”中启用了Link to the original: Image Resize Filter 模块会自动生成链接到原图URL，但你发现没有，在你编辑内容时我们输入的内容并没有改变。

那么当我们要删除这篇文章，这些生成的图片怎么处理它？

经过我测试：
sites\default\files\resize\img_1080-360x240.jpg 会被删除
而从远程获得生成图片不会被删除，也就是指sites\default\files\resize\remote目录下的文件不会被删除。

由于写这篇文章分了2次才写完，中间隔了好几天（大家可以从文中所用到的图片日期就可以看出），在今天写的时候思路没有之前清晰。如果有疑问欢迎大家共同交流。

2009年6月26日星期五

FileField Insert试用笔记

项目页：http://drupal.org/project/filefield_insert
目前的版本是 6.x-1.x-dev /2009-Jun-16
依赖于：FileField
支持tinyMCE, FCKeditor, 这些 WYSIWYG project以及纯文本编辑
插入图像使用 ImageCache presets

可以配合Image Resize Filter 模块来限制并缩放到图片的最大的宽度

我的理解是FileField Insert 模块属于FileField的功能加强的子模块，模块安装非常简单，所以我也不再详述了。

安装后URL到 admin/content/types 编辑你有FileField的内容类型，点击“manage fields”（例如我的类型：article，我安装了ImageField模块并创建了一个名为field_image字段）然后再点击“设置”

如图：

接着找到“HTML insert”选项展开它，如下图（注意：默认状态，下图的设置是空的）

Enable HTML insert：选中才能使用该模块的功能

在Enabled ImageCache presets: 项会列出你启用的ImageCache presets，根据自己需要选中

Maximum image insert width: 这个功能需要安装Image Resize Filter 模块，我的理解作者是从网站管理的角度考虑的，假如用户上传了一张宽度为1000像素的图片，用户把宽度为1000像素的图片插入内容也可能会影响到网页的布局以及阅读，如果在Maximum image insert width: 输入数字600，那么用户插入内容页的图片就会调整到宽度600像素

下面在实际应用给大家看

我用于示例的图片是img_1273.jpg，尺寸：1600x1067

当我上传完图片之后就会看到，多了这个小器具

下图是上传完图片的下界面

你可以点击下拉列表选择ImageCache presets，然后点击"Send to text area"，效果如下图：

记不记得我前面提到Image Resize Filter 模块，我在Maximum image insert width: 输入数字600，这样是限制图片过大，我们试试吧

如果我选择ImageCache presets为 Original，Original是原始图片的大小，我用于示例的图片是img_1273.jpg，尺寸：1600x1067

我设定的最大600像素宽度生效了，再来看看保存发布后的效果吧

这个图片可只是将图片的显示尺寸设为width="600" height="400"，而是实实在在的一张600x400的图片

Image Resize Filter 模块会在你的文件系统创建一个resize的目录，例如我的文件系统在sites\default\files，这张600x400的图片会放在sites\default\files\resize\article目录下，并命名为img_1273-600x400.jpg，article目录是以内容类型命名的。

以上示例都是在纯文本编辑模式测试的，我在wysiwyg下的fckeditor编辑器下测试，一样支持。

我罗嗦了一大堆，其实过程很简单，希望能看懂！

2009年6月24日星期三

修改注册表解决Office2003正版验证

之前安装office2003后就懒得去更新，主要平时使用率极少。今天有心情去安装了更新，结果出现验证失败的信息。在网上搜了一下，终于找到了解决办法，十分感谢作者。

修改注册表有风险，切记在修改之前备份注册表啊！

以下是原文的解决办法

电脑屏幕左下角按“开始”，点“运行”，输入regedit，打开注册表编辑器定位到[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Office\11.0\Registration]
找到类似{90110804-6000-11D3-8CFE-0150048383C9}的主键，一般 Registration 下只有一个，删除该键中的 ProductID 和 DigitalProductID 两项，关闭注册表编辑器，运行 Office 2003 中任一组件，比如 Word，将弹出安装程序，要求输入 Product Key，此时再输正版序列号FTYBP-J2B4K-K7JHY-3JG2K-MT9VM，回车。

再去微软网站试试，OK，验证成功。

以下是我个人的注解

作者讲{90110804-6000-11D3-8CFE-0150048383C9}的主键，一般 Registration 下只有一个

而我的注册表中有2个，不知是什么缘故，无奈我是2个一起改，其他的都是按照上面方法，成功通过验证！

2009年6月20日星期六

IE 7 lang filter hack

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-hans" lang="zh-hans">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>IE 7 lang filter hack</title>
	<style type="text/css">
	.item {color: #000000;}
	html>body .item {color: #CC33CC;}
	*:lang(zh) .item{color: #666666;}
	.item:empty {color: #666666 !important} 
	</style>
</head>

<body lang="zh">
<p class="item">在这里IE7是紫色#CC33CC，IE6是黑色#000000，Firefox是灰色#666666</p>
</body>
</html>

css-hacks-important

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>CSS Hacks - !important</title>
  <style type="text/css">
   p{
    background: green !important;
    background: red;
   }
  </style>
 </head>
 <body>
  <p>Test</p>
 </body>
</html>

playts