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;
}
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>'; ?>
These are the parameters that I have it set to.
$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.
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.
See Question&Answers more detail:
os 
