Fullwidth projects open in lightbox
If you find this tweak helpful:
Beginners
Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme. Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site.
I recently posted a tweak on how to make project images unclickable so they can be used like a gallery. But recently someone requested a tweak that would make the images open in a lightbox instead of going to the project post. Seemed like a very useful tweak so here it is (taken from ET’s forum):
PHP
The first thing you’ll want to do is create a new file in your child theme folder and name it functions.php
Your new file location should be this /wp-content/themes/Divi-child/functions.php
Now just copy and paste the following code into this new file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
<?php function override_parent(){ remove_shortcode( 'et_pb_fullwidth_portfolio', 'et_pb_fullwidth_portfolio'); add_shortcode( 'et_pb_fullwidth_portfolio', 'et_pb_fullwidth_portfolio_custom' ); } add_action('after_setup_theme','override_parent'); function et_pb_fullwidth_portfolio_custom( $atts ) { extract( shortcode_atts( array( 'title' => '', 'module_id' => '', 'module_class' => '', 'fullwidth' => 'on', 'include_categories' => '', 'posts_number' => '', 'show_title' => 'on', 'show_date' => 'on', 'background_layout' => 'light', 'auto' => 'off', 'auto_speed' => 7000, ), $atts ) ); $args = array(); if( 'on' === $show_pagination ) { $args['nopaging'] = true; } else { $args['posts_per_page'] = (int) $posts_number; } if ( '' !== $include_categories ) { $args['cat'] = $include_categories; } $projects = et_divi_get_projects( $args ); $categories_included = array(); ob_start(); if( $projects->post_count > 0 ) { while ( $projects->have_posts() ) { $projects->the_post(); ?> <div id="post-<?php the_ID(); ?>" <?php post_class( 'et_pb_portfolio_item ' ); ?>> <?php $thumb = ''; $width = 320; $width = (int) apply_filters( 'et_pb_portfolio_image_width', $width ); $height = 241; $height = (int) apply_filters( 'et_pb_portfolio_image_height', $height ); list($thumb_src, $thumb_width, $thumb_height) = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), array( $width, $height ) ); $orientation = ( $thumb_height > $thumb_width ) ? 'portrait' : 'landscape'; if ( '' !== $thumb_src ) : ?> <div class="et_pb_portfolio_image <?php echo esc_attr( $orientation ); ?>"> <a href="<?php echo $thumb_src; ?>" class="et_pb_lightbox_image"> <img src="<?php echo esc_attr( $thumb_src ); ?>" alt="<?php echo esc_attr( get_the_title() ); ?>"/> <div class="meta"> <span class="et_overlay"></span> <?php if ( 'on' === $show_title ) : ?> <h3><?php the_title(); ?></h3> <?php endif; ?> <?php if ( 'on' === $show_date ) : ?> <p class="post-meta"><?php echo get_the_date(); ?></p> <?php endif; ?> </div> </a> </div> <?php endif; ?> </div> <?php } } wp_reset_postdata(); $posts = ob_get_clean(); $class = " et_pb_bg_layout_{$background_layout}"; $output = sprintf( '<div%4$s class="et_pb_fullwidth_portfolio %1$s%3$s%5$s" data-auto-rotate="%6$s" data-auto-rotate-speed="%7$s"> %8$s <div class="et_pb_portfolio_items clearfix" data-columns=""> %2$s </div><!-- .et_pb_portfolio_items --> </div> <!-- .et_pb_fullwidth_portfolio -->', ( 'on' === $fullwidth ? 'et_pb_fullwidth_portfolio_carousel' : 'et_pb_fullwidth_portfolio_grid clearfix' ), $posts, esc_attr( $class ), ( '' !== $module_id ? sprintf( ' id="%1$s"', esc_attr( $module_id ) ) : '' ), ( '' !== $module_class ? sprintf( ' %1$s', esc_attr( $module_class ) ) : '' ), ( '' !== $auto && in_array( $auto, array('on', 'off') ) ? esc_attr( $auto ) : 'off' ), ( '' !== $auto_speed && is_numeric( $auto_speed ) ? esc_attr( $auto_speed ) : '7000' ), ( '' !== $title ? sprintf( '<h2>%s</h2>', esc_html( $title ) ) : '' ) ); return $output; } |
Line 60 is the only change. We’re replacing the permalink of the project post with the src of the image and adding the lightbox class, which makes it open in the lightbox.
This tweak is for the fullwidth portfolio module. If you want to apply the same technique to the grid layouts, just overwrite that function and replace the same lines of code with line 60. For a more detailed tutorial on how to replace any Divi module, check out this post.
25 Comments
Hi,
Thanks you so much for this tweak, I needed it !
Cheers,
Bastien
June 6, 2015
Hey, this is great! Thanks a lot for sharing. I am however after a solution to open the project page in lightbox. All of my projects consist of one slideshow of pictures that I want to display in a lightbox when the relevant picture is clicked in the portfolio. I hope this makes sense. Would it be possible in any way?
Thanks
Aniko
June 13, 2015
Thanks Aniko. So you basically want to do the same thing as above, except you want to open the entire slideshow for that project. Right?
June 15, 2015
Hi,
I would like to do exactly the same.
When someone click on one of the projects it opens in the lightbox and allow the possibility to press a button for the next or previous project photo.
Thanks!
July 6, 2015
BTW, I don’t would like to create a child theme I prefer to use the original one.
Thanks
July 7, 2015
Have tested your code on the latest Divi theme version but it doesn’t seem to work. Am i doing something wrong?
Links still go to the post page. However, I just need the images.
July 19, 2015
Hello everyone. Yes, the new version of Divi has broken a lot of my tweaks including this one. In the future, I plan to release tweaks as plugins so they are not as vulnerable to breaking on theme updates. Stay tuned!
July 22, 2015
I put this in my child them functions php and got this error.
Parse error: syntax error, unexpected ‘<' in /home/bcboxing/public_html/mountainmassageheber.com/wp-content/themes/Divi-child-01/functions.php on line 14
Any idea? on what I need to do to fix this…I really like the idea of the pictures opening up in a lightbox.
Thank you – Sheila
July 26, 2015
Hi Sheila,
If I had to guess, maybe you already had something in your child theme’s functions.php file. This file should start with . Copy the code above but leave those tags out. And past it just above the closing ?> tag. If you need help getting back into your site to do this, send me an email and I’ll get it back to a working state for you.
July 28, 2015
Thanks for this tweak. How would I do it from a regular, non-full-width, project gallery?
July 28, 2015
Also, do you have any leads on being able to create a sortable image gallery? I want it to basically function in the same way as the Project Gallery except just be an Image Gallery that you can sort based on category.
July 28, 2015
Nice one Really need this.
Does this tweak work with divi 2.5?
And that plugin tou mention, how is that coming along?
September 16, 2015
It does not work with 2.4+. I just released the plugin that has this option built-in. The plugins primary function is to allow you to use the Divi portfolio layouts with posts instead of projects. And gives you the option to open the images in a lightbox. It only works with posts right now. Check it out! http://www.diviplugins.com/portfolio-posts-pro-plugin/
September 29, 2015
Hi,
Bruno wrote above:
I would like to do exactly the same.
When someone click on one of the projects it opens in the lightbox and allow the possibility to press a button for the next or previous project photo.
Thanks!
I desperately need this too. click on a project and a light box opens to the first of several images that you can click through in the lightbox and then close that lightbox and click on the next project and see all 20 images from that one etc.
November 13, 2015
Hi there,
is it possible to remove icons, hover and text on picture but i want to let visible the title of portfolio carusel module?
Thanks.
July 20, 2016
Hello,
How is the function for grid layout called ?
Thanks
September 14, 2016
Hi
I do this in DIVI 2.7.9
Step by step…
1. Edit file wp-content/themes/Divi/includes/builder/main-modules.php
2. Comment line 15697 <!– <a href="”> –>
3. Add this line below: <a href="” rel=”lightbox-pisak”>
4. Save file and upload to server
* lightbox-pisak is my name for rel atrib. You can set this in settings os fightbox module
5. Install lightbox module Responsive Lightbox by dFactory and set Your rel
6. enjoy Your beautiful full width portfolio grid
October 25, 2016
How can I add code to reply?
October 25, 2016
Whooop!! Just came across Elegant Tweaks through this post. Definitely bookmarking this site! I’m always looking for ways to modify and tweak my Divi designs! 😀
November 17, 2016
This code broke my WP site. Just a heads up!
February 9, 2017
Hi, I was really looking for something like this…did the tutorial…things didn’t work so I added the class name – I didn’t see that tidbit in the instructions.
Nevertheless, it’s working, but I get a – Can’t locate image – in lightbox. Is there a path in the code that I need to add localhost to? I’m developing on WAMP.
June 28, 2017
I think this is not working anymore 🙁
June 29, 2017
Unfortunately the method for replacing Divi modules continues to be a moving target as they update Divi. To get this feature, you can install my plugin that does this and a LOT MORE: https://www.diviplugins.com/plugins/portfolio-posts-pro/
August 17, 2017
I want the grid filterable portfolio to open in lightbox. Am lost and i need specific code…
December 3, 2017
Hello! I need to open portfolio grid img in lightbox, not in post page. I read the comments and there is no solution that can solve my problem, please can you help me! I understand that I should make something with this line…
<a href="post_permalink ); ?>” title=””>
this solution doesn’t work: <a href="” class=”et_pb_lightbox_image”>
December 13, 2017