在表格中插入多张图片,但是图片都很大,怎么样操作能使插入的图片自动适应每一个单元格的大小,从而不用每
712
2022-05-30
一.环境准备
php7.1+NGINX+ci框架环境,需要注册有pexels api_key
二.html页面
* {
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;
}
load->helper('url');?>
图片ID | 宽度 | 高度 | 色调 | 原始图 | 2X图 | 大图 | 中图 | 小图 | 竖向图 | 横向图 | 极小图 | ||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
= $imgs['id'] ?> | = $imgs['width'] ?> | = $imgs['height'] ?> | = $imgs['photographer'] ?> | = $imgs['photographer_id'] ?> | 颜色块 | 每页图片数据量:= $per_page; ?> | 该类图片总数:= $total_results; ?> | = $pagenation; ?> |
三.控制器
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:此处换为你的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;//输出json
//处理json数据
extract(json_decode($imageList, true));
//分页
$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;//当前页码的前面和后面的“数字”链接的数量
$config['enable_query_strings']=true;//链接将自动地被重写成查询字符串格式
$config['page_query_string'] = TRUE;
$config['reuse_query_string'] = true;
$config['query_string_segment']='page';
$config['cur_page'] = ' 1';
$config['first_link'] = ' 第一页';
$config['last_link'] = '最后一页 ';
$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
)
);
}
}
四.效果图
五.pexels 文档: https://www.pexels.com/zh-cn/api/documentation/?
每当你提交一个 API 请求时,请确保一定要显示到 Pexels 的醒目链接。你可以使用文本链接(如“照片由 Pexels 提供”)或带有我们徽标的链接。
你不得拷贝或复制 Pexels 的核心功能(包括提供 Pexels 内容作为壁纸应用)。
请勿滥用该 API。默认情况下,API 的使用率上限为每小时 200 个请求和每月 20000 个请求。你可以联系我们,申请提高此限制,但请提供示例,或做好准备提供演示文件,确保清晰展示你使用该 API 时已注明归属。如果你符合我们的 API 条款,可以免费获得无限次请求。
如有滥用 Pexels API 的行为(包括但不限于试图规避使用率限制),将导致你的 API 使用权限被终止。
API
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。