Wordpress 默认图库标记与自定义图像尺寸

Question

几个月前，基于 Stack 上的代码和一些用户的支持，我为默认 WP 库创建了自定义 HTML 标记。它包含自定义图像尺寸，它们取决于屏幕宽度尺寸。现在一切正常。我没有更改任何内容，但现在这些新的图像尺寸没有显示。当然，这些缩略图尺寸是生成的，它们适用于主题的其他部分。我的代码如下所示：

add_filter('post_gallery', 'custom_gallery', 10, 2);
function custom_gallery($output, $attr) {
global $post;

if (isset($attr['orderby'])) {
    $attr['orderby'] = sanitize_sql_orderby($attr['orderby']);
    if (!$attr['orderby'])
        unset($attr['orderby']);
}

extract(shortcode_atts(array(
    'order' => 'ASC',
    'orderby' => 'menu_order ID',
    'id' => $post->ID,
    'itemtag' => 'dl',
    'icontag' => 'dt',
    'captiontag' => 'dd',
    'columns' => 3,
    'include' => '',
    'exclude' => ''
), $attr));

$id = intval($id);
if ('RAND' == $order) $orderby = 'none';

if (!empty($include)) {
    $include = preg_replace('/[^0-9,]+/', '', $include);
    $_attachments = get_posts(array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby));

    $attachments = array();
    foreach ($_attachments as $key => $val) {
        $attachments[$val->ID] = $_attachments[$key];
    }
}

if (empty($attachments)) return '';

$output = "<div class=\"gallery-wrapper\">\n";

$output .= "<ul class=\"gallery-elements\">\n";

foreach ($attachments as $id => $attachment) {

    $img = wp_prepare_attachment_for_js($id);

    $url = $img['sizes']['full']['url'];
    $caption = $img['caption'];
    $alt = $img['alt'];

    if (!array_key_exists('columns', $attr) || !intval($attr['columns'])) {
      $output .= "<li class=\"gallery-item gallery-item-3\">\n";
      $url1s =  $img['sizes']['gallery-3col-small']['url'];
      $url1b =  $img['sizes']['gallery-3col-small-retina']['url'];
      $url2s =  $img['sizes']['gallery-3col-medium']['url'];
      $url2b =  $img['sizes']['gallery-3col-medium-retina']['url'];
      $url3s =  $img['sizes']['gallery-3col-bigger']['url'];
      $url3b =  $img['sizes']['gallery-3col-bigger-retina']['url'];
      $url4s =  $img['sizes']['gallery-3col-huge']['url'];
      $url4b =  $img['sizes']['gallery-3col-huge-retina']['url'];
      $url5s =  $img['sizes']['gallery-3col-monster']['url'];
      $url5b =  $img['sizes']['gallery-3col-monster-retina']['url'];
      $output .= 
      "<a href=\"$url\" data-fancybox=\"gallery\" title=\"$alt\">
      <picture class=\"lozad\" data-src=\"$url5s 1x, $url5b 2x\" data-alt=\"$alt\" title=\"$alt\">
      <source media=\"(min-width: 1440px)\" srcset=\"$url5s 1x, $url5b 2x\">
      <source media=\"(min-width: 1024px)\" srcset=\"$url4s 1x, $url4b 2x\">
      <source media=\"(min-width: 768px)\" srcset=\"$url3s 1x, $url3b 2x\">
      <source media=\"(min-width: 425px)\" srcset=\"$url2s 1x, $url2b 2x\">
      <source media=\"(min-width: 300px)\" srcset=\"$url1s 1x, $url1b 2x\">
      </picture>
      </a>";

      if ($caption) { 
          $output .= "<div class=\"gallery-caption \">{$caption}</div>\n";
      }
      $output .= "</li>\n";
    }

    else if ($attr['columns'] == 1) {

      // output for 1 row

    } else if ($attr['columns'] == 2) {

      // output for 2 rows

    } else if ($attr['columns'] == 4) {

      // output for 4 rows
    }
}

$output .= "</ul>\n";
$output .= "</div>\n";

return $output;
}

add_filter( 'use_default_gallery_style', '__return_false' );

此标记有效，但图像 URL 无效。可能是什么问题？

Answer 1

我认为

wp_prepare_attachment_for_js()

默认情况下不包含自定义图像尺寸 - 您需要通过

image_size_names_choose

过滤器包含它们。

我最近在使用此功能时遇到了问题，当时 Advanced Custom Fields Pro 插件删除了对

wp_prepare_attachment_for_js()

的过滤器覆盖 - 这使得所有图像尺寸均可用于

wp_prepare_attachment_for_js()

，并在 ACF 5.8.3 中删除：https： //github.com/AdvancedCustomFields/acf/commit/66b1383e5614188c20fc5ff8ae04bb9dc0e154f6#diff-e2ae20a151c20a3d2975705c600fae75L378。

尝试添加以下内容来添加其他图像尺寸：

<?php
add_filter('image_size_names_choose', function($atts) {
    // Get an array of custom image sizes
    $allImageSizes = wp_get_additional_image_sizes();
    $imageSizes = [];

    // Loop through the custom images, make a suitable array
    foreach ($allImageSizes as $key => $value) {
        $imageSizes[$key] = $key;
    }

    // Merge the new array with the existing, and return
    $atts = array_merge($atts, $imageSizes);
    return $atts;
});