CODEWITHSUNDEEP
twitter-bootstraprotation
Mr.Web
Mr.Web

Reputation: 7154

Twitter bootstrap image rotating (unwanted)

I'm writing a project and I have 3 thumbnails per row.

Each one has this code:

<ul class="thumbnails">
        <?php foreach($list_pjt as $progetto): ?>
            <?= ($row_close_after_three_thumbs == 0) ? '<div class="row-fluid">' : '' ; ?>
            <li class="span4 pjt-thumb" >
              <div class="thumbnail alert-<?= $status_bg ?>">
                <?php
                    $img_thumb_pjt = ($progetto->img == '' || $progetto->img == '0') ? "img/site_basics/pjt_thumb.jpg" : "upload/$progetto->pjt_table/".$this->session->userdata('user_id')."/$progetto->img" ;
                ?>
                <img src="<?= base_url($img_thumb_pjt) ?>" alt="ALT NAME">
                <div class="caption text-center">
                  <h5><?= (strlen($progetto->pjt_name) > 25) ? substr($progetto->pjt_name, 0, 25).'...' : $progetto->pjt_name ?></h5>
                  <p class="badge badge-inverse"><small><?= $type_name ?></small></p>

                  <p><small><?= $this->lang->line('profile_last_mod') ?>:<br><?= timestamp_to_date($progetto->last_mod, $this->session->userdata('lang')) ?></small></p>
                  <p><small><i class="icon <?= $status_icon ?>"></i> <?= $status_txt ?></small></p>
                <?php if($progetto->completato != 0): ?>
                    <p><a href="<?= base_url('project/showpjt/'.$progetto->id_pjt) ?>" class="btn btn-<?= $btn_color ?> btn-block"><?= $this->lang->line('profile_open') ?></a></p>
                <?php else: ?>
                    <p><a href="<?= base_url('project/newpjt/'.$progetto->pjt_table.'/'.$progetto->id_acquisto) ?>" class="btn btn-<?= $btn_color ?> btn-block"><?= $this->lang->line('profile_edit') ?></a></p>
                <?php endif; ?>

                </div>
              </div>
            </li>
        <?php endforeach; ?>
    </ul>

Some picture, per what I see the ones who are horizontally taken, show up fine (see screenshot on the right) others are rotating (screenshot image one)

This is the screenshot: Result

Any reason for this? How do I fix it?

As a note, this is the uploaded image (straight...): Original Picture

Upvotes: 1

Views: 2683

Answers (1)

albertedevigo
albertedevigo

Reputation: 18411

It's not Bootstrap, the problem is the image metadata. If you inspect it you'll find:

kMDItemOrientation = 1

So your iPhone and computer are reading this metadata and correcting orientation before showing the image, but browsers don't. The screenshot shows the image as it is, without reading metadata.

Ask Google about removing the image metadata (there are plenty of ways depending on your OS), then true-rotate it before uploading and the problem will be solved.

Upvotes: 10

Related Questions