How can I pass the base_url to a twig template in this Codeigniter 3 application?

Question

I am working on a online newspaper/blogging application with CodeIgniter 3.1.8 and Bootstrap 4. I have decided to add themes to it. The application is not HMVC , only MVC.

I thought it was a good idea to use the Twig template engine to add theme(s). For this purpose, I use CodeIgniter Simple and Secure Twig .

The theme's templates have the extension .twig , not .php .

In the Posts controller I have these 2 methods for all the posts and posts filtered by author :

public function index() {

    //call initialization method
    $config = $this->_initPagination("/", $this->Posts_model->get_num_rows());

    $data = $this->Static_model->get_static_data();
    $data['pages'] = $this->Pages_model->get_pages();
    $data['categories'] = $this->Categories_model->get_categories();  

    //use limit and offset returned by _initPaginator method
    $data['posts'] = $this->Posts_model->get_posts($config['limit'], $config['offset']);

    $this->twig->addGlobal('siteTitle', 'My Awesome Site');
    $this->twig->addGlobal('maincss', base_url('themes/caminar/assets/css/main.css'));
    $this->twig->display('themes/caminar/layout', $data);
}

public function byauthor($authorid){
    //load and configure pagination 
    $this->load->library('pagination');
    $config['base_url'] = base_url('/posts/byauthor/' . $authorid);
    $config['query_string_segment'] = 'page';
    $config['total_rows'] = $this->Posts_model->posts_by_author_count($authorid);
    $config['per_page'] = 12;
    
    if (!isset($_GET[$config['query_string_segment']]) || $_GET[$config['query_string_segment']] < 1) {
        $_GET[$config['query_string_segment']] = 1;
    }
    
    $limit = $config['per_page'];
    $offset = ($this->input->get($config['query_string_segment']) - 1) * $limit;
    $this->pagination->initialize($config);

    $data = $this->Static_model->get_static_data();
    $data['pages'] = $this->Pages_model->get_pages();
    $data['categories'] = $this->Categories_model->get_categories(); 
    $data['posts'] = $this->Posts_model->get_posts_by_author($authorid, $limit, $offset); 
    $data['posts_count'] = $this->Posts_model->posts_by_author_count($authorid); 
    $data['posts_author'] = $this->Posts_model->posts_author($authorid);

    $this->twig->addGlobal('siteTitle', 'My Awesome Site');
    $this->twig->addGlobal('maincss', base_url('themes/caminar/assets/css/main.css'));
    $this->twig->display('themes/caminar/layout', $data);
}

Look at the below snippet from posts.twig , that I use to display all the posts and posts filtered by author :

<div class="spotlight {% if (loop.index is even) %}alt{% else %}{% endif %}">
    <div class="image flush">
        <a href="{{post.slug}}">
            <img src="/assets/img/posts/{{post.post_image}}" alt="{{post.title}}" />
        </a>
    </div>
    <div class="inner">
        <h3>{{post.title}}</h3>
        <p>{{post.description}}</p>
        <div class="{% if (loop.index is even) %}text-right{% else %}text-left{% endif %}">
            <a href="{{post.slug}}" class="button special small">Read More</a>
        </div>
    </div>
</div>

It is obvious that I need a base url for the href attribute of <a href="{{post.slug}}" class="button special small">Read More</a> in the template.

In application\\config\\config.php I have this snippet to get the base_url of the application dynamically:

$root=(isset($_SERVER['HTTPS']) ? "https://" : "http://").$_SERVER['HTTP_HOST'];
$root .= str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);
$config['base_url'] = $root;

I have not been able to pass it to the Twig template though.

How do I do that?

Answer 1

I found a simple solution:

First, I added a base_url variable to the $data array in both methods:

public function index() {

    //call initialization method
    $config = $this->_initPagination("/", $this->Posts_model->get_num_rows());

    $data = $this->Static_model->get_static_data();
    $data['base_url'] = base_url("/");
    $data['pages'] = $this->Pages_model->get_pages();
    $data['categories'] = $this->Categories_model->get_categories();  

    //use limit and offset returned by _initPaginator method
    $data['posts'] = $this->Posts_model->get_posts($config['limit'], $config['offset']);

    $this->twig->addGlobal('siteTitle', 'My Awesome Site');
    $this->twig->addGlobal('maincss', base_url('themes/caminar/assets/css/main.css'));
    $this->twig->display('themes/caminar/layout', $data);
}

public function byauthor($authorid){
    //load and configure pagination 
    $this->load->library('pagination');
    $config['base_url'] = base_url('/posts/byauthor/' . $authorid);
    $config['query_string_segment'] = 'page';
    $config['total_rows'] = $this->Posts_model->posts_by_author_count($authorid);
    $config['per_page'] = 12;
    
    if (!isset($_GET[$config['query_string_segment']]) || $_GET[$config['query_string_segment']] < 1) {
        $_GET[$config['query_string_segment']] = 1;
    }
    
    $limit = $config['per_page'];
    $offset = ($this->input->get($config['query_string_segment']) - 1) * $limit;
    $this->pagination->initialize($config);

    $data = $this->Static_model->get_static_data();
    $data['base_url'] = base_url("/");
    $data['pages'] = $this->Pages_model->get_pages();
    $data['categories'] = $this->Categories_model->get_categories(); 
    $data['posts'] = $this->Posts_model->get_posts_by_author($authorid, $limit, $offset); 
    $data['posts_count'] = $this->Posts_model->posts_by_author_count($authorid); 
    $data['posts_author'] = $this->Posts_model->posts_author($authorid);

    $this->twig->addGlobal('siteTitle', 'My Awesome Site');
    $this->twig->addGlobal('maincss', base_url('themes/caminar/assets/css/main.css'));
    $this->twig->display('themes/caminar/layout', $data);
}

Then I used it in the posts.twig template:

<div class="spotlight {% if (loop.index is even) %}alt{% else %}{% endif %}">
    <div class="image flush">
        <a href="{{post.slug}}">
            <img src="{{base_url}}/assets/img/posts/{{post.post_image}}" alt="{{post.title}}" />
        </a>
    </div>
    <div class="inner">
        <h3>{{post.title}}</h3>
        <p>{{post.description}}</p>
        <div class="{% if (loop.index is even) %}text-right{% else %}text-left{% endif %}">
            <a href="{{base_url}}{{post.slug}}" class="button special small">Read More</a>
        </div>
    </div>
</div>

If you have better solutions, please let me know. Thanks!