Hi,

The above script gets the ALT attribute of the image inside the links and then apply it to the link itself thus enabling the lightbox to render the title. Unfortunately, some of the images don’t have an ALT attribute, so I had to get the data from the “data- ulbtitle” attribute. Again, this is not consistently available among the gallery thumbnails. How do the plugin set that attribute? You may need to edit the attributes of the images in the Media > Library panel.

Best regards,
Ismael

Hi,

Thanks for the update.

I adjusted the src attribute of the img tag, so that it’s using the original source of the image instead of a thumbnail.

<img class="aligncenter size-medium wp-image-428" src="//www.baby-kracht.nl/wp-content/uploads/2018/06/ME-logologo-wit.png" alt="" width="900" height="303" />

Best regards,
Ismael

Hi,

Please try the following and check if that makes a difference:
1. Install this plugin: https://wordpress.org/plugins/simple-image-sizes/
2. Go to Settings > Media
3. Change the entry_with_sidebar image size (increase its width / height).
4. Regenerate the thumbnails by clicking the button at the bottom.

Best regards,
Yigit

Hey MarcusJeroch,

Thank you for using Enfold.

The media library requires the “medium” thumbnail when it is set to grid, and the smallest “thumbnail” when list view is enabled. Enable the “medium” thumbnail but set it to be as small as possible, so the generated thumbnails won’t take a lot of space.

Best regards,
Ismael

Hey profumopuntoit,
Do you happen to have some added javascript to create the thumbnail titles, or have you customized the theme files, or have you manually added the titles to the media?
because on my install the “entry-image” thumbnails for the next / previous do not have titles for the images, and as you pointed out yours are more like descriptions than titles.
If you would like us to take a closer look, please include a admin login in the Private Content area.
Wold you like the default behavior of no titles there?

Best regards,
Mike

Hi,
The image sizes are found in the enfold/functions.php starting at line 161, please look for:

/*
 * Register additional image thumbnail sizes
 * Those thumbnails are generated on image upload!
 *
 * If the size of an array was changed after an image was uploaded you either need to re-upload the image
 * or use the thumbnail regeneration plugin: http://wordpress.org/extend/plugins/regenerate-thumbnails/
 */

$avia_config['imgSize']['widget'] 			 	= array('width'=>36,  'height'=>36);						// small preview pics eg sidebar news
$avia_config['imgSize']['square'] 		 	    = array('width'=>180, 'height'=>180);		                 // small image for blogs
$avia_config['imgSize']['featured'] 		 	= array('width'=>1500, 'height'=>430 );						// images for fullsize pages and fullsize slider
$avia_config['imgSize']['featured_large'] 		= array('width'=>1500, 'height'=>630 );						// images for fullsize pages and fullsize slider
$avia_config['imgSize']['extra_large'] 		 	= array('width'=>1500, 'height'=>1500 , 'crop' => false);	// images for fullscrren slider
$avia_config['imgSize']['portfolio'] 		 	= array('width'=>495, 'height'=>400 );						// images for portfolio entries (2,3 column)
$avia_config['imgSize']['portfolio_small'] 		= array('width'=>260, 'height'=>185 );						// images for portfolio 4 columns
$avia_config['imgSize']['gallery'] 		 		= array('width'=>845, 'height'=>684 );						// images for portfolio entries (2,3 column)
$avia_config['imgSize']['magazine'] 		 	= array('width'=>710, 'height'=>375 );						// images for magazines
$avia_config['imgSize']['masonry'] 		 		= array('width'=>705, 'height'=>705 , 'crop' => false);		// images for fullscreen masonry
$avia_config['imgSize']['entry_with_sidebar'] 	= array('width'=>845, 'height'=>321);		            	// big images for blog and page entries
$avia_config['imgSize']['entry_without_sidebar']= array('width'=>1210, 'height'=>423 );						// images for fullsize pages and fullsize slider
$avia_config['imgSize'] = apply_filters('avf_modify_thumb_size', $avia_config['imgSize']);


$avia_config['selectableImgSize'] = array(
	'square' 				=> __('Square','avia_framework'),
	'featured'  			=> __('Featured Thin','avia_framework'),
	'featured_large'  		=> __('Featured Large','avia_framework'),
	'portfolio' 			=> __('Portfolio','avia_framework'),
	'gallery' 				=> __('Gallery','avia_framework'),
	'entry_with_sidebar' 	=> __('Entry with Sidebar','avia_framework'),
	'entry_without_sidebar'	=> __('Entry without Sidebar','avia_framework'),
	'extra_large' 			=> __('Fullscreen Sections/Sliders','avia_framework'),
	
);

But I’m surprised you had a fatal error, because this plugin had been working well for many. Was it the Thumbnail regeneration that gave the error? Perhaps another plugin conflicted with it?

Best regards,
Mike

Hey Andrii,
To create a lightbox popup for your contact form, first add this code to the end of your functions.php file in Appearance > Editor:

function popup_inline() { ?>
<script type="text/javascript">
jQuery(window).load(function(){
	jQuery('.open-popup-link').magnificPopup({
	  type:'inline',
	  midClick: true
	});
});
</script>
<?php }

add_action('wp_head', 'popup_inline');

Then add this code in the General Styling > Quick CSS field:

.white-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}

please adjust the max-width to suit

Then in a code block on your page add this code for the lightbox:

<div id="test-popup" class="white-popup mfp-hide">
<p>PLACE CONTENT HERE</p>
</div>

Then in a second window, open a new post in the default editor and using the wand tool, create a contact form so you can copy the shortcode for it.

Paste the shortcode in your popup, replacing the text “PLACE CONTENT HERE”

Now to create the button to open the popup, we need to add the class “open-popup-link” to the link inside the button and make the link point to “#test-popup” this can be a little tricky so I’ve added and example button”

 <div class="avia-button-wrap avia-button-center  avia-builder-el-99"><a href="#test-popup" class="open-popup-link avia-button   avia-icon_select-no avia-color-theme-color avia-size-medium avia-position-center "><span class="avia_iconbox_title">I’d like more info, please</span></a></div>

If you want some help creating a custom button, first make a button you like on a test page and post the url so we can copy the html and add the class for you.
Then add the button code in a code block element where you want it on your page. The popup code block, from above, can be anywhere on your page, and that is all there is to it.

To open other links in a lightbox, simply add this to the end of your links”

?iframe=true

Here are some examples, to make a link for an image to open in lightbox:

<a href="http://127.0.0.1/wp-content/uploads/2015/07/portfolio-9.jpg" rel="prettyPhoto" title="">Image</a>

To open pages in lightbox using an iframe:

<a href="http://127.0.0.1/pages/blank-pages/coming-soon-page/?iframe=true">Page</a>

If you link to one of your pages, such as a FAQ, try to disable the header, sidebar, & footer for that page in the page layout options.
This is the format for opening a Youtube video in lightbox:

<a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title=""><img src="images/thumbnails/flash-logo.jpg" alt="YouTube" width="60" /></a>

Let us know if you have any questions

Best regards,
Mike

Hi,

You can use a plugin like this to regenerate the thumbnails: https://wordpress.org/plugins/regenerate-thumbnails/

Best regards,
Rikard

Hey gavdonald,

Thank you for using Enfold.

Set the Settings > Media > Medium thumbnail to 600x600px then regenerate the thumbnails. Select the “Medium” thumbnail among the list afterwards.

Best regards,
Ismael

Hi,

We can’t reproduce the issue on our installation. Are you using the Image element? Please try to regenerate the thumbnails.

// https://wordpress.org/plugins/regenerate-thumbnails/

Best regards,
Ismael