Make the Height of Masonry Boxes Fixed size

Question

the website is the following: http://smokingdesigners.com

I have a problem with the masonry view of my pages.

I have recently changed my theme to a new one and my old theme used to add automatically on every article the "more" tag in order to crop my articles to fit to their masonry, So I have never actually added the "more" tag in more than 1200 articles.

My new theme is cropping the articles weird and that causes my page to be messed up because one box has height lets say 600 (including the picture) and the other 450 and it doesn't look good. (link with problem http://smokingdesigners.com/page/10/ )

Is there a way to make a fixed size boxes with heigh 575 lets say?

here is my masonry theme code..

  $def_teaser_width = ( $dtw = get_option('wpb_post_teaser_width') ) ? $dtw : 'two-third';

if ( get_option('wpb_blog_layout') == __("Masonry", "wpb") ) {
    $gallery_style = 'masonry';
} else {
    $gallery_style = 'fluid';
}

if ( $_GET['style'] == 'masonry' ) {
    $gallery_style = 'masonry';
} else if ( $_GET['style'] == 'fluid' ) {
    $gallery_style = 'fluid';
}

$holder_class = ( $gallery_style == 'masonry' ) ? 'masonry_blocks' : 'float_blocks';

?>



    
        
        
        ID, "_teaser_width", true) ) ? $tw : $def_teaser_width;
        $teaser_width = ( $teaser_width == 'default' ) ? $def_teaser_width : $teaser_width;
        //$teaser_width = ($teaser_w = get_post_meta($post->ID, "_teaser_width", true)) ? ' '.$teaser_w : ' one-half';
        if ( $teaser_width == 'one-third' || ( $gallery_style == 'masonry' && $teaser_width == 'one-half' )) {
            $th_w = 320;
            $th_h = 180;
        }
        else if ( $teaser_width == 'one-half' ) {
            $th_w = 495;
            $th_h = 278;
        }
        else if ( $teaser_width == 'two-third' || ( $gallery_style == 'masonry' && $teaser_width == 'full-width' ) ) {
            $th_w = 670;
            $th_h = 377;
        }
        else if ( $teaser_width == 'full-width' ) {
            $th_w = 1020;
            $th_h = 574;
        }

        $content_type = (get_option('wpb_full_content') == 'true') ? ' full_content_in_blog' : '';
        $has_thumbnail = '';
        if (has_post_thumbnail() == false) { $has_thumbnail = ' no_thumbnail'; }
        ?>
        >
            ID, "_p_video", true);

            $youtube = strpos($p_video, 'youtube.com');
            $vimeo = strpos($p_video, 'vimeo');
            if ( $youtube || $vimeo ) : ?>
            
            ';
                }
                else if ( $vimeo ) {
                    preg_match('#vimeo.com/([A-Za-z0-9\-_]+)?#s', $p_video, $matches);
                    echo '';
                }
            ?>



HERE IS FUNCTIONS.PHP FILE.

 'portfolio_category', 'posts' => NULL, 'echo' => true, 'filter_text' => __('Filter:', 'wpb_framework') );
    $args = wp_parse_args( $args, $defaults );
    $args = (object) $args;

    if ( $args->posts == NULL) {
        global $wp_query;
        $args->posts = $wp_query->posts;
    }

    $categories_slugs_array = array();
    $categories_names_array = array();
    foreach ($args->posts as $p) {
        $post_categories_array = wpb_get_post_categories(array('taxonomy' => $args->taxonomy, 'pid' => $p->ID));
        if ( $post_categories_array ) {
            $categories_slugs_array[$p->ID] = array();
            $categories_names_array[$p->ID] = array();
            if ( $post_categories_array['slug'] != NULL ) {
                $categories_slugs_array[$p->ID] = array_unique( array_merge($post_categories_array['slug'], $categories_slugs_array[$p->ID]) );
                $categories_names_array[$p->ID] = array_unique( array_merge($post_categories_array['name'], $categories_names_array[$p->ID]) );
            }
        }
    }

    $all_cats = array(); $all_slugs = array();

    foreach ( $categories_names_array as $c ) { $all_cats = array_unique( array_merge( $all_cats, $c ) ); }
    foreach ( $categories_slugs_array as $c ) { $all_slugs = array_unique( array_merge( $all_slugs, $c ) ); }

    $filter = '';
    if ( count($all_cats) > 0 ) :
        $filter .= '';
        $filter .=  ''.$args->filter_text.' '. __("All", "wpb_framework") .'';          
        for ( $i = 0; $i < count($all_cats); $i++) {
            $filter .= ''.$all_cats[$i].'';
        }
        $filter .= '';
        unset($i);
    endif;

    return array('links' => $filter, 'categories_slugs_array' => $categories_slugs_array);
    /*if ( $args->echo ) {
        echo $filter;
    } else {
        return $filter;
    }*/
}
}

/* Get video or thumbnail
---------------------------------------------------------- */
if (!function_exists('wpb_get_video_or_thumbnail')) {
function wpb_get_video_or_thumbnail( $args = array() ) {
    $defaults = array( 'pid' => NULL, 'width' => 300, 'height' => 'proportional', 'force_image' => false, 'video_height' => 250, 'img_class' => NULL, 'echo' => true, 'before' => '', 'after' => '' );
    $args = wp_parse_args( $args, $defaults );
    $args = (object) $args;

    if ($args->pid == NULL) {
        global $post;
        $pid = $post->ID;
    } else {
        $pid = $args->pid;
    }

    $has_thumbnail = '';
    if ( has_post_thumbnail($pid) == false ) { $has_thumbnail = ' no_thumbnail'; }

    $video_w = $args->width;
    $video_h = $args->video_height;
    $p_video = get_post_meta($pid, "_p_video", true);

    $hide_image = get_post_meta($pid, "_hide_image", true);

    $youtube = strpos($p_video, 'youtube.com');
    $vimeo = strpos($p_video, 'vimeo');
    if ( ($youtube || $vimeo) && !$args->force_image ) : ?>
    
    before.''.$args->after;
        }
        else if ( $vimeo ) {
            preg_match('#vimeo.com/([A-Za-z0-9\-_]+)?#s', $p_video, $matches);
            echo $args->before.''.$args->after;
        }
    ?>
    
    
    force_image == true
    ) :
    $th_id = get_post_thumbnail_id($pid);
    $image_src = wp_get_attachment_image_src( $th_id, 'full' );
    if ( $args->height == 'proportional' ) {
        $th_h = round($video_w/$image_src[1] * $image_src[2]);
    } else {
        $th_h = $args->height;
    }

    $image = wpb_resize( $th_id, '', $video_w, $th_h, true );
    $html  = $args->before . 'img_class ) ? ' class="'. $args->img_class .'"' : '';
    $html .= ' src="'. $image['url'] .'" alt="" />'. $args->after;
    if ($image['url'] && $args->echo) :
        echo $html;
    else:
        return $html;
    endif; ?>
    
 '', 'prev_txt' => '', 'extra_class' => '' );   
    $args = wp_parse_args( $args, $defaults );
    $args = (object) $args;

    global $wp_query;
    if ( $wp_query->max_num_pages > 1 ) :
    if ($args->next_txt == '') $args->next_txt = '< ' . __('Previous posts', 'wpb_framework');
    if ($args->prev_txt == '') $args->prev_txt = __('Next posts', 'wpb_framework') . ' >';
    if ($args->extra_class != '') $args->extra_class = ' ' . $args->extra_class;
    ?>
    
        next_txt); previous_posts_link($args->prev_txt); ?>
    
