正文中插入大图时,让其宽度占满整个内容区宽度

  • A+
所属分类:建博笔记

默认情况下,当我们向正文插入图片宽度大于内容区宽度的大图时,在图片左右两侧会留有空白,就像这样:

插入大图时默认显示效果

我插入的图片尺寸是1200x400,很明显,在图片左右两侧都留有空白。有时,我们需要让这张图片充满整个内容区的宽度,以达到一定的显示效果。

 

常规修改方法

首先:打开【style.css】文件,找到代码

/** 正文 **/
.entry-header h1 {
	position: relative;
	font-size: 16px;
	font-size: 1.8rem;
	line-height: 30px;
	text-align: center;
	margin: 35px -20px 0 -20px;
	padding: 5px 20px;
	border-left: 5px solid #3690cf;
	border-right: 5px solid #3690cf;
}

.header-sub h1 {
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	color: #fff;
	font-size: 18px;
	font-size: 1.8rem;
	padding: 10px 15px;
	max-width: none;
	border-radius: 3px 0 0 0;
	z-index: 2;
	transition-duration: .5s;
	background: #3690cf;
}

#header-img {
	border-radius: 3px;
	transition-duration: .5s;
}

@media screen and (max-width: 600px) {
	#header-img img {
		width: 180%;
		margin: 0 0 0 -50%;
	}

	.header-sub h1 {
		font-size: 16px;
		font-size: 1.6rem;
		padding: 5px 10px;
	}
}

.entry-title-clear {
	margin-bottom: 40px;
}

.single-content {
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.9;
	margin-top: 20px;
}

.single-content p a,
.single-content p a:visited {
	color: #3690cf;
}

.single-content p a:hover {
	color: #444 !important;
}

.single-content p a .be-anchor {
	font-size: 10px !important;
	margin: 0 2px;
}

.single-content p a:hover .be-anchor {
	color: #777;
	animation: blink 0.5s linear infinite;
}

a.fancybox .be-anchor {
	display: none;
}

在其后面添加

.single-content .full_img {
    margin: 0 -20px;
}
@media screen and (max-width:440px) {
    .single-content .full_img {
        margin: 10px -15px;
    }
}

然后:在后台编辑文章时,先切换到【文本】模式,在需要插入图片的位置输入代码

<div class="full_img"></div>

接着:在这段代码中按正常的方式插入图片就可以了。比如:

<div class="full_img">
	<a href="https://isdola.com/wp-content/themes/begin/img/contact.png">
		<img class="aligncenter" src="https://isdola.com/wp-content/themes/begin/img/contact.png" alt="" width="1200" height="400" />
	</a>
</div>

最后:再切换回【可视化】模式,按正常方式编辑文章就好了。

添加代码后的显示效果:

添加代码后的显示效果

添加前后效果对比如下:

添加代码前后效果对比

 

功能集成至后台编辑器

把添加宽图功能集成到后台编辑器,从而免去手动输入代码的麻烦,适用于相同主题的童鞋使用。

首先:打开【inc/inc.php】文件,在适当位置添加

// 插入宽图
function full_img( $atts, $content = null ) {
	extract( shortcode_atts( array (
		'full_img' => '<img class="aligncenter" src="'.$content.'">'
	), $atts ) );
	return '<div class="full_img">'.$full_img.'</div>';
}

然后:在同文件中找到代码

function begin_select(){

在该函数的适当位置插入(将“【】”修改为“[]”,下同)

<option value="【full_img】插入宽图【/full_img】">插入宽图</option>

最后:打开【js/buttons.js】文件,在适当位置添加

ed.addButton( 'full_img', {
    title : '插入宽图',
    icon: 'image',
    onclick : function() {
        ed.selection.setContent('【full_img】插入宽图' + ed.selection.getContent() + '【/full_img】');
    }
});

其中:ico:'image',为该功能图标,可根据需要修改成自己喜欢的。由于不知道后台编辑器如何调用图标,所以使用了【添加相册】的图标。

操作完成后,就可以在后台编辑器和【插入短代码】选项列表中看到新增的【插入宽图】的图标和列表项了,点击该图标/列表项即可实现自动输入<div class="full_img"></div>

因主题升级,代码结构发生变化,本方法已不适用最新主题(但仍保留功能)。
若文章图片、下载链接、网盘密码等信息出错,请留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
isdola

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: