Wrox Programmer Forums
|
BOOK: Beginning ASP.NET Web Pages with WebMatrix
This is the forum to discuss the Wrox book Beginning ASP.NET Web Pages with WebMatrix by Mike Brind, Imar Spaanjaars ; ISBN: 978-1-1180-5048-4
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning ASP.NET Web Pages with WebMatrix section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old June 2nd, 2012, 06:28 PM
Authorized User
  
Join Date: Aug 2010
Posts: 50
Thanks: 7
Thanked 0 Times in 0 Posts
Default photo gallery
Hi,

I'm trying to recreate the photo gallery in chapter 8. I use the code provide except I change the location of the "uploads" folder to "images" folder. However, every time I go to view the gallery no pictures appear. Please help

my image upload code
Code:
@{
    var folderName ="";
    var path = "";
    var message ="Choose an image to upload:";
    
    if(Request.Cookies["folder"] != null) {
        folderName = Request.Cookies["folder"].Value;
    }
    else{
        folderName =Guid.NewGuid().ToString();
    }
    
    path=Path.Combine(Server.MapPath("/images/"), folderName);
    
    if(!Directory.Exists(path)){
        Directory.CreateDirectory(path);
        Response.Cookies["folder"].Value = folderName;
        Response.Cookies["folder"].Expires = DateTime.Now.AddYears(-1);
    }
    
    if(Request.Files.Count > 0){
        WebImage image = WebImage.GetImageFromRequest();
        if(image != null){
            var imageFileName = Path.GetFileName(image.FileName);
            var imageGuid = Guid.NewGuid().ToString();
            var fileName = imageGuid + "_" + imageFileName;
            var thumbFileName = imageGuid + "_thumb_" + imageFileName;
            var location = Path.Combine(path, fileName);
            image.Resize(600, 600, preventEnlarge:true);
            image.Save(location, "jpg");
            image.Resize(200,200, preventEnlarge:true);
            location=Path.Combine(path, thumbFileName);
            var watermark = DateTime.Now.ToShortDateString();
            image.AddTextWatermark(watermark, fontColor:"White", fontSize: 8);
            image.Save(location, "jpg");
        }else{
            message = "You may only upload image files: .jpg, .gif, .png, .bmp, .tif";
        }
    }
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <h1>Upload Images</h1>
        <div>@message</div>
        @FileUpload.GetHtml(allowMoreFilesToBeAdded:true)
    </body>
</html>
my photo gallery code
Code:
@{
    var folderName="";
    var path="";
    var files=new List<string>();
    if(Request.Cookies["folder"] != null){
        folderName =Request.Cookies["folder"].Value;
        path=Path.Combine(Server.MapPath("/images/"), folderName);
        foreach(var file in Directory.GetFiles(path)){
            if(Path.GetFileName(file).Contains("_thumb_")){
                files.Add(Path.GetFileName(file));
            }
        }
    }
}
<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Gallery</title>
        
        <link rel="stylesheet" href="@Href("~/Content/tinycarousel.css")" type="text/css" />
        <link rel="stylesheet" href="@Href("~/Content/jquery.fancybox-1.3.4.css")" type="text/css" />
        <script type="text/javascript" src="@Href("~/Scripts/jquery-1.7.1.min.js")"></script>
        <script type="text/javascript" src="@Href("~/Scripts/jquery.tinycarousel.min.js")"></script>
        <script type="text/javascript" src="@Href("~/Scripts/jquery.fancybox-1.3.4.pack.js")"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#slider-code').tinycarousel();
                $('.thumb').fancybox();
            });
        </script>
    </head>
    <body>
       <h3>Gallery</h3>
        <div id="slider-code">
            <a class="buttons prev" href="#">left</a>
            <div class="viewport">
                <ul class="overview">
                    @foreach(var file in files){
                        <li>
                            <a class="thumb" href="images/@folderName/@file.Replace("_thumb", "")">
                            <img src="images/@folderName/@file" alt=""/>
                            </a>
                        </li>
                    }
                </ul>
        </div>
        <a class="buttons next" href="#">right</a>
        </div>
    </body>
</html>
 
Old June 2nd, 2012, 07:55 PM
Registered User
  
Join Date: May 2012
Posts: 14
Thanks: 3
Thanked 1 Time in 1 Post
Cool You have incorrect folder names in code statements
Quote:
Originally Posted by hozdaman View Post
Hi,

I'm trying to recreate the photo gallery in chapter 8. I use the code provide except I change the location of the "uploads" folder to "images" folder. However, every time I go to view the gallery no pictures appear. Please help