max_num_pages;
         if ( !$pages ) {
             $pages = 1;
         }
     }   

     if ( 1 != $pages ) {         
         echo "";         
         //if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "«";
         //if($paged > 1 && $showitems < $pages) echo "‹";

         for ( $i=1; $i <= $pages; $i++ ) {
             if ( 1 != $pages && ( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) {
                 echo ( $paged == $i ) ? "". $i ."" : "". $i ."";
             }
         }

         if ($paged < $pages && $showitems < $pages) previous_posts_link('←');  
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) next_posts_link('→');

         //if ($paged < $pages && $showitems < $pages) echo "›";  
         //if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "»";

         echo "
";
     }
}
}

/* Receives taxonomy name as argument and returns array
   with tags objects
---------------------------------------------------------- */
if ( !function_exists('wpb_tags') ) {
function wpb_tags( $args = array() ) {
    $defaults = array( 'pid' => NULL, 'tag_vocab' => '', 'echo' => true, 'before' => '', 'separator' => '', 'after' => '' );
    $args = wp_parse_args( $args, $defaults );
    $args = (object) $args;

    if ($args->pid == NULL) {
        global $post;
        $pid = $post->ID;
    } else {
        $pid = $args->pid;
    }

    if ($args->tag_vocab != '') {
        $output = get_the_term_list($pid, $args->tag_vocab, $args->before, $args->separator, $args->after);
    } else {
        $c_arr = array();
        $tags_arr = get_the_tags();
        if ($tags_arr) {
            foreach($tags_arr as $tag) {
                $c_arr[] = $args->before.'' . $tag->name . ''.$args->after;
            } 
            $output = implode($args->separator, $c_arr);
        }
    }

    if ($output and $args->echo) {
        echo $output;
    } else if ($output) {
        return $output;
    }
}
}


/* 
---------------------------------------------------------- */
if (!function_exists('wpb_get_post_category_names')) {
function wpb_get_post_categories( $args = array() ) {
    $defaults = array( 'taxonomy' => '', 'pid' => NULL, 'echo' => TRUE );
    $args = wp_parse_args( $args, $defaults );
    $args = (object) $args;

    if ( $args->pid == NULL ) {
        global $post;
        $args->pid = $post->ID;
    }

    if ( $args->taxonomy != '' ) {
        $terms = wp_get_object_terms($args->pid, $args->taxonomy);
    }
    if ( $terms ) {
        $term_output = array();
        $names = array();
        $slugs = array();

        foreach ( $terms as $term ) {
            $names[] = $term->name;
            $slugs[] = $term->slug;
        }
        $term_output['name'] = array_unique($names);
        $term_output['slug'] = array_unique($slugs);

        return $term_output;
    }
}
}

/* Receives taxonomy name as argument and returns array
   with taxonomy objects
---------------------------------------------------------- */
if (!function_exists('wpb_posted_under')) {
function wpb_posted_under( $args = array() ) {
    $defaults = array( 'taxonomy' => '', 'pid' => NULL, 'echo' => TRUE, 'separator' => ', ', 'link' => TRUE );
    $args = wp_parse_args( $args, $defaults );
    $args = (object) $args;

    if ($args->pid == NULL) {
        global $post;
        $args->pid = $post->ID;
    }

    if ($args->taxonomy != '') {
        $terms = wp_get_object_terms($args->pid, $args->taxonomy);
    }
    else {
        $terms = array();
        foreach((get_the_category()) as $category) {
            //get_category_link($category->cat_ID)
            //$category->cat_name
            $terms[] = $category;
        }
    }
    if ($terms) {
        $term_output = '';
        foreach ($terms as $term) {
            //$term_output[] = '' . $term->name . '';
            if ($args->link) {
                $term_output[] = '' . $term->name . '';
            }
            else {
                $term_output[] = $term->name;
            }

        }
        $term_output = implode($args->separator, $term_output);
        if ($args->echo) {
            echo $term_output;
        }
        else {
            return $term_output;
        }
    }
}
}


