Custom transformer rules?

Hi @nvkc,

Some of those interactive features we already support, and most of the others we’ve got on the roadmap, which ones in particular where you after? I’d be happy to help with some code to get it working.

We’ve been back and forth on the transformer rules quite a lot and currently we’ve got no immediate plans to add them. We decided we wanted to make a plugin that was as close to “just works” as possible so instead we’ve been focusing on our new content parser that will hopefully covert as much content as possible correctly (you should try V2 if you haven’t it’s much better!).

The problem with transformer rules are that they’re extremely complicated and won’t be used by the majority of users, we also can’t use the Facebook library as it’s not PHP 5.2 compatible so we’d have to roll our own and we’re just not sure it’s worth it at this stage. We’re not ruling the out and we might add them in the future if there’s enough call for them but at the moment other features such as the “mass post syncer” have a higher priority.

Hope that helps.

Thanks for your quick response!

We use Fullscreen Snap-to-Frame a lot. Right now we are using code to transform the div to a figure and making the ImageRule property of fullscreen.

Here’s an example:

<div data-mode="fullscreen">
    <img src="https://mydomain.com/path/to/img.jpg" />
    <div class="caption extra-large">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
        <div class="citation">Photo by: Lorem Ipsum</div>
    </div>
</div>

Which converts to:

<figure data-mode="fullscreen">
    <img src="https://mydomain.com/path/to/img.jpg" />
    <figcaption class="op-extra-large">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
        <cite>Photo by: Lorem Ipsum</cite>
    </figcaption>
</figure>

We also use a CaptionRule to set the caption size to extra large.

Hi @nvkc,

Ok that should be easy enough can definitely put something together. How are you adding that data-mode attr (the one on the original image div)? Is it a plugin or custom code?

Thanks

• This reply was modified 7 years, 5 months ago by OzTheGreat.

Thanks! This is a custom shortcode we had created that is returned with the example HTML given.

Here’s what that looks like.

[fullscreen src="https://mydomain.com/path/to/img.jpg" cite="Photo by: Lorem Ipsum"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.[/fullscreen]

This makes it easier on the author so they don’t need to copy in the full HTML.

Hi @nvkc,

Excellent, thanks for that. Ok if you add the below code to your theme’s functions.php file or include it in someway it should correctly transform the shortcode for IA. Please do test it thoroughly and let me know if you have any issues!

All the best

if ( ! function_exists( 'wpna_custom_fullscreen_override_shortcodes' ) ) :

	/**
	 * Override the <code>wp_caption</code> shortcode in IA.
	 *
	 * @param array  $override_tags Shortocde tags to override.
	 * @param string $content       Current post content.
	 * @return array $override_tags
	 */
	function wpna_custom_fullscreen_override_shortcodes( $override_tags, $content ) {
		$override_tags['fullscreen'] = 'wpna_custom_fullscreen_shortcode_override';
		return $override_tags;
	}
endif;
add_filter( 'wpna_facebook_article_setup_wrap_shortcodes_override_tags', 'wpna_custom_fullscreen_override_shortcodes', 10, 2 );

if ( ! function_exists( 'wpna_custom_fullscreen_shortcode_override' ) ) :

	/**
	 * Wraps [fullscreen] shortcodes.
	 *
	 * Ensures they're always properly formatted and don't get caught up
	 * in the other parts of the content parser.
	 *
	 * @param array $attr Shortcode attributes.
	 * @param array $content The content of the shortcode..
	 * @return string
	 */
	function wpna_custom_fullscreen_shortcode_override( $attr, $content ) {
		$atts = shortcode_atts( array(
			'src'	  => '',
			'cite'	  => '',
		), $attr, 'fullscreen' );

		// Start of output.
		$html = '<figure data-mode="fullscreen">';

		// The image element. Run do_shortcode over it just incase.
		$html .= sprintf( '<img src="%s" />', esc_url( $atts['src'] ) );

		if ( ! empty( $content ) ) {

			// Set the caption settings, position, size etc.
			$html .= '<figcaption class="op-extra-large">';

			// Add in the caption.
			$html .= $content;

			if ( ! empty( $atts['cite'] ) ) {
				$html .= sprintf( "<cite>%s</cite>", $atts['cite'] );
			}

			// Close the tag.
			$html .= '</figcaption>';
		}

		// Closing figure tag.
		$html .= '</figure>';

		// Grab a placement for this code.
		$placement_id = wpna_content_parser_get_placeholder( $html );

		return '<pre>' . $placement_id . '</pre>';
	}
endif;

• This reply was modified 7 years, 5 months ago by OzTheGreat. Reason: Formatting