my image upload code
Code:
@{
    var folderName ="";
    var path = "";
    var message ="Choose an image to upload:";
    
    if(Request.Cookies["folder"] != null) {
        folderName = Request.Cookies["folder"].Value;
    }
    else{
        folderName =Guid.NewGuid().ToString();
    }
    
    path=Path.Combine(Server.MapPath("/images/"), folderName);
    
    if(!Directory.Exists(path)){
        Directory.CreateDirectory(path);
        Response.Cookies["folder"].Value = folderName;
        Response.Cookies["folder"].Expires = DateTime.Now.AddYears(-1);
    }
    
    if(Request.Files.Count > 0){
        WebImage image = WebImage.GetImageFromRequest();
        if(image != null){
            var imageFileName = Path.GetFileName(image.FileName);
            var imageGuid = Guid.NewGuid().ToString();
            var fileName = imageGuid + "_" + imageFileName;
            var thumbFileName = imageGuid + "_thumb_" + imageFileName;
            var location = Path.Combine(path, fileName);
            image.Resize(600, 600, preventEnlarge:true);
            image.Save(location, "jpg");
            image.Resize(200,200, preventEnlarge:true);
            location=Path.Combine(path, thumbFileName);
            var watermark = DateTime.Now.ToShortDateString();
            image.AddTextWatermark(watermark, fontColor:"White", fontSize: 8);
            image.Save(location, "jpg");
        }else{
            message = "You may only upload image files: .jpg, .gif, .png, .bmp, .tif";
        }
    }
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <h1>Upload Images</h1>
        <div>@message</div>
        @FileUpload.GetHtml(allowMoreFilesToBeAdded:true)
    </body>
</html>
my photo gallery code
Code:
@{
    var folderName="";
    var path="";
    var files=new List<string>();
    if(Request.Cookies["folder"] != null){
        folderName =Request.Cookies["folder"].Value;
        path=Path.Combine(Server.MapPath("/images/"), folderName);
        foreach(var file in Directory.GetFiles(path)){
            if(Path.GetFileName(file).Contains("_thumb_")){
                files.Add(Path.GetFileName(file));
            }
        }
    }
}
<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Gallery</title>
        
        <link rel="stylesheet" href="@Href("~/Content/tinycarousel.css")" type="text/css" />
        <link rel="stylesheet" href="@Href("~/Content/jquery.fancybox-1.3.4.css")" type="text/css" />
        <script type="text/javascript" src="@Href("~/Scripts/jquery-1.7.1.min.js")"></script>
        <script type="text/javascript" src="@Href("~/Scripts/jquery.tinycarousel.min.js")"></script>
        <script type="text/javascript" src="@Href("~/Scripts/jquery.fancybox-1.3.4.pack.js")"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#slider-code').tinycarousel();
                $('.thumb').fancybox();
            });
        </script>
    </head>
    <body>
       <h3>Gallery</h3>
        <div id="slider-code">
            <a class="buttons prev" href="#">left</a>
            <div class="viewport">
                <ul class="overview">
                    @foreach(var file in files){
                        <li>
                            <a class="thumb" href="images/@folderName/@file.Replace("_thumb", "")">
                            <img src="images/@folderName/@file" alt=""/>
                            </a>
                        </li>
                    }
                </ul>
        </div>
        <a class="buttons next" href="#">right</a>
        </div>
    </body>
</html>
Make sure you have an Uploads or Images folder! The names you give them are case sensitve.

Images Upload Page - Default.cshtml
Code:
path=Path.Combine(Server.MapPath("/images/"), folderName);
error:Source is not pointing to the correct folder

Gallery Page - Gallery.cshtml
Code:
path=Path.Combine(Server.MapPath("/images/"), folderName);
error:Source is not pointing to the correct folder

Code:
<img src="images/@folderName/@file" alt=""/>
error:Source is not pointing to the correct folder
 
Old June 3rd, 2012, 06:51 PM
Authorized User
  
Join Date: Aug 2010
Posts: 50
Thanks: 7
Thanked 0 Times in 0 Posts
Default
Thanks for your help.

I went a created a new folder called "uploads" changed the path location to look for the images in this folder. I am able upload the images no problem, but when i go to view them in the gallery nothing shows up. Any thing else i can do?
 
Old June 3rd, 2012, 08:37 PM
Registered User
  
Join Date: May 2012
Posts: 14
Thanks: 3
Thanked 1 Time in 1 Post
Cool check your paths!
You should check the src=" " paths in you Gallery.cshtml.

