Make images responsive [FIXED]

Make images responsive [FIXED]

Postby easyexpat on Fri Feb 13, 2015 10:00 am

As I am using bootstrap for the templates, I would like to make the images responsive.
An easy way would be to replace (inside the posts only) all <img by <img class="img-responsive".

Maybe something like:
Code: Select all
$tpl_output = preg_replace('/<img(.*)>/', '<img class="img-responsive"$1', $content,1);

Can you tell me where to make that change (I want to make it only in posts, not for the full template)?
Last edited by easyexpat on Tue Feb 24, 2015 11:41 am, edited 1 time in total.
easyexpat
 
Posts: 136
Joined: Mon Jun 13, 2005 4:39 pm

Re: Make images responsive

Postby jondaley on Thu Feb 19, 2015 3:20 am

I think the best way to do that is to use a plugin that uses EVENT_PROCESS_BLOG_TEMPLATE_OUTPUT to modify any part of the template.

You could use a plugin like cssnaked, and modify it to modify the img tag like you want.

If you are willing to modify core code, it is probably less lines of code to add the php line like you wanted to.
jondaley
Lifetype Expert
 
Posts: 6169
Joined: Thu May 20, 2004 6:19 pm
Location: Pittsburgh, PA, USA
LifeType Version: 1.2.11 devel branch

Re: Make images responsive

Postby easyexpat on Fri Feb 20, 2015 11:46 am

jondaley wrote:to modify any part of the template.

Many thanks for your response jondaley. I have no problem modifying core code, but I wanted to modify ONLY the post part, not the entire template for the blog. That's why I wanted to know if there is something that I could do to target only the post part.
easyexpat
 
Posts: 136
Joined: Mon Jun 13, 2005 4:39 pm

Re: Make images responsive

Postby easyexpat on Tue Feb 24, 2015 11:40 am

As I have implemented a solution in order to make all images responsive inside posts (using bootstrap css), here is what I've done.

In class/dao/article.class.php
Replace
Code: Select all
function getText( $replace = '' )
      {
            if( $replace !== false )
                return TextFilter::balanceTags(str_replace( POST_EXTENDED_TEXT_MODIFIER, $replace, $this->_text ));
            else
               return $this->_text;
      }

By
Code: Select all
function getText( $replace = '' )
      {
         //MOD - Make image responsive
         $respimg_text = preg_replace('/<img(.*)>/', '<img class="img-responsive"$1>', $this->_text);
         
         if( $replace !== false )
                return TextFilter::balanceTags(str_replace( POST_EXTENDED_TEXT_MODIFIER, $replace, $respimg_text ));
            else
               return $respimg_text;
      }


It works for me.

I have previously tried another solution, which is using Smarty Variable Modifiers called "replace" inside the template. It might have been cleaner but it would have also been more time as I needed to edit all existing blogs I use.
At the end it did not work anyway, but I don't know why. I post here what I intended:

In the template, in post.template
Replace
Code: Select all
{$post->getText()}

By
Code: Select all
{$post->getText()|replace:"/<img(.*)>/":"<img class='img-responsive'$1>"}


I found some ideas and tips in this topic: viewtopic.php?f=8&t=1407
easyexpat
 
Posts: 136
Joined: Mon Jun 13, 2005 4:39 pm


Return to Requests and Suggestions

cron