Chapter 14, Try-it-out 515-518

supdike · June 8th, 2012, 01:32 PM

Hi,

At the end of this exercize, I sucessfully uploaded several images, but they are spread over the entire webpage. Is this correct? Should the page resize them to uniform size (or is that in a later step)?

I did use my own images, some of which were larger than the images supplied in the source.

thanks!

Imar · June 8th, 2012, 03:42 PM

Hi there,

No, the images itself are not resized. However, they should be resized at the client using CSS (see page 510, step 13)

This is not ideal, as explained in the section A Few Notes about Perfomance on page 526. You can download the source for my Instant Results book (Chapter Greeting Cards) to see code that resizes images at the server.

Cheers,

Imar

supdike · June 8th, 2012, 04:25 PM

I am mainly just trying to figure out why my version isn't working. The .css was added to my frontend.master. I checked the markup of frontend.master, and the .css refrence is where it should be. (I verified that my frontend.master markup is the same as the source for chapter 14). Somehow the .css is not making it down to my ManagePhotoAlbum.aspx. i'm just not sure where the breakdown is.
thanks.

Imar · June 8th, 2012, 04:27 PM

Can you post the code for the CSS file and for the control that displays the images?

Also, try reloading with Ctrl+F5 or Ctrl+R; maybe it's a caching issue?

Imar

supdike · June 8th, 2012, 04:59 PM

Styles/Styles.css:

Code:

.ItemContainer
{
    width: 600px;
    list-style-type: none;
    clear: both;
}

.ItemContainer li
{
    height: 300px;
    width: 200px;
    float: left;
}

.itemContainer li image
{
    width: 180px;
    margin: 10px 20px 10px 0;
}

MasterPages/Frontend.Master:

Code:

<%@ Master Language="VB" CodeFile="Frontend.master.vb" Inherits="MasterPages_Frontend" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="../Styles/Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
(.......  the rest of this code is snipped  ..........................)

ManagePhotoAlbum.aspx:

Code:

<%@ Page Title="Manage Photo Album" Language="VB" MasterPageFile="~/MasterPages/Frontend.master" AutoEventWireup="false" CodeFile="ManagePhotoAlbum.aspx.vb" Inherits="ManagePhotoAlbum" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" Runat="Server">
    <asp:ListView ID="ListView1" runat="server" DataKeyNames="Id" 
        DataSourceID="EntityDataSource1" InsertItemPosition="LastItem">
        <InsertItemTemplate>
            <li style="">
                Description:
                <asp:RequiredFieldValidator ID="reqDesc" ControlToValidate="DescriptionTextBox" runat="server" ErrorMessage="Enter A Description"></asp:RequiredFieldValidator>
                <asp:TextBox ID="DescriptionTextBox" runat="server" 
                    Text='<%# Bind("Description") %>' />
                <br />
                ToolTip:
                <asp:RequiredFieldValidator ID="reqTooltip" ControlToValidate="ToolTipTextBox" runat="server" ErrorMessage="Enter A Tool tip"></asp:RequiredFieldValidator>
                <asp:TextBox ID="ToolTipTextBox" runat="server" 
                    Text='<%# Bind("ToolTip") %>' />
                <br />
                <asp:FileUpload ID="FileUpload1" runat="server" />
                <br />
                <asp:CustomValidator ID="CusValImage" runat="server" ErrorMessage="Select a valid .jpg file"></asp:CustomValidator>
                <br />
                <asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="Insert" />
                <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="Clear" CausesValidation="False" />
            </li>
        </InsertItemTemplate>
        <ItemTemplate>
            <li style="">
                Description:
                <asp:Label ID="DescriptionLabel" runat="server" Text='<%# Eval("Description") %>' />
                <br />
                ToolTip:
                <asp:Label ID="ToolTipLabel" runat="server" Text='<%# Eval("ToolTip") %>' />
                <br />
                <asp:Image ID="ImageUrl" runat="server" ImageUrl='<%# Eval("ImageUrl") %>' />
                <br />
                <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" 
                    Text="Delete" CausesValidation="False" />
            </li>
        </ItemTemplate>
        <LayoutTemplate>
            <ul class="ItemContainer">
                <li runat="server" id="itemPlaceholder" />
            </ul>
        </LayoutTemplate>
    </asp:ListView>
    <asp:EntityDataSource ID="EntityDataSource1" runat="server" 
        ConnectionString="name=PlanetWroxEntities" 
        DefaultContainerName="PlanetWroxEntities" EnableDelete="True" 
        EnableFlattening="False" EnableInsert="True" EntitySetName="Pictures" 
        EntityTypeFilter="" Select="" Where="it.PhotoAlbumId = @photoAlbumId">
        <WhereParameters>
            <asp:QueryStringParameter Name="PhotoAlbumId" QueryStringField="PhotoAlbumId" 
                Type="Int32" />
        </WhereParameters>
    </asp:EntityDataSource>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cpClientScript" Runat="Server">
</asp:Content>

I'm thinking the .vb code isn't necessary, but i can post that too, if you need it.
Thanks again. I really appreciate you and this forum.

Imar · June 8th, 2012, 05:03 PM

Take a look at this:

Code:

 
.itemContainer li image
{
    width: 180px;
    margin: 10px 20px 10px 0;
}

You have itemContainer with a lower case i. In all other places, ItemContainer is written with an upper case I. Since CSS is case-sensitive, .itemContainer li image is never applied.

On top of that, it should be img, not image. So the full selector should be like this:

Code:

 
.ItemContainer li img
{
  width: 180px;
  margin: 10px 20px 10px 0;
}

Hope this helps,

Imar

supdike · June 8th, 2012, 05:20 PM

I should have caught that. I knew it had to be the style sheet, I just had it in my head that it wasn't being applied because i had missed something. I went over everything else trying to find the code i missed. Never occured to me that the problem was the style sheet the whole time.

It's hard to teach this old mainframe programmer an up-to-date language.

Thank you so much for your help. I really do appreciate it. I'll look harder before I post next time.

Imar · June 8th, 2012, 05:26 PM

Quote:

I'll look harder before I post next time.

Don't worry about that. It's sometimes useful to have a fresh pair of eyes to look at a problem....

Quote:

It's hard to teach this old mainframe programmer an up-to-date language

;-) Good luck....

Imar