Permalink
Browse files

Sample projects: editing, fixing, look & feel

  • Loading branch information...
1 parent 59b58c2 commit 27be9d365e07acab5d87063d4a95378472988dc7 @nadavs nadavs committed Mar 9, 2013
@@ -1,17 +0,0 @@
-<?php
-include 'main.php';
-
-function create_photo() {
- $photo = R::dispense('photo');
- $photo->public_id = 'sample';
- $photo->format = 'jpg';
- $photo->timestamp = R::isoDateTime();
- #var_dump($photo);
- $id = R::store($photo);
- #var_dump($id);
- return $id;
-};
-
-echo "ID: " . create_photo();
-
-?>
View
@@ -4,32 +4,14 @@
<meta charset="utf-8">
<title>PhotoAlbum - Main page</title>
+ <link href="style.css" media="all" rel="stylesheet" />
+
<link rel="shortcut icon"
href="<?php echo cloudinary_url("http://cloudinary.com/favicon.png",
array("type" => "fetch")); ?>" />
+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
- <style>
- .more_info, .show_more_info .less_info {
- display: none;
- }
- .show_more_info .more_info, .less_info {
- display: inline-block;
- }
- .inline {
- display: inline-block;
- }
- td {
- vertical-align: top;
- padding-right: 5px;
- }
- .photo a {
- display: inline-block;
- width: 200px;
- }
- .photo > * {
- vertical-align: top;
- }
- </style>
+
<script type='text/javascript'>
$(function () {
$('.toggle_info').click(function () {
@@ -40,12 +22,14 @@
</script>
</head>
<body>
+
<div id="logo">
- <!-- This will render the fetched image using cloudinary -->
+ <!-- This will render the image fetched from a remote HTTP URL using Cloudinary -->
<?php echo fetch_image_tag("http://cloudinary.com/images/logo.png") ?>
</div>
- <div id="posterframe" style="position: absolute; right: 0; top: 5px;">
- <!-- This will render the fetched facebook image using cloudinary with all the
+
+ <div id="posterframe">
+ <!-- This will render the fetched Facebook profile picture using Cloudinary according to the
requested transformations -->
<?php echo facebook_profile_image_tag("officialchucknorrispage", array(
"format" => "png",
@@ -56,71 +40,81 @@
)));
?>
</div>
+
<h1>Welcome!</h1>
- <p>This is the main demo page of the PhotoAlbum sample PHP application for Cloudinary.<br />
- Here you can see all the photos you had uploaded to the app and find some information about how
- to implement your own PHP application storing, manipulating and serving your photos using
- Cloudinary!</p>
+
+ <p>
+ This is the main demo page of the PhotoAlbum sample PHP application of Cloudinary.<br />
+ Here you can see all images you have uploaded to this PHP application and find some information on how
+ to implement your own PHP application storing, manipulating and serving your photos using Cloudinary!
+ </p>
- <p>All of the images you see here are served by cloudinary. For instance the logo and the posterframe. They are both render from server side using the Cloudinary shortcut functions: fetch_image_tag and facebook_profile_image_tag. These two pictures weren't even have to be uploaded to cloudinary, they are retrieved by the backend, transformed, cached and distributed using a CDN.
+ <p>
+ All of the images you see here are transformed and served by Cloudinary.
+ For instance, the logo and the poster frame.
+ They are both generated in the cloud using the Cloudinary shortcut functions: fetch_image_tag and facebook_profile_image_tag.
+ 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.
</p>
- <h1>Photos</h1>
+ <h1>Your Images</h1>
<div class="photos">
- <?php if (R::count('photo') > 0) { ?>
- <p>Following are the photos uploaded by you. If you want to upload more pictures go to the
- <a href="upload.php">upload page</a>.<br />
- You can click each picture to view its original size, and see more info about it by clicking
- <i>show more...</i></p>
- <?php } else { ?>
- <p>No images were uploaded yet. click <a href="upload.php">here</a>
- to go to the upload page</p>
+ <p>
+ Following are the images uploaded by you. You can also upload more pictures.
+
+ You can click on each picture to view its original size, and see more info about and additional transformations.
+ <a class="upload_link" href="upload.php">Upload Images...</a>
+ </p>
+ <?php if (R::count('photo') == 0) { ?>
+ <p>No images were uploaded yet.</p>
<?php
}
$index = 0;
foreach (R::findAll('photo') as $photo) {
?>
- <div class="photo<?php echo $index == 1 ? " show_more_info" : "" ?>">
+ <div class="photo">
<a href="<?php echo cloudinary_url($photo["public_id"],
- array("format" => $photo["format"])) ?>" target="_blank">
+ array("format" => $photo["format"])) ?>" target="_blank" class="public_id_link">
<?php
- echo $photo["public_id"];
- // echo cl_image_tag($photo["public_id"], array_merge($thumbs_params, array("crop" => "fill")));
+ echo "<div class='public_id'>" . $photo["public_id"] . "</div>";
+ echo cl_image_tag($photo["public_id"], array_merge($thumbs_params, array("crop" => "fill")));
?>
</a>
+
<div class="less_info">
- <a href="#" class="toggle_info">Show more...</a>
+ <a href="#" class="toggle_info">More transformations...</a>
</div>
+
<div class="more_info">
- <a href="#" class="toggle_info">Show less...</a>
+ <a href="#" class="toggle_info">Hide transformations...</a>
<table class="thumbnails">
- Different thumbnails:
<?php
$thumbs = array(
array("crop" => "fill", "radius" => 10),
array("crop" => "scale"),
- array("crop" => "fit"),
- array("crop" => "thumb", "gravity" => "face"),
+ array("crop" => "fit", "format" => "png"),
array("crop" => "thumb", "gravity" => "face"),
- array("override" => true, "format" => "png", "transformation" => array(
- array("crop" => "fill", "gravity" => "north", "width" => 150, "height" => 150),
- array("effect" => "sepia"),
- array("angle" => "20"),
- )),
+ array("override" => true, "format" => "png", "angle" => 20, "transformation" =>
+ array("crop" => "fill", "gravity" => "north", "width" => 150, "height" => 150, "effect" => "sepia")
+ ),
);
foreach($thumbs as $params) {
$merged_params = array_merge((\Cloudinary::option_consume($params, "override")) ? array() : $thumbs_params, $params);
echo "<td>";
- echo cl_image_tag($photo["public_id"], $merged_params);
+ echo "<div class='thumbnail_holder'>";
+ echo "<a target='_blank' href='" . cloudinary_url($photo["public_id"], $merged_params) . "'>" .
+ cl_image_tag($photo["public_id"], $merged_params) . "</a>";
+ echo "</div>";
echo "<br/>";
\PhotoAlbum\array_to_table($merged_params);
echo "</td>";
}
?>
+
</table>
- <p> As you can see, different tranformations can go a long way.
- You're welcome to consult the <a href="http://cloudinary.com/documentation/image_transformations"
- >Image Transformation reference</a> for more awesome transformations
+
+ <div class="note">
+ 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.
+ </div>
</div>
</div>
<?php $index++; } ?>
@@ -5,16 +5,21 @@
require '../../src/Uploader.php';
error_reporting(E_ALL | E_STRICT);
- // sets up cloudinary params and RB's DB
+ // Sets up Cloudinary's parameters and RB's DB
include 'settings.php';
- // global settings
- $cors_location = $_SERVER["REQUEST_SCHEME"] . "://" . $_SERVER["SERVER_NAME"] .
- dirname($_SERVER["SCRIPT_NAME"]) . "/lib/cloudinary_cors.html";
+ // Global settings
+ if (array_key_exists('REQUEST_SCHEME', $_SERVER)) {
+ $cors_location = $_SERVER["REQUEST_SCHEME"] . "://" . $_SERVER["SERVER_NAME"] .
+ dirname($_SERVER["SCRIPT_NAME"]) . "/lib/cloudinary_cors.html";
+ } else {
+ $cors_location = "http://" . $_SERVER["HTTP_HOST"] . "/lib/cloudinary_cors.html";
+ }
+
$thumbs_params = array("format" => "jpg", "height" => 150, "width" => 150,
"class" => "thumbnail inline");
- // help functions
+ // Helper functions
function ret_var_dump($var) {
ob_start();
var_dump($var);
@@ -23,13 +28,33 @@ function ret_var_dump($var) {
function array_to_table($array) {
$saved_error_reporting = error_reporting(0);
- echo "<table>";
+ echo "<table class='info'>";
foreach ($array as $key => $value) {
- echo "<tr><td>" . $key . "</td><td>" . json_encode($value) . "</td></tr>";
+ if ($key != 'class') {
+ if ($key == 'url' || $key == 'secure_url') {
+ $display_value = '"' . $value . '"';
+ } else {
+ $display_value = json_encode($value);
+ }
+ echo "<tr><td>" . $key . ":</td><td>" . $display_value . "</td></tr>";
+ }
}
echo "</table>";
error_reporting($saved_error_reporting);
}
+
+ function create_photo_model($options = array()) {
+ $photo = \R::dispense('photo');
+
+ # Add metadata we want to keep:
+ $photo->created_at = \R::isoDateTime();
+ foreach ( $options as $key => $value ) {
+ if ($key != 'tags') {
+ $photo->{$key} = $value;
+ }
+ }
+ $id = \R::store($photo);
+ }
}
?>
@@ -0,0 +1,37 @@
+body { font-family: Helvetica, Arial, sans-serif; color: #333; margin: 10px; width: 960px }
+#posterframe { position: absolute; right: 10px; top: 10px; }
+h1 { color: #0e2953; font-size: 18px; }
+h2 { color: #666; font-size: 16px; }
+p { font-size: 14px; line-height: 18px; }
+#logo { height: 51px; width: 241px; }
+a { color: #0b63b6 }
+
+.upload_link { display: block; color: #000; border: 1px solid #aaa; background-color: #e0e0e0;
+ font-size: 18px; padding: 5px 10px; width: 150px; margin: 10px 0 20px 0;
+ font-weight: bold; text-align: center; }
+
+.photo { margin: 10px; padding: 10px; border-bottom: 2px solid #ccc; }
+.photo .thumbnail { margin-top: 10px; display: block; max-width: 200px; }
+.toggle_info { margin-top: 10px; font-weight: bold; color: #e62401; display: block; }
+.thumbnail_holder { height: 182px; margin-bottom: 5px; margin-right: 10px; }
+.info td, .uploaded_info td { font-size: 12px }
+.note { margin: 20px 0}
+
+.more_info, .show_more_info .less_info { display: none; }
+.show_more_info .more_info, .less_info { display: inline-block; }
+.inline { display: inline-block; }
+td { vertical-align: top; padding-right: 5px; }
+
+#backend_upload, #direct_upload { padding: 20px 20px; margin: 20px 0;
+ border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
+
+#backend_upload h1, #direct_upload h1 { margin: 0 0 15px 0; }
+
+.back_link { font-weight: bold; display: block; font-size: 16px; margin: 10px 0; }
+#direct_upload { position: relative; min-height: 90px}
+.status { position: absolute; top: 20px; left: 500px; text-align: center; border: 1px solid #aaa;
+ padding: 10px; width: 200px }
+
+.uploaded_info { margin: 10px}
+.uploaded_info .image { margin: 5px 0 }
+.uploaded_info td { padding-right: 10px }
Oops, something went wrong.

0 comments on commit 27be9d3

Please sign in to comment.