SOLVED

For anyone else having the same problem – here is my final solution.

add_filter( 'avf_masonry_loop_prepare', 'avf_masonry_loop_prepare_mod_cat', 10, 2 );
function avf_masonry_loop_prepare_mod_cat( $key, $entries )
{ 
    // $categories = get_the_category($key['ID']);
   $categories = get_the_terms( $key['ID'], 'tax_category' );  //change 'tax_category' to suit your registered post type taxonomy
   // var_dump($categories);
    $separator = ' ';
    $output = '<div class="ww-masonry-cat">';
    if ( ! empty( $categories ) ) {
        foreach( $categories as $category ) {
            $output .= '<span alt="' . esc_attr( sprintf( __( 'View all posts in %s', 'textdomain' ), $category->name ) ) . '">' . esc_html( $category->name ) . '</span>' . $separator;
        }
    }
    $output .= '</div>';

    $key['text_before'] .= trim( $output, $separator );
    return $key;
}

// new script
add_action('wp_footer', 'ava_new_custom_script_masonry');
function ava_new_custom_script_masonry(){
?>
<script type="text/javascript">
(function($) {
    function a() {
        var masonry = $('.av-masonry-entry');
        if(!masonry.length) return;
        masonry.each(function() {
            var cat = $(this).find('.ww-masonry-cat');
            $(this).find('h3.av-masonry-entry-title').insertBefore(cat);
        });
    }

    a();

    $(window).on('debouncedresize av-height-change', function() {
        setTimeout( a(), 300 );
    });
})(jQuery);
</script>
<?php
}

Hi Gunter,

I was considering ditching ABL altogether and writing the blog articles in WP classic editor – as pasted HTML entities ARE NOT decoded.

I tested several plugins for embedding code snippets.

1. PastaCode – decoded the html entities and displayed the email address. – so that didn’t work

2. oEmbed Gist – h t t p s : / /wordpress.org/plugins/oembed-gist/
On the other hand, oEmbed Gist showed the GIST snippet as encoded html entities – So that’s my work around solution 2

My final work around Solution 1
STEP 1 – Install your plugin – h t t p s : / / kriesi.at/documentation/enfold/intro-to-layout-builder/#using-special-characters
STEP 2 – Edit the Array

$this->translate = array(
				                '#amp;#'          => '&#',
						'#lt#'		=> '<',
						'#gt#'		=> '>',
						'#amp#'		=> '&',
						'#91#'		=> '&lsqb;',
						'#93#'		=> '&rsqb;',
						'#quot#'		=> '&quot;',
						'#34#'		=> "&apos;",
						'#br#'		=> '<br/>',
						'#p#'		=> "<<p>>",
						
);

STEP 3 – Encode the html entity using – h t t p : / /ctrlq.org/encode/
STEP 4 – Copy Paste Text and do a FIND => ‘&#’ and REPLACE =>’#amp;#’
STEP 5 – Copy Paste the new string into the content editor and wrap in < pre > < / pre > tags
STEP 6 – Update post and re-updated post does not decode html entities – Great!
STEP 7 – On the front end the plugin Avia Special Character Converter Plugin translates this unique string #amp;# to &#

As the translate filter is global( i.e it will effect all content ), I wanted to restrict this translate functions to specific elements – hence the unique string that would not normally appear in general content.

Another thought would be to extend the plugin at a later time – to check for a class on the dom object before translating.
That way you could have different array translations based on object class. In ALB just add the appropriate Custom Class to the Text Block.

This solves the issue for now and I can get back to writing my blog article with inline html entity code snippets.

Hi yes of course I know about text mode in the editor.

I am writing a blog article comparing different obfuscation methods.

I need to show the code so I can explain pros and cons.

1. In content editor switch to text mode
2. paste the html encode entities
3. switch back to visual
4. Update the post
5. everything displays as it should
6. Edit the post and the html entities are converted back to html characters.

this is the issue

Not the obfuscation plugin

Hi Ismael,

Thanks for picking that up.
I gather the closing curly bracket was left over from other @media only screen and everything after that stopped loading.
Makes me look like a complete novice for missing that!
My Bad.

