Divi 图片库：悬停时显示标题答案

【问题标题】：Divi image gallery: display title on hoverDivi 图片库：悬停时显示标题
【发布时间】：2017-12-29 11:49:46
【问题描述】：

我有一个使用 Wordpress Divi 主题构建的摄影网站。使用图库模块，我构建了一些照片主题页面。

目前，当您将鼠标悬停在图库中的图像缩略图上时，它会覆盖不透明的颜色和图标。我想将此图标替换为在 Wordpress 媒体库中设置的图像标题（我认为是 mfr-title）。

注意：当您单击图库中的图像时，它会打开一个灯箱，其图像标题位于左下角 - 因此标题在某处是 html 可读的。

我扫描了堆栈上的所有文章，this question 类似，但对于 Divi Portfolio 模块而不是 Gallery 模块，我不太清楚如何调整解决方案以适应。

我们将不胜感激。

链接到我的网站画廊：http://27.54.88.129/~mattsh39/between-worlds/

【问题讨论】：

您想完全禁用鼠标悬停时当前显示的图标吗？

标签： css wordpress image image-gallery

【解决方案1】：

我已经通过自定义代码解决了这个问题， 转到主题文件夹 > 包含 > builder > main-modules.php
行号：846-857

$image_output = sprintf(
                '<a href="%1$s" title="%2$s">
                    <img src="%3$s" alt="%2$s" />
                    <span class="et_overlay%4$s"%5$s></span>
                </a>',
                esc_url( $attachment->image_src_full[0] ),
                esc_attr( $attachment->post_title ),
                esc_url( $attachment->image_src_thumb[0] ),
                ( '' !== $hover_icon ? ' et_pb_inline_icon' : '' ),
                $data_icon
            );

用下面给出的代码替换上面的代码

$image_output = sprintf(
                '<a href="%1$s" title="%2$s">
                    <img src="%3$s" alt="%2$s" />
                    <div class="et_overlay%4$s"%5$s><span>%6$s</span></div>
                </a>',
                esc_url( $attachment->image_src_full[0] ),
                esc_attr( $attachment->post_title ),
                esc_url( $attachment->image_src_thumb[0] ),
                ( '' !== $hover_icon ? ' et_pb_inline_icon' : '' ),
                $data_icon,wptexturize($attachment->post_title)
            );

将此 css 代码添加到您的自定义 css 选项中：

div.et_overlay span {
text-align: center;
display: block;
position: absolute;
top: 50%;
width: 100%;
}

标题会出现在悬停上。您会发现标题问题也出现在图像下方，并且图标也出现了。为此，您可以在模块中添加一个自定义类并通过 css 编码处理它示例：

.my_gallery h3.et_pb_gallery_title{
display:none;
}

【讨论】：

您好 Prakesh，感谢您抽出宝贵时间回复。我正在研究一个子主题，并试图将 main-modules.php 文件复制到我的子主题中，以便我可以编辑它，但我正在努力这样做。我有 FTP 访问权限，但是当我将它复制到我的子主题（divi-child/includes/builder）时，该文件不会显示在那里。你能在这里提供任何指导吗？我已经做了相当多的谷歌搜索，但无法弄清楚。再次感谢您的帮助。

【解决方案2】：

首先你要正确地创建一个子主题在子主题中创建 Include 文件夹在 Include 文件夹中创建 Builder 文件夹现在复制 Builder 文件夹中的 main-modules.php 文件。

现在将此代码添加到子主题functions.php，以便它覆盖父主题main-modules.php。

if ( ! function_exists( 'et_builder_add_main_elements' ) ) :
function et_builder_add_main_elements() {
require ET_BUILDER_DIR . 'main-structure-elements.php';
include ( get_stylesheet_directory() . '/includes/builder/main-modules.php');
do_action('et_builder_ready');
}
endif;

【讨论】：