/* Helper function which returs list of site attached images,
   and if image is attached to the current post it adds class
   'added'
---------------------------------------------------------- */
if (!function_exists('siteAttachedImages')) {
function siteAttachedImages($att_ids = array()) {
    $output = '';

    global $wpdb;
    $media_images = $wpdb->get_results("SELECT * FROM $wpdb->posts WHERE post_type = 'attachment' order by ID desc");
    foreach($media_images as $image_post) {
        $thumb_src = wp_get_attachment_image_src($image_post->ID, 'thumbnail');
        $thumb_src = $thumb_src[0];

        $class = (in_array($image_post->ID, $att_ids)) ? ' class="added"' : '';

        if ($thumb_src) {
            $output .= '
                            
                            '. __('Added', 'wpb_framework') .'
                        ';
        }
    }

    if ($output != '') {
        $output = '' . $output . '';
    }
    return $output;
}
}

/* Helper function. Outputs attached images to the post
   in custom meta section.
---------------------------------------------------------- */
if (!function_exists('metaAttachedImages')) {
function metaAttachedImages($att_ids = array()) {
    $output = '';

    foreach ($att_ids as $img_id) {
        $thumb_src = wp_get_attachment_image_src($img_id, 'thumbnail');
        $thumb_src = $thumb_src[0];

        if ($thumb_src) {
            $output .= '
                        
                        '. __('Added', 'wpb_framework') .'
                    ';
        }

    }

    return $output;
}
}


function getTopLevelCategories() {
    $topCat = array();
    $categories = get_categories('hide_empty=0');
    foreach ($categories as $category) {
        if ($category->parent == 0) {
            $topCat[] = $category->name;
        }
    }
    return $topCat;
}




/* Goldmines from internet
---------------------------------------------------------- */

/* Change Wordpress logo on login screen
---------------------------------------------------------- */
if (!function_exists('wpb_login_head')) {
add_action("login_head", "wpb_login_head");
function wpb_login_head() {
    echo "
    
    ";
}
}


/*
 * Resize images dynamically using wp built in functions
 * Victor Teixeira
 *
 * php 5.2+
 *
 * Exemplo de uso:
 * 
 * 
 * 
 *
 * @param int $attach_id
 * @param string $img_url
 * @param int $width
 * @param int $height
 * @param bool $crop
 * @return array
 */
if (!function_exists('wpb_resize')) {
function wpb_resize( $attach_id = null, $img_url = null, $width, $height, $crop = false ) {

    // this is an attachment, so we have the ID
    if ( $attach_id ) {

        $image_src = wp_get_attachment_image_src( $attach_id, 'full' );
        $file_path = get_attached_file( $attach_id );

    // this is not an attachment, let's use the image url
    } else if ( $img_url ) {

        $file_path = parse_url( $img_url );
        $file_path = $_SERVER['DOCUMENT_ROOT'] . $file_path['path'];

        //$file_path = ltrim( $file_path['path'], '/' );
        //$file_path = rtrim( ABSPATH, '/' ).$file_path['path'];

        $orig_size = getimagesize( $file_path );

        $image_src[0] = $img_url;
        $image_src[1] = $orig_size[0];
        $image_src[2] = $orig_size[1];
    }

    $file_info = pathinfo( $file_path );
    $extension = '.'. $file_info['extension'];

    // the image path without the extension
    $no_ext_path = $file_info['dirname'].'/'.$file_info['filename'];

    $cropped_img_path = $no_ext_path.'-'.$width.'x'.$height.$extension;

    // checking if the file size is larger than the target size
    // if it is smaller or the same size, stop right here and return
    if ( $image_src[1] > $width || $image_src[2] > $height ) {

        // the file is larger, check if the resized version already exists (for $crop = true but will also work for $crop = false if the sizes match)
        if ( file_exists( $cropped_img_path ) ) {

            $cropped_img_url = str_replace( basename( $image_src[0] ), basename( $cropped_img_path ), $image_src[0] );

            $vt_image = array (
                'url' => $cropped_img_url,
                'width' => $width,
                'height' => $height
            );

            return $vt_image;
        }

        // $crop = false
        if ( $crop == false ) {

            // calculate the size proportionaly
            $proportional_size = wp_constrain_dimensions( $image_src[1], $image_src[2], $width, $height );
            $resized_img_path = $no_ext_path.'-'.$proportional_size[0].'x'.$proportional_size[1].$extension;            

            // checking if the file already exists
            if ( file_exists( $resized_img_path ) ) {

                $resized_img_url = str_replace( basename( $image_src[0] ), basename( $resized_img_path ), $image_src[0] );

                $vt_image = array (
                    'url' => $resized_img_url,
                    'width' => $proportional_size[0],
                    'height' => $proportional_size[1]
                );

                return $vt_image;
            }
        }

        // no cache files - let's finally resize it
        $new_img_path = image_resize( $file_path, $width, $height, $crop );
        if ( is_string($new_img_path) == false ) { return ''; }
        $new_img_size = getimagesize( $new_img_path );
        $new_img = str_replace( basename( $image_src[0] ), basename( $new_img_path ), $image_src[0] );

        // resized output
        $vt_image = array (
            'url' => $new_img,
            'width' => $new_img_size[0],
            'height' => $new_img_size[1]
        );

        return $vt_image;
    }

    // default output - without resizing
    $vt_image = array (
        'url' => $image_src[0],
        'width' => $image_src[1],
        'height' => $image_src[2]
    );

    return $vt_image;
}
}

