当前位置：网站首页>Based on pexels image material API, sort out the material resource library

Based on pexels image material API, sort out the material resource library

2022-07-25 20:41:00 【Full stack programmer webmaster】

Hello everyone , I meet you again , I'm the king of the whole stack .

One . Environmental preparation

php7.1+NGINX+ci Framework environment , Need to register with pexels api_key

Two .html page

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        font-size: 16px;
    }

    a {
        text-decoration: none;
        color: #FFFFFF;
    }
    .successful_end {
        width: 100%;
        height: 3rem;
        background-color: #363;
        margin-bottom: 2px;
    }
    td, th {
        border: 1px dotted #99a9bf;
    }
    th {
        background-color: #995300;
    }

    td > a, strong {
        margin-left: 10px;
    }

</style>
<?php $this->load->helper('url');?>
<script src="<?= base_url().'/static/js/jquery-3.2.1.min.js'?>"></script>
<body>
<div class="successful">
    <table style="text-align: center;">
        <tr>
            <th> picture ID</th>
            <th> Width </th>
            <th> Height </th>
            <th> author </th>
            <th> author ID</th>
            <th> tonal </th>
            <th> The original picture </th>
            <th>2X chart </th>
            <th> Big picture </th>
            <th> Chinese </th>
            <th> Little picture </th>
            <th> Vertical drawing </th>
            <th> Horizontal view </th>
            <th> Minimal graph </th>
        </tr>

        <?php
        foreach ($photos as $imgs) {
            ?>
            <tr>
                <td><?= $imgs['id'] ?></td>
                <td><?= $imgs['width'] ?></td>
                <td><?= $imgs['height'] ?></td>
                <td><?= $imgs['photographer'] ?></td>
                <td><?= $imgs['photographer_id'] ?></td>
                <td>
                    <div style="background-color: <?= $imgs['avg_color']; ?>;width: 50px;height: 35px"> Color block </div>
                </td>

                <td><img src="<?= $imgs['src']['original'] ?>" alt="" width="100%" height="auto"></td>
                <td><img src="<?= $imgs['src']['large2x'] ?>" alt="" width="100%" height="auto"></td>
                <td><img src="<?= $imgs['src']['large'] ?>" alt="" width="50%" height="auto"></td>
                <td><img src="<?= $imgs['src']['medium'] ?>" alt="" width="50%" height="auto"></td>
                <td><img src="<?= $imgs['src']['small'] ?>" alt="" width="50%" height="auto"></td>
                <td><img src="<?= $imgs['src']['portrait'] ?>" alt="" width="50%" height="auto"></td>
                <td><img src="<?= $imgs['src']['landscape'] ?>" alt="" width="50%" height="auto"></td>
                <td><img src="<?= $imgs['src']['tiny'] ?>" alt=""></td>
            </tr>
            <?php
        }
        ?>

        <tr class="successful_end">
            <td colspan="3"> The current page number :<?= $current_page; ?></td>
            <td colspan="3"> Current classification :
                <select name="style" onchange="window.open(this.options[this.selectedIndex].value,'_self')">
                    <option value="<?=  current_url() . '?style=People&per_page='.$per_page ?>"<?= ($this->input->get('style')=='People')? 'selected':''?>>People</option>
                    <option value="<?= current_url() . '?style=Ocean&per_page='.$per_page  ?>" <?= ($this->input->get('style')=='Ocean')? 'selected':''?>>Ocean</option>
                    <option value="<?= current_url() . '?style=Tigers&per_page='.$per_page  ?>"<?= ($this->input->get('style')=='Tigers')? 'selected':''?>>Tigers</option>
                    <option value="<?= current_url() . '?style=nature&per_page='.$per_page  ?>"<?= ($this->input->get('style')=='nature')? 'selected':''?>>nature</option>
                </select>
            </td>
            <td colspan="2"> The amount of image data per page :<?= $per_page; ?></td>
            <td colspan="4"> The total number of such pictures :<?= $total_results; ?></td>
            <td colspan="4"><?= $pagenation; ?></td>
            <td></td>
        </tr>
    </table>

</div>
</body>

</html>

3、 ... and . controller

<?php


class Image extends Base_Controller
{

    public function __construct()
    {
        parent::__construct();
        $this->load->library('pagination');
        $this->load->helper('url');
        $this->redis = $this->connectredis();
    }

    public function getImageLists()
    {
        $per_page = $this->input->get('per_page') ?? 1;
        $page = $this->input->get('page') ?? 1;
        $style = $this->input->get('style') ?? 'people';

        $image_key = 'images_page_' . $page . '_style_' . $style;
        $imageList = $this->redis->get($image_key);

        if (!$imageList) {
            $ch = curl_init();
            //https://api.pexels.com/v1/search/?page=2&per_page=15&query=people
            $url = 'https://api.pexels.com/v1/search?query=' . $style . '&page=' . $page . '&per_page=' . $per_page;
            curl_setopt($ch, CURLOPT_URL, $url);
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
            curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET');
            $headers = array();
            $headers[] = 'Authorization:api_key'; //todo: Change here for your api_key
            curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
            $result = curl_exec($ch);
            if (curl_errno($ch)) {
                echo 'Error:' . curl_error($ch);
            }
            curl_close($ch);

            $imageList = $result;
            $this->redis->set($image_key, $result,3600);
        }
        //echo $result;// Output json

        // Handle json data 
        extract(json_decode($imageList, true));

        // Pagination 
        $config['base_url'] = base_url().'/v1/image/getImageLists';
        $config['total_rows'] = $total_results;
        $config['per_page'] = $per_page;
//        $config['uri_segment'] = 2;
        $config['num_links'] = 2;// Before and after the current page number “ Numbers ” The number of links 
        $config['enable_query_strings']=true;// Links will automatically be rewritten into query string format 
        $config['page_query_string'] = TRUE;
        $config['reuse_query_string'] = true;
        $config['query_string_segment']='page';
        $config['cur_page'] = ' 1';
        $config['first_link'] = '  first page ';
        $config['last_link'] = ' The last page  ';

        $this->pagination->initialize($config);
        $pagenation=$this->pagination->create_links();

        $this->load->view('image/image',
            array('current_page' => ceil($page/$per_page)+1,
                'per_page' => $per_page,
                "photos" => $photos,
                'next_page' => $next_page,
                'total_results' => $total_results,
                'pagenation'=>$pagenation
            )
        );
    }

}

Four . design sketch

5、 ... and .pexels file : https://www.pexels.com/zh-cn/api/documentation/?

Whenever you submit a API When asked , Please make sure to show To Pexels Eye catching links . You can use text links （ Such as “ Photos by Pexels Provide ”） Or a link with our logo . Where possible , Please always indicate our photographer （ Such as “Pexels Upper slave John Doe Photos taken ”, And it can be transferred to Pexels Links to photo pages ）. You may not copy or duplicate Pexels Core functions （ Including provision Pexels Content as wallpaper Application ）. Do not abuse this API. By default ,API The upper limit of usage is per hour 200 Requests and monthly 20000 A request . In case of abuse Pexels API act （ Including but not limited to trying to circumvent usage restrictions ）, Will lead to your API Permission is terminated .

Publisher ： Full stack programmer stack length , Reprint please indicate the source ：https://javaforall.cn/111545.html Link to the original text ：https://javaforall.cn

原网站

版权声明
本文为[Full stack programmer webmaster]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207191047243642.html

当前位置：网站首页>Based on pexels image material API, sort out the material resource library

Based on pexels image material API, sort out the material resource library

边栏推荐

猜你喜欢

随机推荐