How to add giphy to markdown-x

Hi there,

What you could do is use the following MarkdownHelper method here:

https://devdojo.com/markdownx/docs/concepts/liquid-tags

This will allow you to actually render the liquid tags too.

You can add the method to the MarkdownX.php Controller file and then call it in the updateContentPreview method.

Let me know how it goes!

Best,

Bobby

Hi, I tried that and it gives a function error. Do you have a snippet I can use to implement it? Much appreciated.

I implemented the function but cant figure out how to implement the 'class MarkdownHelper {'

Hi there,

You can update the updateContentPreview() method to the following:

    public function updateContentPreview(){

        $this->contentPreview = $this->parseLiquidTags(Str::markdown($this->content));
    }

And then right bellow it, you could add the methods that you want to include like this:

    public static function parseLiquidTags($html){
        $matches = "";

        // If we find at least one liquid tag
        if( preg_match_all('/{% .* %}/', $html, $matches) && isset($matches[0]) ){

            // loop through each of the liquid tags
            foreach($matches[0] as $index => $match){

                // replace multiple spaces with single space
                $matchArray = explode(" ", preg_replace('!\s+!', ' ', $match));

                // gaurantee we have the first value and run specific function for specific tag
                if($matchArray[1]){
                    switch($matchArray[1]){
                        case 'youtube':
                            $html = self::replaceYouTubeTag($html, $matchArray, $match);
                            break;
                        case 'codepen':
                            $html = self::replaceCodePenTag($html, $matchArray, $match);
                            break;
                        case 'codesandbox':
                            $html = self::replaceCodeSandboxTag($html, $matchArray, $match);
                            break;
                        case 'buymeacoffee':
                            $html = self::replaceBuyMeACoffeeTag($html, $matchArray, $match);
                            break;
                        case 'giphy':
                            $html = self::replaceGiphyTag($html, $matchArray, $match);
                            break;
                    }
                }
            }
        }

        return $html;
    }

public static function replaceYouTubeTag($html, $tagArray, $original_string){
    if(isset($tagArray[2])){
        $youtubeEmbedURL = $tagArray[2];
        $youtubeEmbed = '<iframe width="100%" height="399" src="https://www.youtube.com/embed/' . $youtubeEmbedURL . '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
        $html = str_replace($original_string, $youtubeEmbed, $html);
    }
    return $html;
}

public static function replaceGiphyTag($html, $tagArray, $original_string){
    if(isset($tagArray[2])){
        $giphyEmbed = $tagArray[2];
        $giphyEmbed = '<div style="width:100%;height:0;padding-bottom:56%;position:relative;display:block"><iframe src="' . $giphyEmbed . '" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></p></div>';
        $html = str_replace($original_string, $giphyEmbed, $html);
    }
    return $html;
}

Let me know if you have any questions. Basically there is no need to include the whole MarkdownHelper class but just add the methods that you need as shown above.

Best, Bobby

Hey there, Bobby! This worked! Unfortunately, giphy returns a 404 error.

What we did below is the implementation you provided.

    public function updateContentPreview(){
        $this->contentPreview = $this->parseLiquidTags(Str::markdown($this->content));

    }

 public static function parseLiquidTags($html){
        $matches = "";

        // If we find at least one liquid tag
        if( preg_match_all('/{% .* %}/', $html, $matches) && isset($matches[0]) ){

            // loop through each of the liquid tags
            foreach($matches[0] as $index => $match){

                // replace multiple spaces with single space
                $matchArray = explode(" ", preg_replace('!\s+!', ' ', $match));

                // gaurantee we have the first value and run specific function for specific tag
                if($matchArray[1]){
                    switch($matchArray[1]){
                        case 'youtube':
                            $html = self::replaceYouTubeTag($html, $matchArray, $match);
                            break;
                        case 'codepen':
                            $html = self::replaceCodePenTag($html, $matchArray, $match);
                            break;
                        case 'codesandbox':
                            $html = self::replaceCodeSandboxTag($html, $matchArray, $match);
                            break;
                        case 'buymeacoffee':
                            $html = self::replaceBuyMeACoffeeTag($html, $matchArray, $match);
                            break;
                        case 'giphy':
                            $html = self::replaceGiphyTag($html, $matchArray, $match);
                            break;
                    }
                }
            }
        }

        return $html;
    }

public static function replaceYouTubeTag($html, $tagArray, $original_string){
    if(isset($tagArray[2])){
        $youtubeEmbedURL = $tagArray[2];
        $youtubeEmbed = '<iframe width="100%" height="399" src="https://www.youtube.com/embed/' . $youtubeEmbedURL . '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
        $html = str_replace($original_string, $youtubeEmbed, $html);
    }
    return $html;
}

public static function replaceGiphyTag($html, $tagArray, $original_string){
    if(isset($tagArray[2])){
        $giphyEmbed = $tagArray[2];
        $giphyEmbed = '<div style="width:100%;height:0;padding-bottom:56%;position:relative;display:block"><iframe src="' . $giphyEmbed . '" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></p></div>';
        $html = str_replace($original_string, $giphyEmbed, $html);
    }
    return $html;
}

I was also wondering, how would I implement liquid tags into the final output of the editor? Like, the published instance and not the preview editor.

Ive marked your solution as an accepted answer. Have a good Christmas.

Hi there,

You can use the same method to parse the markdown content and the liquid tags when displaying them to your actual website.

You can add that method to your controller directly.

Let me know how it goes!

Happy holidays to you too 🙌

Sounds good! Sorry for the late reply. If I can get it working, ill make a pull request to wordsmith, so everyone can have the nice features ( know quite a few who want videos in there blogs )