/* Returns current page url
---------------------------------------------------------- */
function curPageURL() {
    $pageURL = 'http';
    if ($_SERVER["HTTPS"] == "on") { $pageURL .= "s"; }

    $pageURL .= "://";

    if ($_SERVER["SERVER_PORT"] != "80") {
        $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
    } else {
        $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
    }

    return $pageURL;
}
?>


---AND FINALLY THE MASONRY FLUID THEME FILE---





    
        
        
        ID, "_teaser_width", true) ) ? $tw : $def_teaser_width;
        $teaser_width = ( $teaser_width == 'default' ) ? $def_teaser_width : $teaser_width;
        //$teaser_width = ($teaser_w = get_post_meta($post->ID, "_teaser_width", true)) ? ' '.$teaser_w : ' one-half';
        if ( $teaser_width == 'one-third' || ( $gallery_style == 'masonry' && $teaser_width == 'one-half' )) {
            $th_w = 320;
            $th_h = 180;
        }
        else if ( $teaser_width == 'one-half' ) {
            $th_w = 495;
            $th_h = 278;
        }
        else if ( $teaser_width == 'two-third' || ( $gallery_style == 'masonry' && $teaser_width == 'full-width' ) ) {
            $th_w = 670;
            $th_h = 377;
        }
        else if ( $teaser_width == 'full-width' ) {
            $th_w = 1020;
            $th_h = 574;
        }

        $content_type = (get_option('wpb_full_content') == 'true') ? ' full_content_in_blog' : '';
        $has_thumbnail = '';
        if (has_post_thumbnail() == false) { $has_thumbnail = ' no_thumbnail'; }
        ?>
        >
            ID, "_p_video", true);

            $youtube = strpos($p_video, 'youtube.com');
            $vimeo = strpos($p_video, 'vimeo');
            if ( $youtube || $vimeo ) : ?>
            
            ';
                }
                else if ( $vimeo ) {
                    preg_match('#vimeo.com/([A-Za-z0-9\-_]+)?#s', $p_video, $matches);
                    echo '';
                }
            ?>
            
            

            
            
            
            
            
            
            

            
                

                
                        
                

                
            
 

            
                
                

                
                    
                    
                
                
            
 
        
 
        
         1 && $gallery_style != 'masonry') : ?>
        ">
        ">
        

        

        
    
 
    ';
        wpb_pagination();
        echo '';
    }
    ?>

Make the Height of Masonry Boxes Fixed size

Answers (1)

Related Questions