如何编写php函数或设置参数来返回图像的无高度值？ [英] How to code php function or set parameters to return NO height values for images?
问题描述
这个问题来自如何按比例调整图像大小以适合尺寸为200px x 150px的缩略图？，但是因为我觉得它不再是CSS相关的问题，所以我想我会创建一个新问题。我正在尝试按比例将图片缩略图放在这里 http://giantmango.com/contest 。我试着将css img标签设置到下面，但所有图片的大小都是200px x 200px。没有另一个具有200px高度的css行。我怀疑这是另一回事。
This question comes from this How to proportionally size images to fit dimensions of 200px x 150px thumbnail in css?, but since I feel it`s not a CSS related question anymore I thought I would create a new question. I am trying to proportionally fit images into thumbnails here http://giantmango.com/contest. I tried setting the css img tag to the below, but all images have the size of 200px x 200px. There is not another css line that has 200px as a height. I am suspecting it is something else.
img {
max-height: 150px;
max-width: 200px;
}
调用此函数返回图像并认为它可能是这种情况。 / p>
This function is called to return the images and thinking it might be this.
<?php
$content = get_the_content('Concept');
$content = apply_filters('the_content', $content);
list($col_class, $grid_img) = adjust_grid_image(
$content,
$col_w,
$gap_w,
$max_col,
$flg_img_forcelink,
$flg_obj_fit
);
?>
<div <?php post_class('grid-item ' . $col_class); ?> id="post-<?php the_ID(); ?>">
<?php if ($grid_img) echo '<div class="grid-image">' . $grid_img . '</div>'; ?>
这些是我设置的参数。
$col_w = 200; // width of grid column
$gap_w = 7; // padding + margin-right (15+15+5)
$max_col = 5; // max column size (style div.x1 ~ xN)
$flg_img_forcelink = true; // add/overwrite a link which links to a single post (permalink).
$flg_img_extract = true; // in single post page, extract thumbnail link to an original image.
$flg_obj_fit = 'large-fit'; // none | small-fit | large-fit ... how to fit size of object tag.
这是运行adjust_grid_image的functions.php文件，但我不确定它在做什么。这是将我的图像设置为200px x 200px？如果是这样，我必须改变什么参数，以便它不硬编码200px作为图像的高度，所以我可以在css中设置它？
This is the functions.php file that runs adjust_grid_image, but I am unsure of what it is doing. Is this setting my images to 200px x 200px? If so, what parameter must I change in order for it to not hardcode 200px as the height of images so I can set it in the css?
/*
* return class name and image tag (resized w/h attributes) to fit a grid.
*/
function adjust_grid_image($content, $col_w, $gap_w, $max_col, $flg_img_forcelink, $flg_obj_fit) {
global $post;
$col_class_base = 'x';
$col_class = $col_class_base . '1'; // default column-width class
$arr_w = array();
for ($i=0; $i<$max_col; $i++) {
$arr_w[] = ($col_w * ($i+1)) + ($gap_w * $i);
}
$grid_img = '';
$w = $h = 0;
$matches1 = $matches2 = $matches3 = array();
// search *first* img/object tag
preg_match('/<(img|object)(?:[^>]+?)>/', $content, $matches1);
if ($matches1[1] == 'img') {
preg_match('/<img(?:.+?)src="(.+?)"(?:[^>]+?)>/', $content, $matches2);
$img_url = ($matches2[1]) ? $matches2[1] : '';
if ($img_url) {
// first, try to get attributes
$matches_w = $matches_h = array();
preg_match('/width="([0-9]+)"/', $matches2[0], $matches_w);
preg_match('/height="([0-9]+)"/', $matches2[0], $matches_h);
if ($matches_w[1] and $matches_h[1]) {
$w = $matches_w[1];
$h = $matches_h[1];
}
else {
// ... or get original size info.
$upload_path = trim( get_option('upload_path') );
$mark = substr(strrchr($upload_path, "/"), 1); // default mark is 'uploads'
preg_match("#$mark(/.+)$#", $img_url, $split_url);
// split($mark, $img_url)
if ($split_url[1] != null) {
$img_path = $upload_path . $split_url[1];
list($w, $h) = @getimagesize($img_path);
}
}
}
for ($i=0; $i<$max_col; $i++) { // set new width and col_class
if ( ($i >= $max_col - 1) or ($w < $arr_w[$i+1]) ) {
$nw = $arr_w[$i];
$col_class = $col_class_base . ($i+1);
break;
}
}
$nh = (!$w or !$h) ? $nw : intval( ($h * $nw) / $w ); // set new height
$grid_img = $matches2[0];
// add width/height properties if nothing
$flg_no_w = (strpos($grid_img_edit, 'width=') === false);
$flg_no_h = (strpos($grid_img_edit, 'height=') === false);
if ($flg_no_w or $flg_no_h) {
$grid_img_close = (substr($grid_img, -2) == '/>') ? '/>' : '>';
$grid_img_edit = substr( $grid_img, 0, -(strlen($grid_img_close)) );
$grid_img_edit .= ($flg_no_w) ? ' width="0"' : '';
$grid_img_edit .= ($flg_no_h) ? ' height="0"' : '';
$grid_img = $grid_img_edit . $grid_img_close;
}
// replace new width/height properties
$grid_img = preg_replace('/width="(\d+)"/', 'width="'. $nw .'"', $grid_img);
$grid_img = preg_replace('/height="(\d+)"/', 'height="'. $nh .'"', $grid_img);
// check image link
//$chk_imglink = '/(<a(?:.+?)rel="(?:lightbox[^"]*?)"(?:[^>]*?)>)'. preg_quote($matches2[0], '/') .'/';
$chk_imglink = '/(<a(?:.+?)href="(?:.+?\.(?:jpe?g|png|gif))"(?:[^>]*?)>)'. preg_quote($matches2[0], '/') .'/';
if ($flg_img_forcelink) {
$grid_img = '<a href="'. get_permalink() .'" title="' . esc_attr($post->post_title) . '">' . $grid_img . '</a>';
}
else if ( preg_match($chk_imglink, $content, $matches3) ) {
$grid_img = $matches3[1] . $grid_img . '</a>';
}
}
else if ($matches1[1] == 'object') {
preg_match('/<object(.+?)<\/object>/', $content, $matches2);
$matches_w = $matches_h = array();
preg_match('/width="([0-9]+)"/', $matches2[0], $matches_w);
preg_match('/height="([0-9]+)"/', $matches2[0], $matches_h);
if ($matches_w[1] and $matches_h[1]) {
$w = $matches_w[1];
$h = $matches_h[1];
}
else {
$flg_obj_fit = 'none';
}
//set col_class (and new width if in '*-fit' condition)
if ($flg_obj_fit == 'small-fit') {
for ($i=0; $i<$max_col; $i++) {
if ($i >= $max_col -1) {
$nw = $arr_w[$i];
$col_class = $col_class_base . ($i+1);
break;
}
else if ( $w < $arr_w[$i+1] ) {
$nw = $arr_w[$i];
$col_class = $col_class_base . ($i+1);
break;
}
}
}
else if ($flg_obj_fit == 'large-fit') {
for ($i=$max_col -1; $i>=0; $i--) {
if ( $w > $arr_w[$i] ) {
if ($i >= $max_col -1) {
$nw = $arr_w[$i];
$col_class = $col_class_base . ($i+1);
}
else {
$nw = $arr_w[$i+1];
$col_class = $col_class_base . ($i+2);
}
break;
}
if ($i == 0) {
$nw = $arr_w[$i];
$col_class = $col_class_base . ($i+1);
}
}
}
else {
for ($i=0; $i<$max_col; $i++) {
if ($i >= $max_col -1) {
$col_class = $col_class_base . ($i+1);
break;
}
else if ( $w < $arr_w[$i] ) {
$col_class = $col_class_base . ($i+1);
break;
}
}
}
$nh = (!$w or !$h) ? $nw : intval( ($h * $nw) / $w ); // set new height
$grid_img = $matches2[0];
if ($flg_obj_fit == 'small-fit' or $flg_obj_fit == 'large-fit') {
// replace new width/height properties
$grid_img = preg_replace('/width="(\d+)"/', 'width="'. $nw .'"', $grid_img);
$grid_img = preg_replace('/height="(\d+)"/', 'height="'. $nh .'"', $grid_img);
}
}
return array($col_class, $grid_img);
}
感谢您查看所有这些信息。
Thank you for looking at all of this.
推荐答案
这是一些中间函数。代码中可能会有一些其他部分使用此函数的返回值并实际输出HTML。你应该找到这个部分，并评论输出宽度和高度设置的部分。
This is some intermediate function. There will be probably some other part in the code which uses the return value from this function and actually outputs HTML. You should locate this part and comment the piece which output the width and height settings.
请注意，如果您的图像具有可变比例，并且您将它们重新缩放以保持这些比例（通过CSS），它们将不再适合网格。他们看起来会比现在更分散。
Pay attention, though, that if your images have variable proportions and you rescale them mantaining these proportions (via CSS), they will not fit in a grid anymore. They will look more scattered on the page than they are now.
编辑现在您已添加更多详细信息，我认为它应该足够了删除以开头的部分//如果没有添加宽度/高度属性
EDIT Now that you have added more details, I think it should be enough to remove the section starting with the comment // add width/height properties if nothing
这篇关于如何编写php函数或设置参数来返回图像的无高度值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
