Essential Grid - Lightbox Gallery only displaying featured image

Support
#1

Hi there,

I have this site where I have an Essential Grid set up near the bottom of the page.
The grid is called “Fooldalref”. I have numerous posts inside the grid from “essential grid posts” and they mostly have image galleries set up. Here’s the issue > when I view an element, the lightbox opens, but it only opens the featured image of the given post. In EG’s setting page I have the lightbox set up as “content gallery based” so I don’t understand why it is the case. Could you have a look at it?

Thanks!

#2

Hi There @Pbalazs89

Thanks for writing in! Upon checking, I see that you haven’t updated your WordPress (still using v4.9.x) and also you’re using an older version of Pro theme (v2.3.4).

The latest version of WordPress core is v5.1.1 and you can see the update guide from here (https://codex.wordpress.org/Updating_WordPress).

Then you can see the latest version of Pro and it’s plugin version information from here (https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195) and update your theme and plugins by following our guide here (https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62).

Please make sure to clear all caches after updating your theme and plugins (https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/) and then test your issue again.

Let us know how it goes.
Thanks!

#3

Hi,

I updated Wordpress the Theme and the plugins. The issue still persists. Any ideas?

Thanks!

#4

Hi @Pbalazs89,

That is strange I spent a lot of time to figure out why this is not working for you and I could not. Then I tried the same case scenario on my local installation and it worked!

Maybe the problem is the Essential Grid Posts. Would you please kindly test the case with another custom post or maybe a normal post to see if the problem is related to the post type or not?

Thank you.

#5

Hi there,

The issue has been partially fixed. I don’t know what we did but now it shows other images in the lightbox gallery, but the first image to be loaded (the cover photo) gives this error :The requested content cannot be loaded. Please try again later.

Any clue why this would be the case?

*Edit, I figured out a part of it:

If featured image is ticked here. It loads the cover image fine, but does not display any other images in the gallery.
If it’s not ticked, it gives the error, but does load the gallery images. Ticking exclude original media does not work.

Do you have any ideas to make this work?

*Edit 2. Also, it is not working fine, because only two images load even if Featured Image is ticked off.

#6

Hello @Pbalazs89,

Please review the documentation settings:

You may need to edit your grid skin and link the lightbox correctly.

Hope this helps.

#7

Hi,

I tried all the available settings and it does not seem to work. Only the first image in the lightbox gets loaded regardless of the settings. Might this be an EG bug? Can you contact the dev? Or what should I try?

#8

Hello @Pbalazs89,

I have made a test case in your site based from this documentation:

Nothing seems to be working. This could be a bug of the Essential Grid plugin. I will be forwarding this to our developers so that they can communicate with the creators of Essential Grid and investigate this issue further.

Thank you for your understanding.

#9

Happy Easter!

Should I wait for their answer? Will you guys notify me? Or should I somehow try to rebuild the references? As this is something that the client requested and it used to work.

#10

Hello @Pbalazs89,

I already have forwarded this thread to our developers for them to communicate the creators of the plugin. We have yet to receive any response from them. One of our developers may response this thread once he will get any from the plugin creators.

Thank you for your understanding.

#11

Hi there,

I’m attempting to rebuild the grid using “THE GRID” Plugin, question is:

I found the OSLO ksin which resembles my current setup on SPORTFLOOR: https://theme-one.com/the-grid/oslo/

However, when I try to edit the skin in THE GRID, there is no skin going by the name of OSLO. Why is this?

Also, any help regarding setting up the Gallery slideshow would be appreciated. I thought this was it but it does not work:

Thanks!

#12

Hi There,

Regretfully, you can not edit a standard skin in The Grid. That means you need to edit an editable skin (the imported demos), or build a skin from scratch.

Also check the following guides.
The Grid - Skin Builder Overview
SKIN BUILDER

Hope that helps.

#13

Hi there,

Okay, I can figure out the skin part, but how do I make the gallery portion of it work?
It seems to support it, but I cannot get it to work either with posts or pages.

Thanks!

#14

Hi @Pbalazs89,

I would like to check but the login provided no longer works.

Please check the links below for your guide in making gallery.

https://theme-one.com/docs/the-grid/#source_settings
https://theme-one.com/docs/the-grid/#media_settings

Thanks

#15

Hi there,

Thanks for trying to have a look. I created a new login for you guys which I shared as a secure note. Thing is, I already read the documentation and I think I have the things set up correctly. The only workaround I found so far is to go into the grid preview, and add a gallery to each specific item there, but it does not seem like the smartest way to go about this. Could you please have a look?

  • Hi Again,

I think I managed to fix it by going into the grid and setting each element to Gallery. However, there’s a small styling issue I can’t get around, here’s a screenshot:

I have the excerp displayed, but regardless of how long it is and whether it fits te space, it ends with “…”. I thought it was text-overflow: ellipsis; but it does not seem to fix it. Any idea on how to get around it?

  • Also, I would like to remove the link from the title. I’m editing the theme using this code:

      $output .= $tg_el->get_the_title();	 adding it makes the title appear and also makes it clickable, which I do not want. All I need are the lightboxes when I click. How can I achieve this?

Thanks!

#16

Hi @Pbalazs89,

Glad it works now.

The ... isn’t part of styling but with the the excerpt itself. You can try changing this line

$output .= $tg_el->get_the_excerpt($args);

to this

$output .= str_replace('...', '', $tg_el->get_the_excerpt($args) );

As for your second question, please try this

$output .= strip_tags( $tg_el->get_the_title() );

Hope this helps.

#17

Hi there,

Thanks for the help, here’s the updated code. Unfortunately, it did not fix it. Could you please have a look?
https://www.sportfloor.hu/teszt/

      <?php
/**
 * @package   The_Grid
 * @author    Themeone <themeone.master@gmail.com>
 * @copyright 2015 Themeone
 *
 * Skin: sportfloor
 *
 */

// Exit if accessed directly
if (!defined('ABSPATH')) { 
	exit;
}

$tg_el = The_Grid_Elements();

$terms_args = array(
	'color' => 'color',
	'separator' => ', '
);

$media_args = array(
	'icons' => array(
		'image' => '<i class="tg-icon-arrows-diagonal"></i>'
	)
);

// $permalink = $tg_el->get_the_permalink();
// $target    = $tg_el->get_the_permalink_target();
$colors    = $tg_el->get_colors();
$media_button = $tg_el->get_media_button($media_args);

$output = $tg_el->get_media_wrapper_start();
	$output .= $tg_el->get_media();
$output .= $tg_el->get_media_wrapper_end();
$output .= '<div class="tg-item-content-holder '.$colors['overlay']['class'].'">';	
	$output .= $tg_el->get_overlay();
	$output .= $tg_el->get_center_wrapper_start();	
		// $output .= ($permalink && $media_button) ? '<a class="tg-item-link" href="'.$permalink.'" target="'.$target.'"></a>' : null;
		$output .= strip_tags( $tg_el->get_the_title() );
		// $output .= $tg_el->get_the_terms($terms_args);
		$output .= str_replace('...', '', $tg_el->get_the_excerpt($args) );
	$output .= $tg_el->get_center_wrapper_end();
	$output .= $media_button;
	$output .= $tg_el->get_the_likes_number();
$output .= '</div>';
		
return $output;

******** EDIT

I managed to get a step closer to the answer by creating a custom skin, exporting it and checking the code. However, there’s something I can’t figure out.

    <?php
/**
 * @package   The_Grid
 * @author    Themeone <themeone.master@gmail.com>
 * @copyright 2015 Themeone
 *
 * Skin: sportfloor
 *
 */

// Exit if accessed directly
if (!defined('ABSPATH')) { 
	exit;
}

$tg_el = The_Grid_Elements();

$terms_args = array(
	'color' => 'color',
	'separator' => ', '
);

$media_args = array(
	'icons' => array(
		'image' => '<i class="tg-icon-arrows-diagonal"></i>'
	)
);

// $permalink = $tg_el->get_the_permalink();
// $target    = $tg_el->get_the_permalink_target();
$colors    = $tg_el->get_colors();
$media_button = $tg_el->get_media_button($media_args);

$output = $tg_el->get_media_wrapper_start();
	$output .= $tg_el->get_media();
$output .= $tg_el->get_media_wrapper_end();
$output .= '<div class="tg-item-content-holder '.$colors['overlay']['class'].'">';	
	$output .= $tg_el->get_overlay();
	$output .= $tg_el->get_center_wrapper_start();	
		// $output .= ($permalink && $media_button) ? '<a class="tg-item-link" href="'.$permalink.'" target="'.$target.'"></a>' : null;
		$output .= $tg_el->get_the_title(array('link' => false), 'tg-element-2');
		// $output .= $tg_el->get_the_terms($terms_args);
		$output .= $tg_el->get_the_excerpt(array('length' => '30', 'suffix' => ''), 'tg-element-3');
	$output .= $tg_el->get_center_wrapper_end();
	$output .= $media_button;
	$output .= $tg_el->get_the_likes_number();
$output .= '</div>';
		
return $output;

Here’s the code, the tg-element-3 and tg-element-2 classes come from a different skin. Any idea what this should be in my case?

#18

Hi @Pbalazs89,

You can put any class you want as a replacement to those classes. It’s only use for styling and shouldn’t affect the functionality of your grid. So unless you don’t like the default styling of the skin, you can leave it as is.

Thanks

#19

Thanks a bunch, works wonderfully.

#20

You are most welcome. :slight_smile: