Announcement

Collapse
No announcement yet.

Category display issue

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Category display issue

    The category product listing (as well as the featured items listed on my home page) are not aligned, and I'm having a hard time figuring out how to fix it. I have it set up to display the Thumbnail, product name, price and 'Buy' link, but the listings are not always aligned. In other words, for some products, the thumbnail & everything is about an inch or so higher on the screen than the product next to it. I tried making some changes in the category.html file (incluing expanding the height), but haven't been able to fix the problem.

    Some thumbnail images are smaller than others, but I want the image, name, price, & Buy link to be aligned on each row.

    Any ideas?

  • #2
    I fixed this on my site by going to my category listing template and specifying the height of the cell holding the product thumbnails. This can be found under <!--START: ITEM_TEMPLATE_0-->

    In my case I changed this:
    <!--START: ITEM_TEMPLATE_0-->
    <table border="0" cellspacing="0" cellpadding="0" width="95%">
    <tr>
    <td colspan="2" align="center" valign="middle"><a href="product.asp?itemid=[catalogid]&amp;catid=[catid]"><img src="[THUMBNAIL]" alt="[name]" border="0"></a>
    </td>
    </tr>

    to include a value for the height of my thumbnails. So the above became:

    <!--START: ITEM_TEMPLATE_0-->
    <table border="0" cellspacing="0" cellpadding="0" width="95%">
    <tr>
    <td colspan="2" height="350" align="center" valign="middle"><a href="product.asp?itemid=[catalogid]&amp;catid=[catid]"><img src="[THUMBNAIL]" alt="[name]" border="0"></a>
    </td>
    </tr>

    Hope this helps.

    Comment


    • #3
      Thanks. I got it. That must have been the only place I didn't try to add the height before.

      Comment


      • #4
        Other templates?

        This also worked for me as well...but do either of you know if any other templates need to be changed? When I tested some products utilizing the other "browse by" searches (specifically by manufacturer), the thumbnails were not aligned...but were still aligned in the browse by product.

        Comment


        • #5
          Many of the display views (manufacturer, search results, etc.) use different templates. Some are more easily edited.

          Comment


          • #6
            Anyone else know which template/area, to designate the height for the images shown on the page results for keyword search?

            Comment


            • #7
              Look for the search.html in the appropriate folder depending on which templates you are currently using. If not in your current template directory then check in templates/common for the file.

              Comment


              • #8
                Originally posted by mueller View Post
                Look for the search.html in the appropriate folder depending on which templates you are currently using. If not in your current template directory then check in templates/common for the file.
                You (JLynn) probably already know this but just be sure to save any templates that you edit to your default folder and not the common folder. The cart will look there first for the file before going to the common folder anyway. That way you'll keep the edited version separate from the ones original to the cart.

                I'm not exactly sure what you would do in this template to designate the height of the image. Maybe try part of the code in my original post above. In this case you would likely change the code after - <!--START: ITEM_TEMPLATE-->

                Comment


                • #9
                  Definitely follow what ScribeTime said regarding saving and backing up of files. I should have mentioned that.

                  In looking at the code for the thumbnail in the search results:
                  Code:
                  <td width="90" align="center"><a href="product.asp?itemid=[catalogid]"><img src="[THUMBNAIL]" alt="[name]" border="0"></a></td>
                  I don't think you can dictate the size of the thumbnail as this seems to load whatever is stored on the server and does not designate a size. You could try forcing the image size by editing this code, but it could stretch or change the look of the image in a bad way depending on what sizes of thumbnails you have on the server. You could try replacing the above code with something like this:
                  Code:
                  <td width="90" align="center"><a href="product.asp?itemid=[catalogid]"><img src="[THUMBNAIL]" alt="[name]" width="20" height="20" border="0"></a></td>
                  Of course you will need to adjust the image width and height from 20 to whatever works for you.

                  Comment


                  • #10
                    Well - not sure if I'm doing this right or not - all this is very new to me, but I had made a lot of progress in the last month. I'm assuming that you mean the Design/Template area of admin? Or are you referring to getting into the FTP files? How about I tell you what I've been doing and you can tell me what I should be doing :D As background, I know enough html to experiment...I have Windows Vista/IE/Windows/Microsoft programs and have to enter the FTP files through the root (I had to research online to learn how to do that through IE/Vista).

                    Editing wise - I'm always editing the templates through the admin panel in the Layout5 folder - then save it and review - there have been plenty of times I'm saving and reviewing quite a bit before I get it right OR revert back to the original template! The Frame template is the worst for me, because it loses all the spacing in the left bar if I make any changes...so I've learned to manually add the code in for spaces last.

                    To be honest I don't know any other way to edit. I have copied my templates from the FTP to my hard-drive but these do not show up in html format - just the layout. There should probably be another post about the proper protocol for updating templates ;) and safety precautions as to make back-ups (haven't gotten there yet myself, but know I will be looking for posts down the line). I know there have to be others like me, who joined 3D as an upgrade to where we were cart-wise - and I personally love all the flexibility with 3D (even with my web/code learning disability), but the support and the boards have been super because there are people like you (the web gurus) who are so willing to help & share - a big thank you!

                    With regard to this specific problem, I have a feeling it has to do with the orientation of my images (one category is all portrait - the other landscape) - and the only place the search results (images/Buy/Title) are not aligned is on the result page generated from a search (the rest all look great).

                    At any rate - any suggestions to the general editing, as well as the specific issue of spacing on the search page are welcome. I tried a few things in the search template last night but was not successful (there are a lot of items in this template).
                    J-Lynn

                    Comment


                    • #11
                      With regard to this specific problem, I have a feeling it has to do with the orientation of my images (one category is all portrait - the other landscape) - and the only place the search results (images/Buy/Title) are not aligned is on the result page generated from a search (the rest all look great).
                      Are the other pages that show up correctly only showing one or the other of the categories? If so then the problem may just be that in the search results you are mixing the portrait and landscape categories unlike on other pages. If this is the case you may need to do something like add some white space (or whatever is the appropriate color based on your background) to the landscape or portrait to make them the same dimensions as the other.

                      Alternatively you could ask support to fix the template so it can accommodate both layouts.

                      Comment


                      • #12
                        After playing around a bit more in the searches, I don't think it's the orientation at all...one search I did had all portrait images and the 2nd column is definitely shifted down a bit - maybe I have a space issue in the search.html file? I thought I reverted back to the original after trying to edit the height - so if you have any thoughts on what I might look for and where in that template, I'll try that first before bothering support AGAIN...

                        Comment


                        • #13
                          After some experimenting, I realized that my set screen width was being forced out because of a combination of the landscape orientation on some of the images and the text box/link for "add to shopping cart" - I simply changed the store language to just read "Add to Cart" and my screen width and stationery banner now stays within the designated screen width pixel - yeah (wish they were all simple to fix).

                          So my only issue now is with the search result page and its vertical alignment. Where I was originally thinking that the images were the culprit, I've now realized that it's my Title...if there are additional characters, an extra row/line is added on the Search Product result page, which in turn messes up the vertical alignment (height) between each product (and the two columns).

                          Any guess as to which template I might experiment in? I know it's not the frame.html - I've had a ticket in (with multiple questions - but today I've had success in resolving two on my own so far...wonders never cease). Anyways...if anyone has any code suggestions and section/template to set the height of the product frame area on the search result page, please share. Right now I'm experimenting in the search pages template :)
                          J-Lynn

                          Comment


                          • #14
                            The html Gods are smiling down on me today :)

                            After putzing around in a variety of templates with no luck for changing the height of the entire product frame - I decided to play with the height image again ("Item Template" section of the search.html template) and tried Scribetimes suggestion...I'm happy to say that the vertical alignment was fixed when I added the code for height (just added some extra over the portrait height of my thumbnail images which is set at 180 - I set mine for 200 which will allow for 3 lines of text on the product title and still keep everything aligned vertically on the search page).

                            Thanks again Mueller & Scribetime for continued willingness to help :D
                            J-Lynn

                            Comment

                            Working...
                            X