Set Height and/or Width of Each Image Cropped and Centered

Set all images to a specific height and width or a specific height and fluid width with the image cropped and centered. Please see the two methods below:

1) Set a static height with a fluid width for each image:

Custom CSS:

Add this to your preferred custom CSS location or stylesheet. One option is the default additional CSS location found at WordPress Dashboard > Appearance > Customize > Additional CSS.

#cff .cff-photo, #cff .cff-html5-video, #cff .cff-event-thumb{ 
    height: 200px;
    width: 100%;
}
.cff-multiple{ overflow: hidden; }

The “200px” number is what you want the height of each image to be.

Custom Javascript:

Add this JavaScript to your site. This can be done manually using a custom JavaScript plugin. For further information see our documentation here.

$('.cff-photo, .cff-html5-video, .cff-event-thumb').each(function(){
  $(this).find('img, video').hide();
  $(this).css({
    'background' : 'url(' + $(this).find('img').attr('src') + ') no-repeat center center',
    'background-size' : 'cover'
  });
});

2) Set a static height and width for each image and video:

CSS:

@media all and (min-width: 535px){ 
  #cff .cff-photo,
  #cff.cff-half-layout .cff-photo,
  #cff.cff-thumb-layout .cff-photo,
  #cff .cff-html5-video,
  #cff.cff-half-layout .cff-html5-video,
  #cff.cff-thumb-layout .cff-html5-video {
    position: relative !important;
    width: 50% !important;
    height: 300px !important;
    overflow: hidden !important;
  }
  #cff .cff-photo img,
  #cff.cff-half-layout .cff-photo img,
  #cff.cff-thumb-layout .cff-photo img,
  #cff .cff-html5-video video,
  #cff.cff-half-layout .cff-html5-video video,
  #cff.cff-thumb-layout .cff-html5-video video {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    height: 100%;
    width: auto;
    max-width: none;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }

  #cff .cff-photo img.portrait, 
  #cff.cff-half-layout .cff-photo img.portrait,
  #cff.cff-thumb-layout .cff-photo img.portrait, 
  #cff .cff-html5-video video.portrait, 
  #cff.cff-half-layout .cff-html5-video video.portrait, 
  #cff.cff-thumb-layout .cff-html5-video video.portrait { 
    position: absolute !important; 
    left: 50% !important;
    top: 50% !important; 
    height: auto; 
    width: 100%; 
    max-width: none; 
    -webkit-transform: translate(-50%,-50%); 
    -ms-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%); 
  }

  #cff.cff-half-layout .cff-text-wrapper { 
  width: 49%;
  }
}

Javascript:

$('#cff .cff-photo img').each(function(){
    var $self = $(this);
    if ($self.width() < $self.height()) {
        $self.addClass('portrait');
    }
});
$('#cff video').each(function(){
    var $self = $(this);
    if ($self.width() < $self.height()) {
        $self.addClass('portrait');
    }
});

The blue number is the minimum width of the device for this code to take effect.

The red numbers are the width and height of each image.

The yellow number is the width of the text element associated with the post.

Couldn’t find your answer in the docs?

Contact Support