Works from enfold-child/style.css

All good!

Thanks for the continued Support.

Hi details provided

I have had a hack at the JS in avia.js from within the child theme and achieved 90% of the functionality. example provide privately.
LINE 2219

        bind_events: function()
        {
	        var click_tooltips		= '.av-click-tooltip [data-'+this.options.data+']';
			this.scope.on(this.options.event + ' mouseenter', click_tooltips, $.proxy( this.start_countdown, this) );
			   if(this.options.event != 'click')
				{
					this.scope.on('mousedown', click_tooltips, $.proxy( this.hide_tooltip, this) );
				}
				else
				{
					this.body.on('mouseleave', click_tooltips, $.proxy( this.hide_tooltip, this) );
				}
  },

mouseenter the hotspot number = tool tip is shown
mouseleave the hotspot number= tool tip remains open
mouseenter the hotspot number = tool tip is shown again with a re animated flicker
Click the hotspot number = tool tip is closed

This allows for interaction of elements within the tool tip. Not Ideal but it’s a quick hack to show the client.
I could not work out how to activate the tooltip on ‘click’ as avia-tooltips.js is very similar to avia.js (lines 1565 – 1824 ) have very similar functions. with default event: ‘mouseenter’

Q1. Please advise which js overrides the other for the image hot spot ‘mouseenter’

Q2. avia.js line 1570 delayHide: 0, this variable is not used in the js – at all. in avia.js or avia-tooltips.js
It would be fair to assume that by including the variable delayHide (set at a high value) on the mouseleave event – the tool tip would remain open for a set amount of time. Again allowing for interaction of the html elements in the tooltip.

Q3. Ultimately I’d like to remove the flicker on the second mouseenter by changing this to a click event to open and close the tool tip. and only have one tooltip open at one time. i.e if another hotspot was clicked the current open tooltip would close and the new tooltip would open.

Coding Suggestions greatly appreciated

Hi Bridster,

The original Manual workaround at the beginning of the thread still works.

If you do the following without STEP 1 – The text block HTML will still work, However, you won’t be able to see or re-edit the HTML after you have published. So do Step 1 First. That way you can re-edit the HTML in the Debug Window below the Layout Builder.

STEP 1
Add AVAI LAYOUT BUILDER DEBUG MODE code to you CHILD THEME functions.php file.

/*-------------------------------------------------------------------------------
Avia builder debug mode
-------------------------------------------------------------------------------*/
add_action( 'avia_builder_mode', "builder_set_debug" );
function builder_set_debug() {
	return "debug";
}

STEP 2
On the page with the gallery add a mannual list of links to images in your media gallery.
Add an Avia Layout Builder TEXT BLOCK Element. Change from Visual to Text mode.
The trick here is to add rel=”prettyPhoto[gal2]” to the <a href
The First Image is outside of the hidden <div>

<a rel="prettyPhoto[gal2]" title="photo 1 title" href="http://enfolds.huxburyquinn.com.au/wp-content/uploads/2012/04/2.jpg">test lightbox text link</a>
<div style="display:hidden;">
<a rel="prettyPhoto[gal2]" title="photo 2 title" href="http://enfolds.huxburyquinn.com.au/wp-content/uploads/2012/04/014.jpg"></a>
<a rel="prettyPhoto[gal2]" title="photo 3 title" href="http://enfolds.huxburyquinn.com.au/wp-content/uploads/2012/04/013.jpg"></a>
<a rel="prettyPhoto[gal2]" title="photo 4 title" href="http://enfolds.huxburyquinn.com.au/wp-content/uploads/2012/04/1.jpg"></a>
</div>

TESTED HERE:
enfolds (dot) huxburyquinn (dot) com (dot) au (/) lightbox-text-link

Hi Birdster,

Looks like Enfolds have changed the way the associated gallery data-rel works.

Try this solution here:
https://kriesi.at/support/topic/triggering-lightbox-gallery-with-link/

Or see if my popup content Shortcode is of any use

https://kriesi.at/support/topic/code-snippet-inline-post-content-popup-magnific-popup-shortcode/