Last active
May 14, 2019 08:40
-
-
Save lots0logs/5a9a3fcbf917fe6f39f2 to your computer and use it in GitHub Desktop.
WordPress :: Divi Builder :: Filterable Portfolio Module :: Show Lightbox On-Click
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/* DON'T copy the first line (above) if your functions.php already has it. | |
* ---------------------------------------------------------------------- */ | |
function my_et_theme_setup() { | |
if ( class_exists( 'ET_Builder_Module_Filterable_Portfolio' ) ) { | |
get_template_part( 'my-main-modules' ); | |
$et_pb_filterable_portfolio = new My_ET_Builder_Module_Filterable_Portfolio(); | |
remove_shortcode('et_pb_filterable_portfolio'); | |
add_shortcode('et_pb_filterable_portfolio', array( $et_pb_filterable_portfolio, '_shortcode_callback' ) ); | |
} | |
} | |
add_action( 'wp', 'my_et_theme_setup', 99 ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
class My_ET_Builder_Module_Filterable_Portfolio extends ET_Builder_Module_Filterable_Portfolio { | |
function shortcode_callback( $atts, $content = null, $function_name ) { | |
$module_id = $this->shortcode_atts['module_id']; | |
$module_class = $this->shortcode_atts['module_class']; | |
$fullwidth = $this->shortcode_atts['fullwidth']; | |
$posts_number = $this->shortcode_atts['posts_number']; | |
$include_categories = $this->shortcode_atts['include_categories']; | |
$show_title = $this->shortcode_atts['show_title']; | |
$show_categories = $this->shortcode_atts['show_categories']; | |
$show_pagination = $this->shortcode_atts['show_pagination']; | |
$background_layout = $this->shortcode_atts['background_layout']; | |
$hover_icon = $this->shortcode_atts['hover_icon']; | |
$zoom_icon_color = $this->shortcode_atts['zoom_icon_color']; | |
$hover_overlay_color = $this->shortcode_atts['hover_overlay_color']; | |
$module_class = ET_Builder_Element::add_module_order_class( $module_class, $function_name ); | |
wp_enqueue_script( 'hashchange' ); | |
$args = array(); | |
if ( '' !== $zoom_icon_color ) { | |
ET_Builder_Element::set_style( $function_name, array( | |
'selector' => '%%order_class%% .et_overlay:before', | |
'declaration' => sprintf( | |
'color: %1$s !important;', | |
esc_html( $zoom_icon_color ) | |
), | |
) ); | |
} | |
if ( '' !== $hover_overlay_color ) { | |
ET_Builder_Element::set_style( $function_name, array( | |
'selector' => '%%order_class%% .et_overlay', | |
'declaration' => sprintf( | |
'background-color: %1$s; | |
border-color: %1$s;', | |
esc_html( $hover_overlay_color ) | |
), | |
) ); | |
} | |
if( 'on' === $show_pagination ) { | |
$args['nopaging'] = true; | |
} else { | |
$args['posts_per_page'] = (int) $posts_number; | |
} | |
if ( '' !== $include_categories ) { | |
$args['tax_query'] = array( | |
array( | |
'taxonomy' => 'project_category', | |
'field' => 'id', | |
'terms' => explode( ',', $include_categories ), | |
'operator' => 'IN', | |
) | |
); | |
} | |
$projects = et_divi_get_projects( $args ); | |
$categories_included = array(); | |
ob_start(); | |
if( $projects->post_count > 0 ) { | |
while ( $projects->have_posts() ) { | |
$projects->the_post(); | |
$category_classes = array(); | |
$categories = get_the_terms( get_the_ID(), 'project_category' ); | |
if ( $categories ) { | |
foreach ( $categories as $category ) { | |
$category_classes[] = 'project_category_' . urldecode( $category->slug ); | |
$categories_included[] = $category->term_id; | |
} | |
} | |
$category_classes = implode( ' ', $category_classes ); | |
$main_post_class = sprintf( | |
'et_pb_portfolio_item%1$s %2$s', | |
( 'on' !== $fullwidth ? ' et_pb_grid_item' : '' ), | |
$category_classes | |
); | |
?> | |
<div id="post-<?php the_ID(); ?>" <?php post_class( $main_post_class ); ?>> | |
<?php | |
$thumb = ''; | |
$width = 'on' === $fullwidth ? 1080 : 400; | |
$width = (int) apply_filters( 'et_pb_portfolio_image_width', $width ); | |
$height = 'on' === $fullwidth ? 9999 : 284; | |
$height = (int) apply_filters( 'et_pb_portfolio_image_height', $height ); | |
$classtext = 'on' === $fullwidth ? 'et_pb_post_main_image' : ''; | |
$titletext = get_the_title(); | |
$thumbnail = get_thumbnail( $width, $height, $classtext, $titletext, $titletext, false, 'Blogimage' ); | |
$thumb = $thumbnail["thumb"]; | |
$thumb_id = get_post_thumbnail_id(); | |
list($full_src, $full_width, $full_height) = wp_get_attachment_image_src( $thumb_id, 'full' ); | |
if ( '' !== $thumb ) : ?> | |
<a href="<?php echo $full_src; ?>" class="et_pb_lightbox_image"> | |
<?php if ( 'on' !== $fullwidth ) : ?> | |
<span class="et_portfolio_image"> | |
<?php endif; ?> | |
<?php print_thumbnail( $thumb, $thumbnail["use_timthumb"], $titletext, $width, $height ); ?> | |
<?php if ( 'on' !== $fullwidth ) : | |
$data_icon = '' !== $hover_icon | |
? sprintf( | |
' data-icon="%1$s"', | |
esc_attr( et_pb_process_font_icon( $hover_icon ) ) | |
) | |
: ''; | |
printf( '<span class="et_overlay%1$s"%2$s></span>', | |
( '' !== $hover_icon ? ' et_pb_inline_icon' : '' ), | |
$data_icon | |
); | |
?> | |
</span> | |
<?php endif; ?> | |
</a> | |
<?php | |
endif; | |
?> | |
<?php if ( 'on' === $show_title ) : ?> | |
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> | |
<?php endif; ?> | |
<?php if ( 'on' === $show_categories ) : ?> | |
<p class="post-meta"><?php echo get_the_term_list( get_the_ID(), 'project_category', '', ', ' ); ?></p> | |
<?php endif; ?> | |
</div><!-- .et_pb_portfolio_item --> | |
<?php | |
} | |
} | |
wp_reset_postdata(); | |
$posts = ob_get_clean(); | |
$categories_included = explode ( ',', $include_categories ); | |
$terms_args = array( | |
'include' => $categories_included, | |
'orderby' => 'name', | |
'order' => 'ASC', | |
); | |
$terms = get_terms( 'project_category', $terms_args ); | |
$category_filters = '<ul class="clearfix">'; | |
$category_filters .= sprintf( '<li class="et_pb_portfolio_filter et_pb_portfolio_filter_all"><a href="#" class="active" data-category-slug="all">%1$s</a></li>', | |
esc_html__( 'All', 'et_builder' ) | |
); | |
foreach ( $terms as $term ) { | |
$category_filters .= sprintf( '<li class="et_pb_portfolio_filter"><a href="#" data-category-slug="%1$s">%2$s</a></li>', | |
esc_attr( urldecode( $term->slug ) ), | |
esc_html( $term->name ) | |
); | |
} | |
$category_filters .= '</ul>'; | |
$class = " et_pb_module et_pb_bg_layout_{$background_layout}"; | |
$output = sprintf( | |
'<div%5$s class="et_pb_filterable_portfolio %1$s%4$s%6$s" data-posts-number="%7$d"%10$s> | |
<div class="et_pb_portfolio_filters clearfix">%2$s</div><!-- .et_pb_portfolio_filters --> | |
<div class="et_pb_portfolio_items_wrapper %8$s"> | |
<div class="et_pb_portfolio_items">%3$s</div><!-- .et_pb_portfolio_items --> | |
</div> | |
%9$s | |
</div> <!-- .et_pb_filterable_portfolio -->', | |
( 'on' === $fullwidth ? 'et_pb_filterable_portfolio_fullwidth' : 'et_pb_filterable_portfolio_grid clearfix' ), | |
$category_filters, | |
$posts, | |
esc_attr( $class ), | |
( '' !== $module_id ? sprintf( ' id="%1$s"', esc_attr( $module_id ) ) : '' ), | |
( '' !== $module_class ? sprintf( ' %1$s', esc_attr( $module_class ) ) : '' ), | |
esc_attr( $posts_number), | |
('on' === $show_pagination ? '' : 'no_pagination' ), | |
('on' === $show_pagination ? '<div class="et_pb_portofolio_pagination"></div>' : '' ), | |
is_rtl() ? ' data-rtl="true"' : '' | |
); | |
return $output; | |
} | |
} |
I've implemented this and it almost works. I get an error message in the lightbox that "the image could not be loaded"
Not sure if it's because of the most recent update of Divi or that I did something wrong. The steps are pretty straight forward so I'm betting it has to do with their update.
Any thoughts?
Thank you for this guide. But I have seen a problem for this, when you navigate to categories the images do not open on lightbox it just go to the image url.
Not working
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi,
that's what i was looking for.
It was working great until I've updated Divi.
Now its only working as long as i do not change the filter.
After changing the filter, the thumbnails open as a new window.
Maybe you got an advise to handle the issue.
Thanks in advance!