如何接受多种大小和宽高比的图像,并以标准化的图像大小/比例显示?

时间:2018-08-21 作者:davemackey

假设我接受客人提交的帖子。在post archive页面上,我有用户上传的图像,左侧是帖子,右侧是帖子的摘录。

除非我以编程方式阻止用户上载各种大小和纵横比的图像,否则他们肯定会这样做。但人们不希望归档页面上出现各种不同的图像大小,它们的大小/纵横比应该大致相同。

如果大小不同但纵横比相同,解决方案并不太困难,只需选择所需的大小并适当调整图像大小即可。在大多数情况下,这将非常有效(当然会有异常值)。

但是在不同纵横比的情况下呢?在这里,事情变得更加困难。我们是否强制用户将其图像裁剪为纵横比?如果是,如何?我们是否自动将图像裁剪到所需的纵横比?或者我们只是将图像扭曲到所需的维度,而不考虑外观?

很想知道人们是如何通过编程或插件来解决这个问题的。

1 个回复
SO网友:mayersdesign

你是对的,你预测你将任由上传者摆布,他们在尺寸和长宽比方面可以很有创造力!

我的方法是在前端UI中非常详细地说明哪些图像是可以接受的-“请上传标准比例的图像,例如1200x900或800x600。请注意,您的图像将被裁剪为该比例,因此无法……”(等)

如果他们忽略了这一点,那么他们的图像仍然会出现在我的函数文件中,我在其中取消了标准WP图像大小的设置,并设置了自己的大小。它们中有很多是硬裁剪的,所以它是上传的,我恐怕要小心了(我在最后也留下了一些额外的功能):

//Remove all the defaults

function remove_default_image_sizes( $sizes ) {

 //Default WordPress
 unset( $sizes[ \'thumbnail\' ] );
 unset( $sizes[ \'medium\' ] );
 unset( $sizes[ \'medium_large\' ] );
 unset( $sizes[ \'large\' ] );

 //With WooCommerce you can remove these too
 //unset( $sizes[ \'shop_thumbnail\' ]); // Shop thumbnail (180 x 180 hard cropped)
 //unset( $sizes[ \'shop_catalog\' ]); // Shop catalog (300 x 300 hard cropped) 
 //unset( $sizes[ \'shop_single\' ]); // Shop single (600 x 600 hard cropped)

 return $sizes;
}
add_filter( \'intermediate_image_sizes_advanced\',\'remove_default_image_sizes\' );

//Add our new sizes, xome hard cropped...

add_image_size( \'custom-large\', 1200, 900, false);
add_image_size( \'custom-medium\', 800, 600, false);
add_image_size( \'custom-thumb\', 260, 195, false);
add_image_size( \'custom-blog-cropped\', 1200, 500, true );
add_image_size( \'custom-avatar-cropped\', 110, 110, true );

//Bonus functions

// Disable WordPress responsive srcset images
add_filter( \'max_srcset_image_width\', create_function( \'\', \'return 1;\' ) );

//Remove the hardcoded width and height WP loves setting
function remove_img_attr( $html ) {
 return preg_replace( \'/(width|height)="\\d+"\\s/\', "", $html );
}
add_filter( \'post_thumbnail_html\', \'remove_img_attr\' );

结束

相关推荐

https images not displaying

Setup嗨,伙计们!我有个奇怪的问题。我正在使用安装了ssl证书的wordpress Premium BeTheme。Problem问题是,虽然图像是用https上传到网站上的,但它们没有显示出来。如果我手动将图像的URL从https切换到http,它们就会开始显示。What I have done?我尝试过在internet上卸载ssl证书和几乎所有的解决方案,但都没有解决。Here is the URL of the website : https://uptimeelite.com/