The do_shortcode() function returns a different value from the editor shortcode

Resolved

(@hodomi)

First of all, I rely on Google Translator because I can’t speak English. Please understand if what I’m saying seems strange.

My webpage has to dynamically load the shortcode according to the user’s input. so, when the user enters a value, javascript requests a short code from the server using Ajax and loads it into html through the server’s response data.

I found something strange while implementing this function, so I brought a reproducible snippet.

The do_shortcode() function returns a different value from the value entered in the wordpress editor.

I am using photonic gallery and assumed that the code below uses photonic gallery.

This is the snippet of the server that returns the shortcode.


add_action('wp_ajax_nopriv_fetch_shortcode', 'fetch_shortcode');
add_action('wp_ajax_fetch_shortcode', 'fetch_shortcode');

function fetch_shortcode() {
  
    $shortcode='[mla_gallery attachment_tag="{card-material-24k-gold},{card-style-tiger}" tax_operator=OR columns="3" main_size="full" thumb_size="thumbnail" style="square"]';
	
    $html = do_shortcode($shortcode);

    wp_send_json_success($html);
  }
}

This is the client snippet requesting shortcode.

$.ajax({
    url: <?php echo admin_url('admin-ajax.php') ?>,
    method: "POST",
    data: {action: 'fetch_shortcode'}
}).done(function(response) {
    console.log("shortcode - before : ",$('.product-gallery-container').html());
    $('.product-gallery-container').html(response.data);
    console.log("shortcode - after  : ",$('.product-gallery-container').html());
});

Finally, this is the shortcode I entered in the wordpress editor.

<div class="product-gallery-container">[mla_gallery attachment_tag="{card-material-24k-gold},{card-style-tiger}" tax_operator=OR columns="3" main_size="full" thumb_size="thumbnail" style="square"]</div>

The logs in the browser console are as follows:

shortcode - before :  <div class="photonic-wp-stream photonic-stream " id="photonic-wp-stream-1">
	<div id="photonic-wp-stream-1-container" class="title-display-tooltip photonic-level-1-container photonic-standard-layout photonic-thumbnail-effect-none sizes-present " data-photonic-platform="wp" data-photonic-query="order=ASC&orderby=post__in&id=2999&itemtag=figure&icontag=div&captiontag=figcaption&size=thumbnail&include=4432,4433&exclude=&link=&layout=square&more=&display=in-page&panel=&filter=&filter_type=include&fx=slide&timeout=4000&speed=3000&pause=1&strip-style=thumbs&controls=show&popup=hide&custom_classes=&alignment=&caption=title&page=1&count=-1&thumb_width=75&thumb_height=75&thumb_size=thumbnail&slide_size=large&slideshow_height=500&type=default&style=square&ids=4432,4433&attachment_tag={card-material-24k-gold},{card-style-tiger}&columns=3&main_size=full" data-photonic-gallery-columns="3" style="--tile-min-height: 200px">
<figure class="photonic-gallery-3c photonic-level-1 photonic-thumb" style="--dw: 150; --dh: 150; display: inline-block;">
			<a class="photonic-lb photonic-baguettebox baguettebox" rel="lightbox-photonic-wp-stream-1" href="https://i0.wp.com/www.goldenrod.co.kr/wp-content/uploads/2022/04/샘플19.jpg?fit=1440%2C1440&ssl=1" title="샘플19" data-title="<a href='https://www.goldenrod.co.kr/?attachment_id=4432' >샘플19</a>" data-photonic-tooltip="샘플19" data-photonic-media-type="image" data-content-type="image" data-photonic-deep="gallery[photonic-wp-stream-1]/4432/">
				<img alt="샘플19" src="https://i0.wp.com/www.goldenrod.co.kr/wp-content/uploads/2022/04/샘플19.jpg?resize=150%2C150&ssl=1" class="square" loading="eager" width="150" height="150">
				
			</a>
		</figure>
		<figure class="photonic-gallery-3c photonic-level-1 photonic-thumb" style="--dw: 150; --dh: 150; display: inline-block;">
			<a class="photonic-lb photonic-baguettebox baguettebox" rel="lightbox-photonic-wp-stream-1" href="https://i0.wp.com/www.goldenrod.co.kr/wp-content/uploads/2022/04/샘플20.jpg?fit=1440%2C1440&ssl=1" title="샘플20" data-title="<a href='https://www.goldenrod.co.kr/?attachment_id=4433' >샘플20</a>" data-photonic-tooltip="샘플20" data-photonic-media-type="image" data-content-type="image" data-photonic-deep="gallery[photonic-wp-stream-1]/4433/">
				<img alt="샘플20" src="https://i0.wp.com/www.goldenrod.co.kr/wp-content/uploads/2022/04/샘플20.jpg?resize=150%2C150&ssl=1" class="square" loading="eager" width="150" height="150">
				
			</a>
		</figure>
	</div> <!-- ./photonic-level-1-container -->
<span id="photonic-wp-stream-1-container-end"></span>
</div><!-- .photonic-stream or .photonic-panel -->

shortcode - after  :  <div class="photonic-wp-stream photonic-stream " id="photonic-wp-stream-1">
	<div id="photonic-wp-stream-1-container" class="title-display-tooltip photonic-level-1-container photonic-standard-layout photonic-thumbnail-effect-none sizes-present " data-photonic-platform="wp" data-photonic-query="order=ASC&orderby=post__in&id=0&itemtag=figure&icontag=div&captiontag=figcaption&size=thumbnail&include=4432,4433&exclude=&link=&layout=square&more=&display=in-page&panel=&filter=&filter_type=include&fx=slide&timeout=4000&speed=3000&pause=1&strip-style=thumbs&controls=show&popup=hide&custom_classes=&alignment=&caption=title&page=1&count=-1&thumb_width=75&thumb_height=75&thumb_size=thumbnail&slide_size=large&slideshow_height=500&type=default&style=square&ids=4432,4433&attachment_tag={card-material-24k-gold},{card-style-tiger}&columns=3&main_size=full" data-photonic-gallery-columns="3" style="--tile-min-height: 200px">
<figure class="photonic-gallery-3c photonic-level-1 photonic-thumb" style="--dw: 150; --dh: 150">
			<a class="photonic-lb photonic-baguettebox baguettebox" rel="lightbox-photonic-wp-stream-1" href="https://www.goldenrod.co.kr/wp-content/uploads/2022/04/샘플19.jpg" title="샘플19" data-title="<a href='https://www.goldenrod.co.kr/%ec%83%98%ed%94%8c19/' >샘플19</a>" data-photonic-tooltip="샘플19" data-photonic-media-type="image" data-content-type="image" data-photonic-deep="gallery[photonic-wp-stream-1]/4432/">
				<img alt="샘플19" src="https://www.goldenrod.co.kr/wp-content/uploads/2022/04/샘플19-150x150.jpg" class="square" loading="eager" width="150" height="150">
				
			</a>
		</figure>
		<figure class="photonic-gallery-3c photonic-level-1 photonic-thumb" style="--dw: 150; --dh: 150">
			<a class="photonic-lb photonic-baguettebox baguettebox" rel="lightbox-photonic-wp-stream-1" href="https://www.goldenrod.co.kr/wp-content/uploads/2022/04/샘플20.jpg" title="샘플20" data-title="<a href='https://www.goldenrod.co.kr/%ec%83%98%ed%94%8c20/' >샘플20</a>" data-photonic-tooltip="샘플20" data-photonic-media-type="image" data-content-type="image" data-photonic-deep="gallery[photonic-wp-stream-1]/4433/">
				<img alt="샘플20" src="https://www.goldenrod.co.kr/wp-content/uploads/2022/04/샘플20-150x150.jpg" class="square" loading="eager" width="150" height="150">
				
			</a>
		</figure>
	</div> <!-- ./photonic-level-1-container -->
<span id="photonic-wp-stream-1-container-end"></span>
</div><!-- .photonic-stream or .photonic-panel -->

If you look closely, there are some differences between the style attribute of ‘figure.photonic-gallery-3c’ and the href attribute of a tag.

As a result, the shortcode received as do_shortcode() is not displayed on the screen, and even if you force the css to be changed to appear on the screen, the prev, next buttons are not visible when you click on the image.

What am I missing? Any comments will be appreciated.
Thank you in advance.

This topic was modified 4 years, 1 month ago by hodomi.
This topic was modified 4 years, 1 month ago by hodomi.

Viewing 2 replies - 1 through 2 (of 2 total)

Thread Starter hodomi
(@hodomi)

4 years, 1 month ago

We found that the reason why the next, prev buttons were not visible is that the event listener is registered when the photonic’s js module is loaded for the first time, so the event listener is not re-registered when the domElement is modified.

Still, it is strange that the value returned by the do_shortcode() function when the same shortcode was entered differs from the value registered in the wordpress editor.

Plugin Author David Lingren
(@dglingren)

4 years, 1 month ago

Thank you for your questions and for the details of the example you provided.

You wrote “I am using photonic gallery and assumed that the code below uses photonic gallery.” That is correct; the style="square" parameter tells Media Library Assistant (MLA) to use the Photonic plugin to format the gallery. For this shortcode, MLA does the data selection portion of the task, then hands a list of Media Library item ID values to the Photonic plugin along with the other Photonic parameters – columns="3" main_size="full" thumb_size="thumbnail" style="square".

MLA does not play any part in generating the HTML markup for the gallery; that is done entirely by Photonic. The differences you see come from Photonic, not MLA.

I am marking this topic resolved because MLA is working as expected. You should start a support topic in the Photonic support forum and let their team investigate further. Thanks for your understanding and your interest in MLA.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘The do_shortcode() function returns a different value from the editor shortcode’ is closed to new replies.