如何显示文件夹codeigniter中的原始图像

Question

I am trying to display image from its original folder. I want to display the original image in a 1366x768 window.

When I change

<?php $width = 1366;$height = 768; ?>

height in this line, it automaticaly display crop the image in this height and width.

<div class="white_box">
<div class="box-body">
<span class="hide WallHashID"><?php echo $wallpaper->wallpaper_hash; ?></span>
<?php $width = 1366;
$height = 768; ?>
<div class="row">
<div class="col-sm-12">
    <div class="wallpaper_image">
        <img class="thumbnail img-responsive"
             style="width:100%; height:auto; display:block; max-width:<?php echo $width; ?>px;max-height: <?php echo $height; ?>px;"
             src="<?php echo $this->image_workshop->crop_image(ORIGINALS_FOLDER_WF . '/' . $wallpaper->wallpaper_image_path, $width, $height, $wallpaper->wallpaper_crop_position, 'thumbnail'); ?>"
             alt="<?php echo $wallpaper->wallpaper_name; ?>">
        </div>
      </div>
    </div>
  </div>
</div>
<?php } ?>

</div>

Answer 1

You don't have to use $this->image_workshop->crop_image function, or any other function to process the image. You can use the absolute path of the image and style it with css or with html attributes height and width. For example style it with css:

<img class="thumbnail img-responsive"
             style="width:<?php echo $width;?>px; height:<?php echo $height;?>px; display:block; max-width:<?php echo $width; ?>px;max-height: <?php echo $height; ?>px;"
             src="<?php echo ORIGINALS_FOLDER_WF . '/' . $wallpaper->wallpaper_image_path ; ?>"
             alt="<?php echo $wallpaper->wallpaper_name; ?>">

Or with html tag attributes:

<img class="thumbnail img-responsive"
                 width="<?php echo $width;?>" 
                 height="<?php echo $height;?>"
                 src="<?php echo ORIGINALS_FOLDER_WF . '/' . $wallpaper->wallpaper_image_path ; ?>"
                 alt="<?php echo $wallpaper->wallpaper_name; ?>">

The down side is that you would load the full size image in the browser, where it gets resized. If you care about the information size for the picture, you should create the thumbnails versions as you upload the original. Then use thumbnail version of the image.