Meow Gallery Pro v5.2.2

教程
如何创建画廊？答案很简单！使用 WordPress 中的标准工具，您不需要学习任何新东西。有三种方法可以创建一个画廊。通过使用古滕贝格编辑器，标准编辑器或画廊简码。首先，看看设置。

的设置
它们可以通过 Meow Apps > Gallery 菜单访问。您可以在这里设置所有默认设置。如果您不修改任何内容，则布局平铺将用于您的所有画廊。如果您不希望 Meow Gallery 默认接管您的图库，请选取“无”。

在右侧，您可以设置每个布局的默认设置。

创建图库
古滕贝格编辑
如果你已经有画廊，你可以很容易地将它们转换为 Meow Gallery Block，或者你可以简单地从编辑器中添加 Meow GalleryBlock。您可以随意使用不同的设置，视觉外观将实时更新。

Meow Gallery Block
它与古滕贝格和 WordPress 生态系统自然配合使用，并且实际上使用原生 WordPress 简码。这允许您或其他插件修改图库的内容和渲染，这通常是其他插件无法做到的。

在后面有一个短代码的另一个好处是，如果你有一天卸载了 Meow Gallery，出于某种原因，它仍然可以使用原生的 WordPress Gallery 渲染，你将能够将其转换为标准的 Gallery Block。

标准编辑器
如果您仍然使用标准编辑器，您可以单击添加媒体，然后将出现下面的模式。选择创建图库，选择照片并创建新图库。WordPress 的这个核心功能实际上创建了一个短代码 ，因此它也可以与 Meow Gallery 一起使用。

图库简码
您还可以直接使用图库短码。如果你想为你的图库使用一个特定的布局，只需使用布局属性。每个布局都有更多不同的属性，请查看布局页面以发现它们。

下面是可用属性的列表：

大小：缩略图，中，大（或其他定义的大小）
链接：附件（附件页），媒体（文件），无
标题：真或假
orderby：日期或标题
order：descorasc
gutter：建议使用 0 到 100 之间的值
自定义类：您想要使用的自定义类
动画：缩小，放大，淡出，淡入，着色，高亮
对齐：宽，全（这取决于您的主题）
Lightning + Gallery Shortcode
如果你已经安装了 WP/LR Sync，你也可以直接从 Lighthouse 指定一个或你的收藏，就像这样。

有关 WP/LR Sync 的更多信息，请查看此处。

自定义 Meow Gallery
Meow Gallery 将允许高级用户和开发人员越来越多地自定义它。

如果你不知道如何添加自定义代码到 WordPress，请检查 article about 添加自定义 PHP 代码到 WordPress.

修改标题
下面是一个关于 ho 的简单示例

add_filter( 'mgl_caption', 'my_mgl_caption', 25, 4 );

function my_mgl_caption( $caption, $media_id ) {
$media = get_post( $media_id );
if ( empty( $media ) ) {
return "Could not find this media.";
}
return $media->post_title;
}
优化大小（src-set）
如果你想让你的 Meow Gallery 显示像素完美（或者如果你有一个特定的网站设计），你可能想玩尺寸属性。如果你不知道 src-set 是如何工作的，看看这个解释。

add_filter( 'mgl_sizes', 'my_mgl_sizes', 25, 4 );

function my_mgl_sizes( $sizes, $gallery_layout, $attachment, $attr ) {
if ( $gallery_layout === 'justified' ) {
// For the justified layout, we want to set our own sizes for the src-set.
$sizes = '(max-width: 800px) 80vw, 25vw';
}
// $sizes has already been set by Meow Gallery, so it is important to return it
// otherwise it will set it to nothing.
return $sizes;
}
修改 src 使用的大小（src-set）
mgi_media_size 过滤器允许你在 src 中使用不同的大小;如果你这样做，那是因为你可能想使用“full”（原始图像）而不是默认的“large”。

add_filter( 'mgl_media_size', 'my_mgl_media_size', 25, 1 );

function my_mgl_media_size( $size ) {
return 'full';
}
图像的顺序（排序）
如果你想有一个特定的顺序为您的图像，请看看下面的例子。这将简单地颠倒所有图像在画廊中的顺序。.

add_filter( 'mgl_sort', 'my_mgl_sort', 25, 3 );

