沉冰浮水

沉冰浮水

做最终到的事,成为最终成为的人!
github
bilibili
mastodon
zhihu
douban

"Some Notes on Thumbnails in Z-BlogPHP 1.7"

Z-BlogPHP 1.7 will provide a Thumb base class that only implements the conversion and saving from "original image" to "thumbnail image", in other words, it automatically helps you reduce the size.

The generated path is zb_users/cache/thumbs/.

Example of usage within the theme#

function ActivePlugin_acgME()
{
  Add_Filter_Plugin('Filter_Plugin_ViewList_Template', 'acgME_Main');
  Add_Filter_Plugin('Filter_Plugin_Post_Thumbs', 'acgME_Thumbs');
  Add_Filter_Plugin('Filter_Plugin_Zbp_BuildTemplate', 'acgME_BuidTemp');
}
function acgME_Main(&$template)
{
  global $zbp;
  // Traverse articles to set images
  if ($articles = $template->GetTags('articles')) {
    foreach ($articles as $article) {
      acgME_SetIMG($article);
    }
  }
  // else if ($article = $template->GetTags('article')) {
  //   acgME_SetIMG($article);
  // }
}
// Interface function
function acgME_Thumbs($article, &$all_images, $width, $height, $count, $clip)
{
  $rndNum = $article->ID % 19 + 1;
  $rndImg = acgME_Path("v-noimg", "host") . $rndNum . ".jpg";
  // $all_images contains images in the article content, which may be empty, so add a default image;
  $all_images[] = $rndImg;
  Thumb::changeDefaultImg($rndImg); // Use this when there is an image but thumbnail creation fails;
}
// Assign value to property through encapsulated function for calling
function acgME_SetIMG(&$article)
{
  if (!isset($article->Img_640x360)) {
    $article->Img_640x360 = $article->Thumbs(640, 360, 1, false)[0];
    // ↑ The value obtained here cannot be saved, please use Metas to save
  }
}
// For slides
function acgME_BuidTemp(&$templates)
{
  global $zbp;
  // Slides
  $templates['n-slide'] = "";
  if (!$zbp->template->HasTemplate("m-slide")) {
    return;
  }
  $uFile = acgME_Path("u-slide");
  if (!is_file($uFile)) {
    return;
  }
  // Core part
  $slides = json_decode(file_get_contents($uFile));
  foreach ($slides as $key => &$item) {
    $item->Img_142x80 = Thumb::Thumbs([$item->Img], 142, 80, 1, false)[0];
    $item->Img_647x404 = Thumb::Thumbs([$item->Img], 647, 404, 1, false)[0];
  }
  $zbp->template->SetTags('slides', $slides);
  $templates['n-slide'] = $zbp->template->Output("m-slide");
  $script = $zbp->host . 'zb_users/theme/acgME/script/swiper-3.4.2.jquery.min.js';
  $templates['n-slide'] .= '{php}$footer .= \'<script src="' . script .'"></script>\'{/php}';
  $script = $zbp->host . 'zb_users/theme/acgME/script/swiper-act.js';
  $templates['n-slide'] .= '{php}$footer .= \'<script src="' . $script . '"></script>\'{/php}';
}

Calling within the template:

<div class="post-img"><img src="{$article.Img_640x360}" alt="{$article.Title}"></div>

Code notes on image cropping#

  public function handle()
  {
    if ($this->shouldClip) {
      // Original image: width/height
      $src_scale = ($this->srcWidth / $this->srcHeight);
      // New image: width/height
      $dst_scale = ($this->dstWidth / $this->dstHeight);

      // Height: original/new
      $h_scale = ($this->srcHeight / $this->dstHeight);
      // Width: original/new
      $w_scale = ($this->srcWidth / $this->dstWidth);

      // Target width for cropping the original image (horizontal)
      $w_des = ($this->dstWidth * $h_scale);
      // Target height for cropping the original image (vertical)
      $h_des = ($this->dstHeight * $w_scale);

      // Determine cropping direction based on the change in scale
      if ($src_scale >= $dst_scale) {
        // 24:15 // Original image 8:5
        // 12:10 // Target 6:5
        // x:15 = 12:10
        // x = 18 = 12*(15/10) = 15*(12/10) // $w_des
        // Keep the height of the original image and crop the width to $w_des
        $dst_widthx = (($this->srcWidth - $w_des) / 2); // ((24-18)/2)
        $this->clip($dst_widthx, 0, $w_des, $this->srcHeight);
        // Crop the original image to 18:15 and then scale it to 12:10
        $this->zoom($this->dstWidth, $this->dstHeight);
      } else {
        // 24:15 // Original image 8:5
        // 40:20 // Target 10:5
        // 24:y = 40:20
        // y = 12 = 20*(24/40) = 24/(40/20) // $h_des
        // Keep the width of the original image and crop the height to $h_des
        $dst_heighty = (($this->srcHeight - $h_des) / 2); // ((15-12)/2)
        $this->clip(0, $dst_heighty, $this->srcWidth, $h_des);
        // In theory, when the target size is larger than the original image size, you can choose to return an image with a size of 24:12, which is the size obtained from the previous step of cropping
        $this->zoom($this->dstWidth, $this->dstHeight); // In reality, it will return an image with a size of 24:15
      }
    } else {
      $this->zoom($this->dstWidth);
    }
    $this->save();
    imagedestroy($this->srcRes);
  }

Others#

[Memo] Prevent others from using iframe to call your page_Computer Network_沉冰浮水:

https://www.wdssmq.com/post/20160730633.html

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.