By that I mean change the paths in code to match the location of where the images are stored.
 
Old June 9th, 2012, 05:26 PM
Authorized User
  
Join Date: Aug 2010
Posts: 50
Thanks: 7
Thanked 0 Times in 0 Posts
Default
I checked the paths and they match exactly. I can't still figure out whats still wrong. Please help!!! I am attaching the most current version of the code

Image Upload.
Code:
@{
    var folderName ="";
    var path = "";
    var message ="Choose an image to upload:";
    
    if(Request.Cookies["folder"] != null) {
        folderName = Request.Cookies["folder"].Value;
    }
    else{
        folderName =Guid.NewGuid().ToString();
    }
    
    path=Path.Combine(Server.MapPath("/uploads/"), folderName);
    
    if(!Directory.Exists(path)){
        Directory.CreateDirectory(path);
        Response.Cookies["folder"].Value = folderName;
        Response.Cookies["folder"].Expires = DateTime.Now.AddYears(-1);
    }
    
    if(Request.Files.Count > 0){
        WebImage image = WebImage.GetImageFromRequest();
        if(image != null){
            var imageFileName = Path.GetFileName(image.FileName);
            var imageGuid = Guid.NewGuid().ToString();
            var fileName = imageGuid + "_" + imageFileName;
            var thumbFileName = imageGuid + "_thumb_" + imageFileName;
            var location = Path.Combine(path, fileName);
            image.Resize(600, 600, preventEnlarge:true);
            image.Save(location, "jpg");
            image.Resize(200,200, preventEnlarge:true);
            location=Path.Combine(path, thumbFileName);
            var watermark = DateTime.Now.ToShortDateString();
            image.AddTextWatermark(watermark, fontColor:"White", fontSize: 8);
            image.Save(location, "jpg");
        }else{
            message = "You may only upload image files: .jpg, .gif, .png, .bmp, .tif";
        }
    }
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <h1>Upload Images</h1>
        <div>@message</div>
        @FileUpload.GetHtml(allowMoreFilesToBeAdded:true)
    </body>
</html>
Photo Gallery
Code:
@{
    var folderName="";
    var path="";
    var files=new List<string>();
    if(Request.Cookies["folder"] != null){
        folderName =Request.Cookies["folder"].Value;
        path=Path.Combine(Server.MapPath("/uploads/"), folderName);
        foreach(var file in Directory.GetFiles(path)){
            if(Path.GetFileName(file).Contains("_thumb_")){
                files.Add(Path.GetFileName(file));
            }
        }
    }
}
<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Gallery</title>
        
        <link rel="stylesheet" href="@Href("~/Content/tinycarousel.css")" type="text/css" />
        <link rel="stylesheet" href="@Href("~/Content/jquery.fancybox-1.3.4.css")" type="text/css" />
        <script type="text/javascript" src="@Href("~/Scripts/jquery-1.7.1.min.js")"></script>
        <script type="text/javascript" src="@Href("~/Scripts/jquery.tinycarousel.min.js")"></script>
        <script type="text/javascript" src="@Href("~/Scripts/jquery.fancybox-1.3.4.pack.js")"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#slider-code').tinycarousel();
                $('.thumb').fancybox();
            });
        </script>
    </head>
    <body>
       <h3>Gallery</h3>
        <div id="slider-code">
            <a class="buttons prev" href="#">left</a>
            <div class="viewport">
                <ul class="overview">
                    @foreach(var file in files){
                        <li>
                            <a class="thumb" href="uploads/@folderName/@file.Replace("_thumb", "")">
                            <img src="uploads/@folderName/@file" alt=""/>
                            </a>
                        </li>
                    }
                </ul>
        </div>
        <a class="buttons next" href="#">right</a>
        </div>
    </body>
</html>
 
Old June 9th, 2012, 06:25 PM
Registered User
  
Join Date: May 2012
Posts: 14
Thanks: 3
Thanked 1 Time in 1 Post
Default AddYears(-1) is that correct?
I'm just curious. Why does your AddYears method have a -1 in it?:

Response.Cookies["folder"].Expires = DateTime.Now.AddYears(-1);



Quote:
Originally Posted by hozdaman View Post
I checked the paths and they match exactly. I can't still figure out whats still wrong. Please help!!! I am attaching the most current version of the code