function my_mgl_sort( $ids, $data, $atts ) {
return array_reverse( $ids );
}
$data 和$atts 变量也是可用的。$data 是一个数组，您可以从中获取$ids 中可用的任何 id 的元数据。$atts 是 gallery 的属性（由简码设置），因此您可以根据 gallery 及其选项以不同的方式处理排序。

下面的例子更复杂，它将按照标题对使用 Tiles 布局的画廊的图像进行排序，而 Massimo 布局的图像将按照拍摄日期进行排序。

class My_Custom_Order_For_Meow_Gallery
{
public $data;

public function __construct() {
add_filter( 'mgl_sort', array( $this, 'my_mgl_sort' ), 25, 4 );
}

function order_by_taken_date( $id_a, $id_b ) {
// We get the information for each id we need to compare
$data_a = $this->data[$id_a];
$data_b = $this->data[$id_b];
// We return the result of the comparison on the created timestamp (taken date)
return $data_b['meta']['image_meta']['created_timestamp'] > $data_a['meta']['image_meta']['created_timestamp'];
}

function order_by_title( $id_a, $id_b ) {
// We get the information for each id we need to compare
$data_a = $this->data[$id_a];
$data_b = $this->data[$id_b];
// We return the result of the comparison on the title
return strcmp( $data_b['meta']['image_meta']['title'], $data_a['meta']['image_meta']['title'] );
}

function order_by_upload_date( $id_a, $id_b ) {
// We get the information for each id we need to compare
$post_a = get_post( $id_a );
$post_b = get_post( $id_b );
// We return the result of the comparison on the created_timestamp
return strcmp( $data_b->post_date, $data_a->post_date );
}

function my_mgl_sort( $ids, $data, $layout, $atts ) {
// Data contains metadata about the media (use printf on it to understand its structure)
$this->data = $data;

// The usort function will order the $ids depending on a function.
// For fun, we pick a different function for the Tiles and Masonry layouts only.
if ( $layout === 'tiles' )
usort( $ids, array( $this, "order_by_title" ) );
else if ( $layout === 'masonry' )
usort( $ids, array( $this, "order_by_taken_date" ) );
return $ids;
}
}

new My_Custom_Order_For_Meow_Gallery();
随机排序
这段代码将允许在简码中使用随机属性。如果此属性存在并设置为 true，则图像将以随机顺序显示。

add_filter( 'mgl_sort', 'random_mgl_sort', 25, 4 );

function random_mgl_sort( $ids, $data, $layout, $atts ) {
if ( isset( $atts['random'] ) && $atts['random'] === 'true' ) {
shuffle( $ids );
}
return $ids;
}
随机化图像
这是相当容易产生随机画廊与喵画廊，这取决于条件，或与特定的设置。在下面的示例中，您将能够从媒体库中随机显示 5 张照片。

class My_Custom_Random_For_Meow_Gallery
{
public $data;

public function __construct() {
add_filter( 'shortcode_atts_gallery', array( $this, 'my_atts_for_random' ), 20, 1 );
}

function my_atts_for_random( $atts ) {
// Un-comment those lines to restrict this behavior (for example, here, the code will be only
// applied if a 'random' attribute is set to 'true' in the shortcode)
// if ( !isset( $atts['random'] ) || $atts['random'] !== 'true' )
// return false;

global $wpdb;
$ids = $wpdb->get_col("SELECT ID FROM $wpdb->posts WHERE post_mime_type = 'image/jpeg' ORDER BY 1 LIMIT 5");
$atts['ids'] = implode( ',', $ids );
return $atts;
}
}

new My_Custom_Random_For_Meow_Gallery();
基于 ACF 字段的图库
如果您想使用 ACF 字段来定义内容中的画廊内容，这很容易实现！下面是你需要添加的代码。

add_filter( 'shortcode_atts_gallery', function( $result, $defaults, $atts ) {
if ( !empty( $atts['acf'] ) ) {
$gallery_id_array = get_field( $atts['acf'], get_the_ID() );
$ids = implode( ',', $gallery_id_array );
$result['ids'] = $ids;
}
return $result;
}, 10, 3 );
请注意，ACF 库字段必须设置为返回 ID，才能使此代码正常工作。然后，你可以简单地使用这种方式的简码，通过提到你喜欢的 ACF 字段。如果每页只使用一个字段，您也可以重写上面的代码，以简单地选择相同的字段。

[meow-gallery acf="my_acf_gallery_field"]