Question

我正在为客户开发一个相对简单的Wordpress插件。它用于上传/选择随后在选项变量中保存（作为图像路径）的图像，并用作网站不同类别/页面/等的全背景图像。

由于图像具有“墙纸性质”（即大），我添加了最大宽度为1920像素的自定义图像尺寸（高度设置为“自动”，即没有图像裁剪）。并且该部分也可以在上传时将图像调整为我自定义的1920像素宽度。

现在，问题是，为了上传/选择背景图像，我正在使用新的媒体上传器，除了所选图像（路径）始终用于原始上传图像外，它的工作原理，例如“my-background- image.jpg的”。

我的问题是：有没有办法让用户（或让上传者自动完成）选择原始图像的1920像素大小的版本，例如“my-background-image-1920x1080.jpg”？< / p>

谢谢！

Answer 1

我设法解决了我的问题，与我第一次接触它有点不同 - 但这是一个我更高兴的解决方案。

因此，当您使用新的媒体上传器时，您有一个类似于以下内容的jquery代码： jQuery的（文件）。就绪（函数（$）{ var custom_uploader; $（'。upload_image_button'）。unbind（'click'）。click（function（e）{ e.preventDefault（）; formfieldID = jQuery的（本）.prev（）ATTR（ “ID”）;

    //If the uploader object has already been created, reopen the dialog
    if (custom_uploader) {
        custom_uploader.open();
        return;
    }

    //Extend the wp.media object
    custom_uploader = wp.media.frames.file_frame = wp.media({
        title: 'Choose Image',
        button: {
            text: 'Choose Image'
        },
        multiple: false
    });

    //When a file is selected, grab the URL and set it as the text field's value
    custom_uploader.on('select', function() {
        attachment = custom_uploader.state().get('selection').first().toJSON();
        $('.' + formfieldID).val(attachment.url);
    });

    //Open the uploader dialog
    custom_uploader.open();
});
});

现在，请注意获取所选文件的url的代码部分： $（'。'+ formfieldID）.val（attachment.url）;

这会获取ORIGINAL附件的（图片）网址。因此，要获得其他图像大小，如缩略图，大图等，您可以使用： $（'。'+ formfieldID）.val（attachment.sizes.thumbnail.url）;

最后，您甚至可以使用自己的自定义图片大小： $（'。'+ formfieldID）.val（attachment.sizes.mysize.url）;

但是......我遇到了一个愚蠢但非常耗时的问题：不要给你的自定义图像大小一个用减号分隔的名字，比如“background-image”;因为虽然Wordpress的一部分可以工作（新的图像大小将是可见的和可用的），但媒体上传器的jquery将无法使用它。

如果您需要分隔符，请使用下划线，例如“background_image”它会正常工作！这可能是我初学者的错误，但我认为这可以节省一些时间！：）

新媒体上传器中的自定义图像大小

1 个答案: