PHP World

首页 > CMS > PHPCMS › PHPCMS V9文章内容页bootstrap图片自适应

PHPCMS V9文章内容页bootstrap图片自适应

一般情况下我们尽力不要修改php程序的源代码来达到我们的目的, 尽力用模板来实现。 PHPCMS的文章内容页图片的style属性控制图片的宽度与高度的,而用bootstrap 图片的img-responsive就不行了;用img-responsive一定要去除img属性的宽度与高度, 这样img-responsivef才能控制图片的大小。 我们知道phpcms文章页的图片的宽度与高度是保存在mysql数据库中的, 可用下边的方法来修改内容页模板文件实现。


我们可用正则表达式实现, 我们先看看正则表达式的替换方法:

默认的phpcms内容页图片是带style属性的,其实只要简单的在内容模版页使用正则匹配下就可删除图片的style属性的,把内容页模板show.html中的{$content}替换成如下代码:

{php preg_replace("/style=\".*?\"/i","",$content); }

重新生成下内容页。这样文章内容页的图片就没有style属性了。


进一步我就可用这原理, 直接将style属性及其值规制为我们想要的图片 class类属性了,把内容页模板show.html中的{$content}替换成如下代码:

<?php
  echo preg_replace("/style=\".*?\"/i","class=\"carousel-inner img-responsive img-rounded center-block\"",$content);
?>

当然我们尽力不要在模板文件中用php代码,用phpcms提供的{php ;}来实现:

{php echo preg_replace("/style=\".*?\"/i","class=\"carousel-inner img-responsive img-rounded center-block\"",$content);}


上边的代码就可实现phpcms用bootstrap的图片自适应功能了, 图片在电脑 及手机的查看效果全是宽度为显示设备宽度的100%。 这在手机下是没什么问题的, 可在电脑上有时可能会由于图片太小而100%显示在电脑上,让图片失真,我们可增加css代码来判断,如是电脑就让图片显示宽度小点,打开文章内容页模板文件show.html, 将

{template "content","header"}

改为:

1.png

演示网站:www.xuyi.cn

上一篇:调用PHPCMS分类id为6的10篇文章

下一篇:返回列表

相关文章