0

I have the below code in the page.tpl.php file.

<header id="navbar" role="banner" class="<?php print $navbar_classes; ?>">
  <div class="container">
    <div class="navbar-header col-xs-12">
      <?php if ($logo): ?>
      <a class="logo navbar-btn pull-left col-xs-12 col-sm-12 col-md-2 col-lg-2" href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>">
        <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
      </a>
      <?php endif; ?>
............
  </div>
</header>

As you can see, I have written bootstrap class col-xs-12 inside a class:

<a class="logo navbar-btn pull-left col-xs-12 col-sm-12 col-md-2 col-lg-2" ....   </a>

Then I uploaded an image whose original size is 658 x 318 (Appearance > bootstrap sub theme > Logo image ).

When I visit my using in mobile phone, I still see the logo in original size. I thought me adding col-xs-12 will instruct bootstrap to fit the image in 12 column grid system of my mobile screen. Do you know why image is still in original size even though I added the bootstrap class col-xs-12?


#Test1 - Passed

In tpl file > header region > I have added img-responsive class:

">

  <div class="container">
    <div class="navbar-header col-xs-12">
      <?php if ($logo): ?>
      <a class="logo navbar-btn pull-left col-xs-12 col-sm-12 col-md-2 col-lg-2" href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>">
        <img src="<?php print $logo; ?>" class="img-responsive"  alt="<?php print t('Home'); ?>" />
      </a>
      <?php endif; ?>
.....

</div>
</header>

After that, I have uploaded the logo (appearance > bootstrap > Upload image...). When I view the page in mobile, I see that image was responsive. This is good.

#Test2 - Failed

In tpl file > main container region > I have added img-responsive class:

<div class = "main-container container">

/** I have added this for all the images to be responsive for main contents */
<div class="container">
  <img src="..." class="img-responsive" alt="Responsive image">
</div>

  <header role="banner" id="page-header">
    <?php if (!empty($site_slogan)): ?>
      <p class="lead"><?php print $site_slogan; ?></p>
    <?php endif; ?>

    <?php print render($page['header']); ?>
  </header> <!-- /#page-header -->

  <div class="row">

    <?php if (!empty($page['sidebar_first'])): ?>
      <aside class="col-sm-3" role="complementary">
        <?php print render($page['sidebar_first']); ?>
      </aside>  <!-- /#sidebar-first -->
    <?php endif; ?>

............

</div>

After that, I uploaded some images to content types. When I view the node in mobile, I still see those images in original sizes. How do I update the tpl file so all the images in main container class become responsive as well?

3 Answers 3

3

Use .image-responsive class in your tpl.php file on your image or link tag like that

<div class="container">
  <h2>Image</h2>
  <p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>                  
  <img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236"> 
</div>

image-responsive in bootstrap

1

The image itself needs an .img-responsive class on it to scale.

1
  • Where would you add the class? In tpl file or css? In either case, can you please provide some details because I am new to responsive site.
    – autop
    Nov 24, 2015 at 3:04
1

This helped me solving the problem:

For the bootstrap theme, under appearances > visit the settings page for the theme. Under the default tab ("general") and open the "Images" fieldset and check "Responsive Images "

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.