Add one of the following codes to the child themes functions.php
/* START Change portfolio image thumbnail size */
function nw_portfolio_thumbnail_width( $width ) {
return "380"; //portfolio thumbnail width
}
add_filter( 'et_pb_portfolio_image_width',
'nw_portfolio_thumbnail_width');
function nw_portfolio_thumbnail_height( $height ) {
return "auto"; //portfolio thumbnail height
}
add_filter( 'et_pb_portfolio_image_height',
'nw_portfolio_thumbnail_height');
/* END Change portfolio image thumbnail size */
Code language: PHP (php)Square images
// make square portfolio images
add_filter( 'et_pb_portfolio_image_height', 'portfolio_size_h'
);
add_filter( 'et_pb_portfolio_image_width', 'portfolio_size_w' );
function portfolio_size_h($height) {
return '**9999**';
}
function portfolio_size_w($width) {
return '**9999**';
}
Code language: PHP (php)Alternative
Keep the thumbs as is, but stop Divi from cropping the image.
// START remove Divi Portfolio and Filterable Portfolio featured image crop
function pa_portfolio_image_width($width) {
return '9999';
}
function pa_portfolio_image_height($height) {
return '9999';
}
add_filter( 'et_pb_portfolio_image_width', 'pa_portfolio_image_width' );
add_filter( 'et_pb_portfolio_image_height', 'pa_portfolio_image_height' );
// END remove Divi Portfolio and Filterable Portfolio featured image crop
Code language: PHP (php)Then, use CSS to specify the image ratio. Add this to the free form custom CSS.
Source: https://www.peeayecreative.com/change-the-divi-portfolio-image-aspect-ratio/
Square
/* portfolio image aspect ratio square 1:1 */
selector .et_portfolio_image {
padding-top: 100%;
display: block;
}
selector .et_portfolio_image img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Code language: CSS (css)Landscape 16:9
Calculate the percentage used in padding-top: 9/16 = 0.5625 = 56,25%
/* portfolio image aspect ratio landscape 16:9 */
selector .et_portfolio_image {
padding-top: 56.25%;
display: block;
}
selector .et_portfolio_image img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Code language: CSS (css)Landscape 4:3
Calculate the percentage used in padding-top: 3 / 4 = 0.75 = 75%
/* portfolio image aspect ratio landscape 4:3 */
selector .et_portfolio_image {
padding-top: 75%;
display: block;
}
selector .et_portfolio_image img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Code language: CSS (css)Portrait 3:4
Calculate the percentage used in padding-top: 4 / 3 = 1.3334 = 133.34%
/* portfolio image aspect ratio portrait 3:4 */
selector .et_portfolio_image {
padding-top: 133.33%;
display: block;
}
selector .et_portfolio_image img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Code language: CSS (css)