|
1 | 1 | <?php require 'main.php' ?> |
2 | 2 | <html> |
3 | | - <head> |
| 3 | +<head> |
4 | 4 | <meta charset="utf-8"> |
5 | 5 | <title>PhotoAlbum - Main page</title> |
6 | 6 |
|
7 | | - <link href="style.css" media="all" rel="stylesheet" /> |
| 7 | + <link href="style.css" media="all" rel="stylesheet"/> |
8 | 8 |
|
9 | 9 | <link rel="shortcut icon" |
10 | | - href="<?php echo cloudinary_url("http://cloudinary.com/favicon.png", |
11 | | - array("type" => "fetch")); ?>" /> |
12 | | - |
| 10 | + href="<?php echo cloudinary_url("http://cloudinary.com/favicon.png", array("type" => "fetch")); ?>"/> |
| 11 | + |
13 | 12 | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> |
14 | 13 |
|
15 | 14 | <script type='text/javascript'> |
16 | | - $(function () { |
17 | | - $('.toggle_info').click(function () { |
18 | | - $(this).closest('.photo').toggleClass('show_more_info'); |
19 | | - return false; |
| 15 | + $(function () { |
| 16 | + $('.toggle_info').click(function () { |
| 17 | + $(this).closest('.photo').toggleClass('show_more_info'); |
| 18 | + return false; |
| 19 | + }); |
20 | 20 | }); |
21 | | - }); |
22 | 21 | </script> |
23 | | - </head> |
24 | | - <body> |
25 | | - |
26 | | - <div id="logo"> |
27 | | - <!-- This will render the image fetched from a remote HTTP URL using Cloudinary --> |
28 | | - <?php echo fetch_image_tag("http://cloudinary.com/images/logo.png") ?> |
29 | | - </div> |
30 | | - |
31 | | - <div id="posterframe"> |
32 | | - <!-- This will render the fetched Facebook profile picture using Cloudinary according to the |
33 | | - requested transformations --> |
34 | | - <?php echo facebook_profile_image_tag("officialchucknorrispage", array( |
35 | | - "format" => "png", |
36 | | - "transformation" => array( |
37 | | - array("height" => 95, "width" => 95, "crop" => "thumb", "gravity" => "face", |
38 | | - "effect" => "sepia", "radius" => 20 |
39 | | - ), array("angle" => 10) |
40 | | - ))); |
41 | | - ?> |
42 | | - </div> |
43 | | - |
44 | | - <h1>Welcome!</h1> |
45 | | - |
46 | | - <p> |
47 | | - This is the main demo page of the PhotoAlbum sample PHP application of Cloudinary.<br /> |
48 | | - Here you can see all images you have uploaded to this PHP application and find some information on how |
49 | | - to implement your own PHP application storing, manipulating and serving your photos using Cloudinary! |
50 | | - </p> |
| 22 | +</head> |
| 23 | +<body> |
| 24 | + |
| 25 | +<div id="logo"> |
| 26 | + <!-- This will render the image fetched from a remote HTTP URL using Cloudinary --> |
| 27 | + <?php echo fetch_image_tag("http://cloudinary.com/images/logo.png") ?> |
| 28 | +</div> |
| 29 | + |
| 30 | +<div id="posterframe"> |
| 31 | + <!-- This will render the fetched Facebook profile picture using Cloudinary according to the |
| 32 | + requested transformations --> |
| 33 | + <?php echo facebook_profile_image_tag("officialchucknorrispage", array( |
| 34 | + "format" => "png", |
| 35 | + "transformation" => array( |
| 36 | + array( |
| 37 | + "height" => 95, |
| 38 | + "width" => 95, |
| 39 | + "crop" => "thumb", |
| 40 | + "gravity" => "face", |
| 41 | + "effect" => "sepia", |
| 42 | + "radius" => 20, |
| 43 | + ), |
| 44 | + array("angle" => 10), |
| 45 | + ), |
| 46 | + )); |
| 47 | + ?> |
| 48 | +</div> |
| 49 | + |
| 50 | +<h1>Welcome!</h1> |
| 51 | + |
| 52 | +<p> |
| 53 | + This is the main demo page of the PhotoAlbum sample PHP application of Cloudinary.<br/> |
| 54 | + Here you can see all images you have uploaded to this PHP application and find some information on how |
| 55 | + to implement your own PHP application storing, manipulating and serving your photos using Cloudinary! |
| 56 | +</p> |
51 | 57 |
|
| 58 | +<p> |
| 59 | + All of the images you see here are transformed and served by Cloudinary. |
| 60 | + For instance, the logo and the poster frame. |
| 61 | + They are both generated in the cloud using the Cloudinary shortcut functions: fetch_image_tag and |
| 62 | + facebook_profile_image_tag. |
| 63 | + These two pictures weren't even have to be uploaded to Cloudinary, they are retrieved by the service, transformed, |
| 64 | + cached and distributed through a CDN. |
| 65 | +</p> |
| 66 | + |
| 67 | +<h1>Your Images</h1> |
| 68 | +<div class="photos"> |
52 | 69 | <p> |
53 | | - All of the images you see here are transformed and served by Cloudinary. |
54 | | - For instance, the logo and the poster frame. |
55 | | - They are both generated in the cloud using the Cloudinary shortcut functions: fetch_image_tag and facebook_profile_image_tag. |
56 | | - These two pictures weren't even have to be uploaded to Cloudinary, they are retrieved by the service, transformed, cached and distributed through a CDN. |
57 | | - </p> |
| 70 | + Following are the images uploaded by you. You can also upload more pictures. |
58 | 71 |
|
59 | | - <h1>Your Images</h1> |
60 | | - <div class="photos"> |
61 | | - <p> |
62 | | - Following are the images uploaded by you. You can also upload more pictures. |
63 | | - |
64 | | - You can click on each picture to view its original size, and see more info about and additional transformations. |
65 | | - <a class="upload_link" href="upload.php">Upload Images...</a> |
66 | | - </p> |
67 | | - <?php if (R::count('photo') == 0) { ?> |
| 72 | + You can click on each picture to view its original size, and see more info about and additional transformations. |
| 73 | + <a class="upload_link" href="upload.php">Upload Images...</a> |
| 74 | + </p> |
| 75 | + <?php if (R::count('photo') == 0) { ?> |
68 | 76 | <p>No images were uploaded yet.</p> |
69 | | - <?php |
70 | | - } |
71 | | - $index = 0; |
72 | | - foreach (R::findAll('photo') as $photo) { |
73 | | - ?> |
| 77 | + <?php |
| 78 | + } |
| 79 | + $index = 0; |
| 80 | + foreach (R::findAll('photo') as $photo) { |
| 81 | + ?> |
74 | 82 | <div class="photo"> |
75 | | - <a href="<?php echo cloudinary_url($photo["public_id"], |
| 83 | + <a href="<?php echo cloudinary_url($photo["public_id"], |
76 | 84 | array("format" => $photo["format"])) ?>" target="_blank" class="public_id_link"> |
77 | | - <?php |
78 | | - echo "<div class='public_id'>" . $photo["public_id"] . "</div>"; |
79 | | - echo cl_image_tag($photo["public_id"], array_merge($thumbs_params, array("crop" => "fill"))); |
| 85 | + <?php |
| 86 | + echo "<div class='public_id'>" . $photo["public_id"] . "</div>"; |
| 87 | + echo cl_image_tag($photo["public_id"], array_merge($thumbs_params, array("crop" => "fill"))); |
80 | 88 | ?> |
81 | 89 | </a> |
82 | | - |
83 | | - <div class="less_info"> |
84 | | - <a href="#" class="toggle_info">More transformations...</a> |
85 | | - </div> |
86 | | - |
87 | | - <div class="more_info"> |
88 | | - <a href="#" class="toggle_info">Hide transformations...</a> |
89 | | - <table class="thumbnails"> |
90 | | - <?php |
91 | | - $thumbs = array( |
92 | | - array("crop" => "fill", "radius" => 10), |
93 | | - array("crop" => "scale"), |
94 | | - array("crop" => "fit", "format" => "png"), |
95 | | - array("crop" => "thumb", "gravity" => "face"), |
96 | | - array("override" => true, "format" => "png", "angle" => 20, "transformation" => |
97 | | - array("crop" => "fill", "gravity" => "north", "width" => 150, "height" => 150, "effect" => "sepia") |
98 | | - ), |
99 | | - ); |
100 | | - foreach($thumbs as $params) { |
101 | | - $merged_params = array_merge((\Cloudinary::option_consume($params, "override")) ? array() : $thumbs_params, $params); |
102 | | - echo "<td>"; |
103 | | - echo "<div class='thumbnail_holder'>"; |
104 | | - echo "<a target='_blank' href='" . cloudinary_url($photo["public_id"], $merged_params) . "'>" . |
105 | | - cl_image_tag($photo["public_id"], $merged_params) . "</a>"; |
106 | | - echo "</div>"; |
107 | | - echo "<br/>"; |
108 | | - \PhotoAlbum\array_to_table($merged_params); |
109 | | - echo "</td>"; |
110 | | - } |
111 | | - ?> |
112 | | - |
113 | | - </table> |
114 | | - |
115 | | - <div class="note"> |
116 | | - Take a look at our documentation of <a href="http://cloudinary.com/documentation/image_transformations" target="_blank">Image Transformations</a> for a full list of supported transformations. |
117 | | - </div> |
118 | | - </div> |
| 90 | + |
| 91 | + <div class="less_info"> |
| 92 | + <a href="#" class="toggle_info">More transformations...</a> |
| 93 | + </div> |
| 94 | + |
| 95 | + <div class="more_info"> |
| 96 | + <a href="#" class="toggle_info">Hide transformations...</a> |
| 97 | + <table class="thumbnails"> |
| 98 | + <?php |
| 99 | + $thumbs = array( |
| 100 | + array("crop" => "fill", "radius" => 10), |
| 101 | + array("crop" => "scale"), |
| 102 | + array("crop" => "fit", "format" => "png"), |
| 103 | + array("crop" => "thumb", "gravity" => "face"), |
| 104 | + array( |
| 105 | + "override" => true, |
| 106 | + "format" => "png", |
| 107 | + "angle" => 20, |
| 108 | + "transformation" => |
| 109 | + array("crop" => "fill", |
| 110 | + "gravity" => "north", |
| 111 | + "width" => 150, |
| 112 | + "height" => 150, |
| 113 | + "effect" => "sepia", |
| 114 | + ), |
| 115 | + ), |
| 116 | + ); |
| 117 | + foreach ($thumbs as $params) { |
| 118 | + $merged_params = array_merge((\Cloudinary::option_consume($params, "override")) |
| 119 | + ? array() : $thumbs_params, $params); |
| 120 | + echo "<td>"; |
| 121 | + echo "<div class='thumbnail_holder'>"; |
| 122 | + echo "<a target='_blank' href='" . cloudinary_url($photo["public_id"], $merged_params) . "'>" . |
| 123 | + cl_image_tag($photo["public_id"], $merged_params) . "</a>"; |
| 124 | + echo "</div>"; |
| 125 | + echo "<br/>"; |
| 126 | + \PhotoAlbum\array_to_table($merged_params); |
| 127 | + echo "</td>"; |
| 128 | + } |
| 129 | + ?> |
| 130 | + |
| 131 | + </table> |
| 132 | + |
| 133 | + <div class="note"> |
| 134 | + Take a look at our documentation of <a |
| 135 | + href="http://cloudinary.com/documentation/image_transformations" target="_blank">Image |
| 136 | + Transformations</a> for a full list of supported transformations. |
| 137 | + </div> |
| 138 | + </div> |
119 | 139 | </div> |
120 | | - <?php $index++; } ?> |
121 | | - </div> |
122 | | - </body> |
| 140 | + <?php $index++; |
| 141 | + } ?> |
| 142 | +</div> |
| 143 | +</body> |
123 | 144 | </html> |
0 commit comments