如何使用免费的自适应组合WordPress Gallery插件

在本教程中，您将学习如何在网站上使用Portfolio Gallery WordPress插件来过滤和组织大量图像以显示在任何网页上。 此图库插件可让您将不同的图像分配给不同的类别，然后单击顶部的按钮以仅显示特定类别的图像。

我们如何使用它？

这样的插件在很多情况下都可能有用。 例如，一家向潜在买家展示房屋的房地产企业可以使用它过滤不同房间，厨房，内部和外部等的图像。假设网页上总共有50张房屋图像。 任何只想先查看客厅图像的用户都可以通过单击顶部的“客厅”按钮来查看。 在本教程中，我们将学习如何准确地做到这一点以及其他一些事情。

该插件也可能对摄影师有用。 展示他们作品的婚礼摄影师可以使用它来过滤不同婚礼或新娘，新郎，装饰品等的图像。相同的原理可以用来过滤网站上的各种图像。

在这个特定的教程中，我们将使用该插件过滤不同动物的图像。 但是，相同的步骤和技术也可以用于所有其他目的。 现在开始创建画廊。

定义过滤器

一旦安装了插件 ，第一步就是创建不同的过滤器。 理想情况下，必须在上传任何图像之前完成此操作。 您在此处指定的过滤器将用于在您上载图像时对图像进行分类。

在仪表板菜单中，转到投资组合库 ，然后单击过滤器以查看所有现有类别或添加新类别。 最初，只有一个类别-称为All 。 即使将更多类别添加到列表中，也无法删除它。 但是，您可以将All重命名为其他名称。 “ 全部 ”的目的是在网页上显示图库中的所有图像。

您可以单击“过滤器”页面上的“ 添加新类别”按钮以添加新类别。 在我们的案例中，我们将添加三个类别，分别是Lions ， Penguins和Cats 。

将图像添加到图库

一旦添加了所有需要的类别，就可以开始创建自己的画廊。 只需转到Portfolio Gallery> Add New Gallery以添加新画廊。

您可以在顶部指定图库的标题。 标题基本上是为了帮助您识别画廊。 我们将为画廊设置动物摄影的标题。

现在，单击“ 添加图像”部分，然后选择要在图库中显示的所有图像。 您选择的所有图像将具有与之关联的四个输入字段。 这些用于提供有关图像的其他信息。

第一个字段只是一个下拉菜单，用于将上传的媒体标识为图像或视频。 第二个字段是图像的标题，它是根据您上载的图像文件的名称自动生成的。 您还可以将标题更改为所需的任何值。

第三个字段是可选的，它包含指向用户单击图像缩略图后要打开的网页或视频的链接。 对于大多数图像，我们将其保留为空白。 但是，猫的缩略图会将用户带到有关猫的Wikipedia条目。 第四个字段用于指定每个图像的类别。 通过在选择其他类别的同时按Windows中的Control键，可以将单个图像分为多个类别。

配置选项

现在，您可以更改一些配置选项，以更改图库的行为和外观。 您只需要转到“ 配置”选项卡即可。

您在此处看到的第一个设置是缩略图大小。 您可以将其设置为Small ， Medium ， Large或Full Size 。 它可以是当你从很小的变化画廊缩略图大小的值中 ，但缩略图仍具有相同的大小和以前有点混乱。 此设置实际上控制图像的物理尺寸，该图像在网页上显示为缩略图。 这不会更改网页上缩略图占用的区域。

Gallery Thumbnail Size的正确值取决于要在不同设备上显示的列数。 如果要显示12个缩略图列，则缩略图占用的区域会相对较小。 这意味着在这些缩略图中，小图像仍然看起来不错。 但是，如果仅为缩略图创建三列，则选择较大的画廊缩略图大小会更有意义，因为缩略图将占据较大的区域。 在本例中，我们将缩略图大小设置为Medium 。

如前所述，您可以轻松指定要将缩略图划分为的列数。 在我们的案例中，我们将在台式机的三列，平板电脑的两列和移动设备的单列中显示它们。

下一个设置称为“ 图像悬停效果” ，用于在用户将鼠标悬停在图像上时将某些特殊效果应用于图像。 在我们的案例中，我们将其设置为“ 增长阴影” 。 当用户将鼠标悬停在缩略图上时，这将添加微妙的放大效果。

配置选项还允许您显示或隐藏图像缩略图上的标题和编号。 将“ 隐藏缩略图间距”的值设置为“ 是”，因为我们将使用自己的自定义CSS来微调间距和其他方面。

如果转到“ 过滤器”选项卡，您会注意到它仅包含两个设置，称为“ 过滤器背景色”和“ 过滤器标题颜色” 。 它们用于控制出现在每个图库顶部的“按钮”的背景和文本颜色，以过滤图像。 将背景色设置为黑色，将标题颜色设置为白色。

“灯箱”标签仅包含一个选项，可以在用户单击缩略图时显示图像。 这是通过插件随附的Bootstrap灯箱完成的。

现在，您可以单击“ 发布”按钮以保存图库。

该插件会为您创建的每个画廊生成一个简码。 您可以将其复制并粘贴到要显示图库的任何帖子或页面上。

完成本教程中的所有步骤后，您的图库应如下图所示。

编写自定义CSS

我们将在画廊中进行一些更改。 这将帮助您了解将来如何进行更改。

图像标题占据了缩略图上的很多区域。 我们将其缩小并显示在左下角，而不是缩略图的整个宽度。

现在，缩略图紧密地排列在一起。 我们将在它们周围添加一些空间，以使画廊看起来不拥挤。

通过覆盖原始样式规则并添加一些自己的样式规则，我们可以轻松地完成这两项操作。

转到“ 自定义CSS”选项卡并添加以下CSS。

body .item-desc {
    background-color: rgba(0, 0, 0, 0.75);
    text-transform: uppercase;
    font-family: Roboto Slab;
    font-size: 1.5rem;
    padding: 0 6px;
}

body .item_desc_2421 {
    left: 0.5rem !important;
    right: auto !important;
}

body #filter_gallery_2421 .thumbnail_2421 {
    padding: 0.5rem !important;
}

body .simplefilter li {
    font-weight: 600;
    font-family: Passion One;
    text-transform: uppercase;
    font-size: 2rem;
    letter-spacing: 1px;
}

这将对我们的画廊进行所有必要的更改。 最终结果应如下图所示。

最后的想法

在本教程中，我们学习了如何使用免费的Portfolio Gallery WordPress插件在我们的网站上添加带有可过滤图像的画廊。 如您所见，使用此插件创建这样的画廊变得非常容易。 您只需从定义类别开始，然后为每个图像分配一个或多个类别。 这将足以在任何页面上显示功能齐全的图库。 但是，您可以更改不同的配置选项，甚至可以添加自己的自定义CSS以便进一步自定义图库。

翻译自: https://code.tutsplus.com/tutorials/how-to-use-a-free-responsive-portfolio-wordpress-gallery-plugin--cms-34201