upgraded sample project to .NET 8

samples/CloudinaryDotNetSamples.sln

@@ -1,7 +1,7 @@
 
 Microsoft Visual Studio Solution File, Format Version 12.00
-# Visual Studio Version 16
-VisualStudioVersion = 16.0.30621.155
+# Visual Studio Version 17
+VisualStudioVersion = 17.11.35312.102
 MinimumVisualStudioVersion = 10.0.40219.1
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "PhotoAlbum", "PhotoAlbum\PhotoAlbum.csproj", "{3AD00431-929F-4124-8890-FC3C021BAAD8}"
 EndProject

samples/PhotoAlbum/Pages/Index.cshtml

@@ -5,116 +5,60 @@
     ViewData["Title"] = "PhotoAlbum - Main page";
 }
 
-<h1>Welcome!</h1>
+<div class="container mt-5" >
+    <!-- Welcome Section -->
+
+    <div class="card-body text-center" style="font-size: 1.5rem; line-height: 1.8;">
+        <h1 class="card-title" style="font-size: 3rem; line-height: 1.2;">Welcome to PhotoAlbum!</h1>
+
 
-<p>
-    This is the main demo page of the PhotoAlbum sample .NET application of Cloudinary.<br />
-    Here you can see all images you have uploaded to this .NET application and find some information on how
-    to implement your own .NET application storing, manipulating and serving your photos using Cloudinary!
-</p>
-<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>
+        <p class="card-text" style="font-size: 1.5rem; line-height: 1.8;">
+            This is the main demo page of the PhotoAlbum sample .NET application of Cloudinary.<br />
+            Here, you can see all the images you have uploaded to this .NET application and find some information on how to implement your own .NET application to store, manipulate, and serve your photos using Cloudinary.
+        </p>
+    </div>
 
-<h1>Your Photos</h1>
+    <!-- Cloudinary Info Section -->
+    <div class="card-body text-center" style="font-size: 1.5rem; line-height: 1.8;">
+        <h2 style="font-size: 2.5rem; line-height: 1.4;">Cloudinary Image Transformation</h2>
+        <p style="font-size: 1.5rem; line-height: 1.8;">
+            All of the images you see here are transformed and served by Cloudinary. For instance, the logo and the poster frame. These images were not even uploaded to Cloudinary—they are retrieved by the service, transformed, cached, and distributed through a CDN.
+        </p>
+        <p style="font-size: 1.5rem; line-height: 1.8;">
+            Cloudinary’s powerful functions like <strong>fetch_image_tag</strong> and <strong>facebook_profile_image_tag</strong> allow you to manipulate images effortlessly.
+        </p>
+    </div>
 
-<div class="actions">
-    <a class="upload_link" asp-page="Upload">Add photo...</a>
-    <a class="upload_link" asp-page="UploadDirectly" asp-route-type="signed">Add photo (direct upload)...</a>
-    <a class="upload_link" asp-page="UploadDirectly" asp-route-type="unsigned">Add photo (direct unsigned upload)...</a>
+    <!-- Call-to-Action Section -->
+    <div class="text-center mt-4 w-100">
+        <a href="/Upload" class="btn btn-primary btn-lg">Upload Your Photos Now</a>
+    </div>
+    <div id="posterframe mt-1">
+        <!-- This will render the fetched Facebook profile picture using Cloudinary according to the
+             requested transformations -->
+        @Html.Raw(Cloudinary.Api.UrlImgUp.Action("facebook").Format("png")
+                 .Transform(new Transformation()
+                 .Width(95)
+                 .Height(95)
+                 .Crop("thumb")
+                 .Gravity("face")
+                 .Effect("sepia")
+                 .Radius(20)
+                 .Chain() // apply current stack of transformations before processing next
+                 .Angle(10))
+                 .BuildImageTag("officialchucknorrispage"))
+    </div>
+    <div id="logo-container" style="position: relative; width: 100%; height: 100%;">
+        <div id="logo" style="position: absolute; top: 10%; left: 10%; width: 20%;">
+            <!-- This will render the image fetched from a remote HTTP URL using Cloudinary -->
+            @Html.Raw(Cloudinary.Api.UrlImgUp.Signed(true).Secure().Action("fetch").Transform(new Transformation()
+                 .Width(344)
+                 .Height(76)).BuildImageTag("http://cloudinary.com/images/logo.png"))
+        </div>
+    </div>
 </div>
 
-<div class="photos">
-    @if (Model.Photos.Count == 0)
-    {
-        <p>No photos were uploaded yet.</p>
-    }
-    else
-    {
-        foreach (var img in Model.Photos)
-        {
-            <div class="photo">
-                <a href="@Cloudinary.Api.UrlImgUp.Format(img.Format).BuildUrl(img.PublicId)"
-                   target="_blank" class="public_id_link">
-                    <div class="public_id">
-                        @img.PublicId
-                    </div>
-                    @Html.Raw(Cloudinary.Api.UrlImgUp.Format("jpg").Transform(new Transformation().Height(150).Width(150).Crop("fill")).BuildImageTag(img.PublicId, new StringDictionary("class=thumbnail inline")))
-                </a>
 
-                <div class="less_info">
-                    <a href="#" class="toggle_info">More transformations...</a>
-                </div>
-
-                <div class="more_info">
-                    <a href="#" class="toggle_info">Hide transformations...</a>
-                    <table class="thumbnails">
-                        <tr>
-                            @{
-                                var basicTransform = new Transformation().Height(150).Width(150);
-                                var basicUrl = Cloudinary.Api.UrlImgUp.Format("jpg");
-                                var urls = new List<Url>
-                                {
-                                    basicUrl.Clone().Transform(basicTransform.Clone().Crop("fill").Radius(10)),
-                                    basicUrl.Clone().Transform(basicTransform.Clone().Crop("scale")),
-                                    basicUrl.Clone().Format("png").Transform(basicTransform.Clone().Crop("fit")),
-                                    basicUrl.Clone().Transform(basicTransform.Clone().Crop("thumb").Gravity("face")),
-                                    basicUrl.Clone().Format("png").Transform(basicTransform.Clone().Width(150).Height(150).Crop("fill").Gravity("north").Effect("sepia").Chain().Angle(20))
-                                };
-
-                                foreach (var url in urls)
-                                {
-                                    <td>
-                                        <div class="thumbnail_holder">
-                                            <a target="_blank" href="@url.BuildUrl(img.PublicId)">
-                                                @Html.Raw(url.BuildImageTag(img.PublicId, new StringDictionary("class=thumbnail inline")))
-                                            </a>
-                                        </div>
-                                        <br />
-                                        <table class='info'>
-                                            <tr>
-                                                <td>format</td>
-                                                <td>@url.FormatValue</td>
-                                            </tr>
-                                            @foreach (var (key, value) in url.Transformation.Params)
-                                            {
-                                                <tr>
-                                                    <td>@key</td>
-                                                    <td>@value</td>
-                                                </tr>
-
-                                            }
-                                            @foreach (var nestedTransform in url.Transformation.NestedTransforms)
-                                            {
-                                                <tr>
-                                                    <td>nested</td>
-                                                    <td>
-                                                        @foreach (var (key, value) in nestedTransform.Params)
-                                                        {
-                                                            @($"{key}: {value}")
-                                                            <br />
-                                                        }
-                                                    </td>
-                                                </tr>
-                                            }
-                                        </table>
-                                    </td>
-                                }
-                            }
-                        </tr>
-                    </table>
-
-                    <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>
-        }
-    }
-</div>
 
 @section scripts
 {

samples/PhotoAlbum/Pages/MyPhotos.cshtml

@@ -0,0 +1,106 @@
+@page
+@model IndexModel
+
+@{
+    ViewData["Title"] = "PhotoAlbum - Main page";
+}
+
+<div class="container mt-5">
+    <!-- Welcome Section -->
+
+    <div class="card-body text-center" style="font-size: 1.5rem; line-height: 1.8;">
+        <h1 class="card-title" style="font-size: 3rem; line-height: 1.2;">My Photos!</h1>
+
+
+
+    </div>
+
+
+
+
+
+</div>
+
+
+
+<div class="container mt-5">
+    <h1 class="text-center mb-5" style="font-size: 2.5rem;">My Photo Gallery</h1>
+
+    <div class="photos d-flex flex-wrap justify-content-center">
+        @if (Model.Photos.Count == 0)
+        {
+            <p class="text-muted">No photos were uploaded yet.</p>
+        }
+        else
+        {
+            foreach (var img in Model.Photos)
+            {
+                <div class="photo-card card m-3" style="width: 200px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);">
+                    <!-- Image Thumbnail -->
+                    <a href="@Cloudinary.Api.UrlImgUp.Format("jpg").BuildUrl(img.PublicId)" target="_blank">
+                        @Html.Raw(Cloudinary.Api.UrlImgUp.Format("jpg").Transform(new Transformation().Height(200).Width(200).Crop("fill")).BuildImageTag(img.PublicId, new StringDictionary("class=card-img-top")))
+                    </a>
+
+                    <!-- Card Body -->
+                    <div class="card-body text-center">
+                        <!-- Photo ID or Title -->
+                        <h5 class="card-title text-truncate" style="font-size: 1rem;">@img.PublicId</h5>
+
+                        <!-- View Details Button -->
+                        <a href="/MyPhotos/@(img.PublicId.Split('/').Last())" class="btn btn-primary btn-sm mb-2" style="width: 100%;">View Details</a>
+
+                        <!-- Direct Link to Full Image -->
+                        <a href="@Cloudinary.Api.UrlImgUp.Format(img.Format).BuildUrl(img.PublicId)" target="_blank" class="btn btn-outline-secondary btn-sm" style="width: 100%;">Open Full Image</a>
+                    </div>
+                </div>
+            }
+        }
+    </div>
+</div>
+
+@section styles
+{
+    <style>
+        /* Container styling */
+        .photos {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        /* Photo Card Styling */
+        .photo-card {
+            border-radius: 8px;
+            overflow: hidden;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+
+            .photo-card:hover {
+                transform: scale(1.05);
+                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+            }
+
+        /* Card title styling */
+        .card-title {
+            margin-bottom: 0.75rem;
+            color: #333;
+        }
+
+        /* Button spacing */
+        .card-body .btn {
+            margin-top: 0.25rem;
+        }
+    </style>
+}
+
+
+@section scripts
+{
+    <script type="text/javascript">
+        $(function () {
+            $('.toggle_info').click(function () {
+                $(this).closest('.photo').toggleClass('show_more_info');
+                return false;
+            });
+        });
+    </script>
+}

samples/PhotoAlbum/Pages/MyPhotos.cshtml.cs

@@ -0,0 +1,26 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using Microsoft.EntityFrameworkCore;
+using PhotoAlbum.Data;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+
+namespace PhotoAlbum.Pages
+{
+    public class MyPhotosModel : PageModel
+    {
+        private readonly PhotosDbContext _dbContext;
+
+        public List<Photo> Photos { get; set; }
+
+        public MyPhotosModel(PhotosDbContext dbContext)
+        {
+            _dbContext = dbContext;
+        }
+
+        public async Task OnGetAsync()
+        {
+            Photos = await _dbContext.Photos.ToListAsync().ConfigureAwait(false);
+        }
+    }
+}