Image Upload.
Code:
@{
    var folderName ="";
    var path = "";
    var message ="Choose an image to upload:";
    
    if(Request.Cookies["folder"] != null) {
        folderName = Request.Cookies["folder"].Value;
    }
    else{
        folderName =Guid.NewGuid().ToString();
    }
    
    path=Path.Combine(Server.MapPath("/uploads/"), folderName);
    
    if(!Directory.Exists(path)){
        Directory.CreateDirectory(path);
        Response.Cookies["folder"].Value = folderName;
        Response.Cookies["folder"].Expires = DateTime.Now.AddYears(-1);
    }
    
    if(Request.Files.Count > 0){
        WebImage image = WebImage.GetImageFromRequest();
        if(image != null){
            var imageFileName = Path.GetFileName(image.FileName);
            var imageGuid = Guid.NewGuid().ToString();
            var fileName = imageGuid + "_" + imageFileName;
            var thumbFileName = imageGuid + "_thumb_" + imageFileName;
            var location = Path.Combine(path, fileName);
            image.Resize(600, 600, preventEnlarge:true);
            image.Save(location, "jpg");
            image.Resize(200,200, preventEnlarge:true);
            location=Path.Combine(path, thumbFileName);
            var watermark = DateTime.Now.ToShortDateString();
            image.AddTextWatermark(watermark, fontColor:"White", fontSize: 8);
            image.Save(location, "jpg");
        }else{
            message = "You may only upload image files: .jpg, .gif, .png, .bmp, .tif";
        }
    }
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <h1>Upload Images</h1>
        <div>@message</div>
        @FileUpload.GetHtml(allowMoreFilesToBeAdded:true)
    </body>
</html>
Photo Gallery
Code:
@{
    var folderName="";
    var path="";
    var files=new List<string>();
    if(Request.Cookies["folder"] != null){
        folderName =Request.Cookies["folder"].Value;
        path=Path.Combine(Server.MapPath("/uploads/"), folderName);
        foreach(var file in Directory.GetFiles(path)){
            if(Path.GetFileName(file).Contains("_thumb_")){
                files.Add(Path.GetFileName(file));
            }
        }
    }
}
<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Gallery</title>
        
        <link rel="stylesheet" href="@Href("~/Content/tinycarousel.css")" type="text/css" />
        <link rel="stylesheet" href="@Href("~/Content/jquery.fancybox-1.3.4.css")" type="text/css" />
        <script type="text/javascript" src="@Href("~/Scripts/jquery-1.7.1.min.js")"></script>
        <script type="text/javascript" src="@Href("~/Scripts/jquery.tinycarousel.min.js")"></script>
        <script type="text/javascript" src="@Href("~/Scripts/jquery.fancybox-1.3.4.pack.js")"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#slider-code').tinycarousel();
                $('.thumb').fancybox();
            });
        </script>
    </head>
    <body>
       <h3>Gallery</h3>
        <div id="slider-code">
            <a class="buttons prev" href="#">left</a>
            <div class="viewport">
                <ul class="overview">
                    @foreach(var file in files){
                        <li>
                            <a class="thumb" href="uploads/@folderName/@file.Replace("_thumb", "")">
                            <img src="uploads/@folderName/@file" alt=""/>
                            </a>
                        </li>
                    }
                </ul>
        </div>
        <a class="buttons next" href="#">right</a>
        </div>
    </body>
</html>
The Following User Says Thank You to dejohnny For This Useful Post:
hozdaman (June 9th, 2012)
 
Old June 9th, 2012, 07:22 PM
Authorized User
  
Join Date: Aug 2010
Posts: 50
Thanks: 7
Thanked 0 Times in 0 Posts
Default
Wow! That was it!! I changed to a 1 and it worked.

Thanks so much for all your help.
 
Old June 9th, 2012, 08:29 PM
Registered User
  
Join Date: May 2012
Posts: 14
Thanks: 3
Thanked 1 Time in 1 Post
Wink Trained eyes :)
Quote:
Originally Posted by hozdaman View Post
Wow! That was it!! I changed to a 1 and it worked.

Thanks so much for all your help.
Congrats! I've been looking at this code too long.





Similar Threads
Thread Thread Starter Forum Replies Last Post
photo gallery (chapter 8) hozdaman BOOK: Beginning ASP.NET Web Pages with WebMatrix 3 May 9th, 2012 10:07 AM
Need an ASP.NET 2.0 photo gallery with permission woojtii ASP.NET 2.0 Professional 0 August 16th, 2006 11:35 AM
Help: photo gallery from C# to VB.net? eureka VB.NET 2002/2003 Basics 0 September 4th, 2004 04:04 AM
photo gallery module eureka VBScript 1 September 3rd, 2004 07:03 PM




Contact Us - Wrox - Privacy Statement - Top

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.