Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.

Add div wrapper in the body of a specific question

+2 votes
280 views
asked Apr 12 in Q2A Core by Badan

I am trying to add div after the second paragraph of a question. I read the documentation about adding html/js inside question content, however, I was not successful. As far as I understand, I need to override the q_view function:

public function q_view_content($q_view)
{
    $content = isset($q_view['content']) ? $q_view['content'] : '';

    $this->output('<div class="qa-q-view-content">');
    $this->output_raw($content);
    $this->output('</div>');
}

I would like to add a div after let's say second  paragraph and insert custom code there. Can someone guide me how to do it? I only want to attach this div to a specific post id.

Q2A version: 1.7.1

2 Answers

+3 votes
answered Apr 12 by sama55
edited Apr 12 by sama55

How to make of my-layer plugin.

Example1 of qa-my-layer.php

public function q_view_content($q_view) {
    qa_html_theme_base::q_view_content($q_view);
    if(isset($q_view['raw']['postid'])) {
        if($q_view['raw']['postid'] == '???') {
            $this->output('<div id="qa-postid-'.$q_view['raw']['postid'].'">');
            $this->output('My custom contents');
            $this->output('</div>');
        }
    }
}

Example2 of qa-my-layer.php for CSS 'after' Pseudo-element

class qa_html_theme_layer extends qa_html_theme_base {
    public function q_view_content($q_view) {
        ob_start();
        qa_html_theme_base::q_view_content($q_view);
        $html = ob_get_clean();
        if(isset($q_view['raw']['postid'])) {
            $replaced = 'class="qa-q-view-content"';
            $html = str_replace($replaced, $replaced.' id="qa-postid-'.$q_view['raw']['postid'].'"', $html);
        }
        $this->output_raw($html);
    }
}

commented Apr 13 by Badan
Thanks a lot for this code, but how do I add the div after let's say 2nd or 3rd paragraph of the body of the question? The question is really long and has a lot of paragraphs, so I want to put the div somewhere in the middle of the post.
commented Apr 13 by Badan
I followed your instructions and Example one is working fine, but it is adding the content at the end of the question and i need to be somewhere in the middle of the text..
+1 vote
answered Apr 14 by Badan
edited Apr 14 by Badan

I finally managed to update the function. Here is the solution in case someone else also needs this functionality:

1. Follow sama55 instructions to create my-layer plugin

2. Paste the following code in qa-my-layer.php:

    class qa_html_theme_layer extends qa_html_theme_base {      
        public function q_view_content($q_view) {

        if(isset($q_view['raw']['postid'])) {
            if($q_view['raw']['postid'] == '203') {
                $content = isset($q_view['content']) ? $q_view['content'] : '';
                $content_block = explode('<p>',$content);

                if(!empty($content_block[2]))
                {   $content_block[2] .=  '<div align="center">
                    My awesome div here</div>';
                }

                $j = count($content_block);           
                for($i=1;$i<$j;$i++)
                {   $content_block[$i] = '<p>'.$content_block[$i];
                }
                $content = implode('',$content_block);
                $this->output($content);
                }

            else{           
                qa_html_theme_base::q_view_content($q_view);
            }           
        }       
    }
}

3. Change the post id with your post id.

...