Question

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

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

注意：当您点击图库中的图片时，它会打开一个灯箱，图片标题位于左下角 - 所以标题是html可读的，某处。

我已经扫描了堆栈上的所有文章，this question类似，但对于Divi Portfolio模块而不是Gallery模块，我无法弄清楚如何使解决方案适应。

这里的任何帮助都会非常感激。

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

Answer 1

我已通过自定义代码修复了此问题，转到主题文件夹＆gt;包括＆gt;建设者＆gt;主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; }

Answer 2

首先，您要正确创建子主题在子主题内创建Include文件夹在Include文件夹中创建Builder文件夹现在将main-modules.php文件复制到Builder文件夹中。

现在将此代码添加到Child主题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;

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

2 个答案: