没有不值得去解决的问题,也没有不值得去学习的技术!

Fix Blurry Thumbnails After Changing the Maximum Site Width in the Hueman WordPress Theme

Viewing the thumbnail on the homepage, its original size was 720 * 340 px. It has now been scaled up to 1020 * 360 px, making it insufficiently clear

1. Changed the maximum site width of the WordPress theme to 1680 px, as shown in Figure 1.

Changed the maximum site width of the WordPress theme to 1680 px
Figure 1

2. Viewing the thumbnail on the homepage, its original size was 720 * 340 px. It has now been scaled up to 1020 * 360 px, making it insufficiently clear, as shown in Figure 2.

Viewing the thumbnail on the homepage, its original size was 720 * 340 px. It has now been scaled up to 1020 * 360 px, making it insufficiently clear
Figure 2

3. The image URL is https://media.shuijingwanwq.com/2020/01/1-8-720×340.png, and its size is 720 * 340 px. Therefore, an image with a size of 1320×500 px should be used, as shown in Figure 3.

The image URL is https://media.shuijingwanwq.com/2020/01/1-8-720x340.png, and its size is 720 * 340 px. Therefore, an image with a size of 1320×500 px should be used
Figure 3

4. Regenerate Thumbnails for the featured image. At this point, the image URL is https://media.shuijingwanwq.com/2020/01/1-8-1320×481.png, as shown in Figure 4.

Regenerate Thumbnails for the featured image. At this point, the image URL is https://media.shuijingwanwq.com/2020/01/1-8-1320x481.png
Figure 4

5. In the theme editor, edit the file: /wp-content/themes/hueman/content-featured.php. Change the value of col-3cm from thumb-large to thumb-xxlarge. Note: After each theme upgrade, you need to repeat the edit to update this file, as shown in Figure 5.

In the theme editor, edit the file: /wp-content/themes/hueman/content-featured.php. Change the value of col-3cm from thumb-large to thumb-xxlarge. Note: After each theme upgrade, you need to repeat the edit to update this file
Figure 5
PHP

$map = array(
      'col-1c'  => 'thumb-xxlarge',
      'col-2cl' => 'thumb-xlarge',
      'col-2cr' => 'thumb-xlarge',
      'col-3cm' => 'thumb-xxlarge',
      'col-3cl' => 'thumb-large',
      'col-3cr' => 'thumb-large'
);

6. Viewing the thumbnail on the homepage, the image URL is https://media.shuijingwanwq.com/2020/01/1-8-1320×481.png. Its original size is 1320 * 481 px, and it has now been scaled down to 1020 * 371.67 px, making it sufficiently clear and meeting expectations, as shown in Figure 6.

Viewing the thumbnail on the homepage, the image URL is https://media.shuijingwanwq.com/2020/01/1-8-1320x481.png. Its original size is 1320 * 481 px, and it has now been scaled down to 1020 * 371.67 px, making it sufficiently clear and meeting expectations
Figure 6

7. Note: Step 4 can be ignored, as there is no need to manually generate the corresponding thumbnails. Images of the corresponding specifications will be automatically generated after the image is uploaded, as shown in Figure 7.

Note: Step 4 can be ignored, as there is no need to manually generate the corresponding thumbnails. Images of the corresponding specifications will be automatically generated after the image is uploaded
Figure 7

关于作者 · 持续学习与技术实践

我是一名拥有 15 年以上开发经验的技术从业者,自 2013 年起持续运营个人技术博客,记录工作与个人项目中遇到的真实问题,以及解决问题过程中的探索、实践和思考。

除了技术写作,我也在持续开发和维护自己的独立项目,探索新技术和新工具在实际场景中的应用。我始终相信,没有不值得去解决的问题,也没有不值得去学习的技术。

如果这篇文章对你有所帮助,欢迎浏览博客中的其他文章,也欢迎交流技术经验与想法。

关于我  ·  GitHub  ·  邮件联系