Flex Square Boxes when images have different height

Is not a help request. Is a contribution. A tip to have square boxes when images are not square.

Defaults values to display are:
‘title’ => ‘Instagram’,
‘username_hashtag’ => ”,
‘photos_number’ => 9,
‘columns’ => 3,
‘photo_space’ => 1,
‘container_size’ => 300,
‘transient_time’ => DAY_IN_SECONDS,
‘link_text’ => __( ‘Follow’, ‘meks-easy-instagram-widget’ ),

If you move the values to display an instance the formula to calculate the container_size is:

( $container_size – ( $photo_space * ( $columns – 1 ) ) ) / $columns )

Using the defaults:

( 300 – ( 1 * ( 3-1 ) ) ) / 3 ).

Image width: 99.333

The smaller image from instagram small size is 150px.

If images on the feed does not have a square proportion the grid is horrible. To solve this i add this styles on tag using plugin editor. Take it easy, dont feel afraid, you can reinstall the plug in if you break this.

1. Select Meks easy instagram widget.
2. Select and open widget_html.php under views section
3. Searc <img tag
4. Replace the line for this:

” alt=”<?php echo esc_attr( $photo[‘caption’] ); ?>” style=”object-fit: cover; max-height: min-content; height: <?php echo absint( $instance[‘container_size’]/$instance[‘columns’] ); ?>px; width: <?php echo absint( $instance[‘container_size’]/$instance[‘columns’] ); ?>px;”>

This will change the grid view to square images fitting the image, all with same width and height.

Is important to notice that is not responsive but you can change the flex flow to fix it.

Et Voila!