使用Open Library API的Codeigniter显示图像

Question

I am retrieving data from my MySQL database, and displaying a table including;

• item_id
• item_image (empty)
• item_title
• item_isbn (contains hyphens)

The code I have so far works, in the sense that I am able to retrieve the data and display it in a simple table.

My code so far;

model

class Items_model extends CI_Model {
    public function itemList() {
        $query = $this->db->query("SELECT * FROM item LIMIT 10");
        return $query->result_array();
    }        
}

view

<table>
    <tr>
        <td><strong>ID</strong></td>
        <td><strong>Image</strong></td>
        <td><strong>Title</strong></td>
        <td><strong>ISBN</strong></td>
    </tr>
<?php foreach ($items as $item): ?>
        <tr>
            <td><?php echo $item['item_id']; ?></td>         
            <td><?php echo $item['item_image']; ?></td>   
            <td><?php echo $item['item_title']; ?></td>
            <td><?php echo $item['item_isbn']; ?></td>
        </tr>
<?php endforeach; ?>
</table>

controller

class Items extends CI_Controller {
    public function index() {
        $data['items'] = $this->items_model->itemList();        
        $this->load->view('item_view', $data);
    }
}

I want to use the book's ISBN, retrieve the book cover using Open Library Covers API and populate the image field in the html table.

Apparently this is possible by using the following URL pattern;

http://covers.openlibrary.org/b/isbn/0385472579-S.jpg

I have tried the following code in my view but it doesn't work;

<td><img src="<?php echo ('http://covers.openlibrary.org/b/isbn/'. stripslashes($item['item_isbn']) .'-S.jpg');?>"/></td>

Ideally I would like to display a standard 'No Image Found' jpg, if I'm unable to retrieve an image using Open Library API also, but I'm sure I can work this part out on my own (hopefully!).

Any advice would be appreciated, very new to Codeigniter.

Answer 1

Assuming you have valid ISBN's stored in your database, please change your view to the following:

<table>
    <tr>
        <td><strong>ID</strong></td>
        <td><strong>Image</strong></td>
        <td><strong>Title</strong></td>
        <td><strong>ISBN</strong></td>
    </tr>
    <?php foreach ($items as $item): ?>
        <tr>
            <td><?php echo $item['item_id']; ?></td>
            <td><img src="http://covers.openlibrary.org/b/isbn/<?php echo $item['item_isbn']; ?>-S.jpg" /></td>
            <td><?php echo $item['item_title']; ?></td>
            <td><?php echo $item['item_isbn']; ?></td>
        </tr>
    <?php endforeach; ?>
</table>

If an image is not found, a 1px by 1px transparent pixel is displayed.

So the code syntax to display the image is:

<img src="http://covers.openlibrary.org/b/isbn/<?php echo $item['item_isbn']; ?>-S.jpg" />

Resulting screenshot from my test

Update (If No Image Found)

As per the documentation:

By default it returns a blank image if the cover cannot be found. If you append ?default=false to the end of the URL, then it returns a 404 instead.

To add your own fallback image, you could append this parameter to the image URL, and then check if the file doesn't exist.

There are multiple ways to check if a file exists or not. Using curl would probably be the most graceful but here is a...

Quick & Dirty Method

This uses a ternary operator in conjunction with the getimagesize function to handle the fallback. You will need to ensure that GD (image processing library) support is enabled in your version of PHP for this.

<img src="<?php echo (!getimagesize('http://covers.openlibrary.org/b/isbn/' . $item['item_isbn'] . '-S.jpg?default=false')) ? '/path/to/your-image.jpg' : 'http://covers.openlibrary.org/b/isbn/' . $item['item_isbn'] . '-S.jpg'; ?>" />

Think of the ternary operator syntax like an inline if/else statement.