 |
miked
User
May 23, 2008, 7:12 AM
Post #1 of 25
(1816 views)
Shortcut
|
|
Products pages - "list" page results setup horizontally
|
Can't Post
|
|
Hello, this is for Products and how the "list page" shows each product on the page. Currently, the products stack on top of each other while going down the page. My question is:
Can the "list page" results show up on the page 3 or 4 thumbnail images wide (horizontally) with rows going down the page depending upon how many products for that group? Basically I will strip all the records on the list page I don't want to show up, except for the Image and Link (to the details page).
Is this possible? Thanks, Mike
|
|
| |
|
Dave
Staff
/ Moderator
May 23, 2008, 12:29 PM
Post #2 of 25
(1803 views)
Shortcut
|
|
Re: [miked] Products pages - "list" page results setup horizontally
[In reply to]
|
Can't Post
|
|
Hi Mike,
Yes, there's a few ways to do that. If you have a vertical column for each product group, though, is there more than 3-4 groups? And if so how will those be displayed?
The first step is to create an HTML mockup of how you want it to look.
If you want a list of products per column you might want to use multiple viewers. If you just want the products to show an image and wrap after every 3 I can give you a bit of PHP code to output a <br/> or </tr><tr> to do that. Figuring out the design first without worrying about the CMS is the best first step though. The CMS can almost always mimic the design.
Hope that helps. Let me know some more details and post an url to your mockup if you can.
Dave Edis - Senior Developer
interactivetools.com
|
|
| |
|
miked
User
May 23, 2008, 1:17 PM
Post #3 of 25
(1801 views)
Shortcut
|
|
Re: [Dave] Products pages - "list" page results setup horizontally
[In reply to]
|
Can't Post
|
|
Hello again Dave,
Yes I would like the list page to list 3 products (and then wrap to the second row, etc.) and when you click on the product it will go to the details page for that product.
All total I will duplicate this (with different record names) for a total of 6 different pages (product menu choices on the website).
One of your Featured Clients has something VERY similar.. but I only want 3 across then wrap down to the second row, then third (if needed) etc. and if possible be able to display the name of the product as well. The page I'm referring to on your client's website is: http://www.berryfit.com/Jackets.php
Thanks again for your support... Mike
|
|
| |
|
Dave
Staff
/ Moderator
May 24, 2008, 3:09 PM
Post #4 of 25
(1787 views)
Shortcut
|
|
Re: [miked] Products pages - "list" page results setup horizontally
[In reply to]
|
Can't Post
|
|
Hi Mike,
There's several ways to do this. If you put each product in a fixed width DIV and float it left they'll wrap when they reach the right-side of the screen. If you put them inside a container div with a fixed width they'll wrap when they reach the edge of the container div. That is a HTML only way to do it.
A way to do it with tables and PHP would be like this:
<table border="1">
<tr>
<?php foreach ($records as $record): ?>
<td>
<?php echo $record['title'] ?><br/>
</td>
<?php $maxCols=3; if (@++$count % $maxCols == 0): ?></tr><tr><?php endif; ?>
<?php endforeach; ?>
</tr>
</table>
Basically what that does is output each record in a <td>table cell</td> and then end and start a new row ("</tr><tr>") every 3 table cells.
Hope that helps. Let me know if that works for you.
Dave Edis - Senior Developer
interactivetools.com
|
|
| |
|
miked
User
May 24, 2008, 11:08 PM
Post #5 of 25
(1781 views)
Shortcut
|
|
Re: [Dave] Products pages - "list" page results setup horizontally
[In reply to]
|
Can't Post
|
|
That certainly helped. I had to include the image records in the table as well; and added a bit to the cellpadding so it appeared to "column" the images so they didn't have to be the same width (which is a good idea since most clients who need to use a CMS will take some photos portrait and some landscape).
Thanks!
|
|
| |
|
Dave
Staff
/ Moderator
May 26, 2008, 8:50 AM
Post #6 of 25
(1657 views)
Shortcut
|
|
Re: [miked] Products pages - "list" page results setup horizontally
[In reply to]
|
Can't Post
|
|
Glad to hear it's working! :)
The trickiest part is figuring out the design and HTML. Once you have the HTML part figured out it's usually much easier to look at it and try and figure out what parts need to be repeated when.
If you need help with anything else just let us know! :)
Dave Edis - Senior Developer
interactivetools.com
|
|
| |
|
miked
User
May 26, 2008, 10:03 AM
Post #7 of 25
(1644 views)
Shortcut
|
|
Re: [Dave] Products pages - "list" page results setup horizontally
[In reply to]
|
Can't Post
|
|
Dave, why does my client get an "A" type of symbol when typing directly in the wysiwyg editor? It happens when they space, and hit return. Then I have to go in an select the html button and clear the "A" symbols for them.
Any ideas?
|
|
| |
|
Dave
Staff
/ Moderator
May 26, 2008, 10:16 AM
Post #8 of 25
(1643 views)
Shortcut
|
|
Re: [miked] Products pages - "list" page results setup horizontally
[In reply to]
|
Can't Post
|
|
It could be something to do with the character set their browser or the server is using.
Does it happen for you as well? Do you know what browser the client is using?
Dave Edis - Senior Developer
interactivetools.com
|
|
| |
|
miked
User
May 26, 2008, 10:20 AM
Post #9 of 25
(1641 views)
Shortcut
|
|
Re: [Dave] Products pages - "list" page results setup horizontally
[In reply to]
|
Can't Post
|
|
Dave, she is using IE, I am using firefox. Yes it happens for me as well, whenever I hit the space button twice. Like at the end of a period, and the space, space, start a new sentence.
|
|
| |
|
Dave
Staff
/ Moderator
May 26, 2008, 10:26 AM
Post #10 of 25
(1640 views)
Shortcut
|
|
Re: [miked] Products pages - "list" page results setup horizontally
[In reply to]
|
Can't Post
|
|
Can you email me me a CMS login so I can try and reproduce it? My email is dave@interactivetools.com (email, don't post login details to forum).
Thanks!
Dave Edis - Senior Developer
interactivetools.com
|
|
| |
|
miked
User
May 26, 2008, 10:34 AM
Post #11 of 25
(1639 views)
Shortcut
|
|
Re: [Dave] Products pages - "list" page results setup horizontally
[In reply to]
|
Can't Post
|
|
Dave, my apologies! I should have checked a few things before posting, I know better than that! I forgot to replace the universal char set to:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
... on those pages.
I do have one more issue, the "name" is showing is a smaller font on the details page, and I'm using the exact same code/styles as I simply duplicated the pages and replaced the records. The other pages "detail page" all show the correct font size.
(This post was edited by miked on May 26, 2008, 8:21 PM)
|
|
| |
|
Dave
Staff
/ Moderator
May 26, 2008, 4:35 PM
Post #12 of 25
(1595 views)
Shortcut
|
|
Re: [miked] Products pages - "list" page results setup horizontally
[In reply to]
|
Can't Post
|
|
If you view source on that page you'll see you have the document header twice. Search for "<html" and you'll find two of them.
That could be related. It's definitely an HTML issue. What I usually do in that case is save the output to a plain HTML file. Trying to figure out style/css issues in a plain html file is often faster.
Try removing the second html header and see if that makes a difference. Let me know how it goes!
Dave Edis - Senior Developer
interactivetools.com
|
|
| |
|
miked
User
May 26, 2008, 8:04 PM
Post #13 of 25
(1585 views)
Shortcut
|
|
Re: [Dave] Products pages - "list" page results setup horizontally
[In reply to]
|
Can't Post
|
|
That did it! The code needed a good cleaning.
Thanks!
|
|
| |
|
nkerschgens
User
Sep 11, 2008, 1:12 AM
Post #14 of 25
(1044 views)
Shortcut
|
|
Re: [Dave] Products pages - "list" page results setup horizontally
[In reply to]
|
Can't Post
|
|
hi Dave,
i saw your code, how would this be posible if you dont use php...
|
|
| |
|
james_jackson
User
Sep 11, 2008, 9:45 AM
Post #15 of 25
(1023 views)
Shortcut
|
|
Re: [Dave] Products pages - "list" page results setup horizontally
[In reply to]
|
Can't Post
|
|
Hi Dave,
This is exactly what I want to be able to do, but I'm completely unfamiliar with php. I certainly understand the concept of what your code does but I'm unsure of how to manipulate it to meet my needs.
I'm trying to create a photo gallery for a client. I've set up the Photos section using a Multi-Record Section Editor so I can display photos from each event as a group. My intent is to have the main photo page of the website display the description of the event, three thumbnails (unlinked) running horizontally, then a link below that the user would click to take them to the list page with larger version of the photos once again running horizontally.
Can you give me some detailed codes snippets that might be able to help out?
I'd sure appreciate it!
.james.
|
|
| |
|
Dave
Staff
/ Moderator
Sep 11, 2008, 12:54 PM
Post #16 of 25
(1008 views)
Shortcut
|
|
Re: [nkerschgens] Products pages - "list" page results setup horizontally
[In reply to]
|
Can't Post
|
|
>i saw your code, how would this be posible if you dont use php...
I'm not sure what you mean? Can you explain your question more? Thanks!
Dave Edis - Senior Developer
interactivetools.com
|
|
| |
|
Dave
Staff
/ Moderator
Sep 11, 2008, 1:01 PM
Post #17 of 25
(1006 views)
Shortcut
|
|
Re: [james_jackson] Products pages - "list" page results setup horizontally
[In reply to]
|
Can't Post
|
|
Hi James,
The first step is to create two mockup html pages that show exactly how you want those pages to look.
Next is to create a viewer page that outputs all the information (the images and event data) without the design or layout.
And the final step is to organize the html on that viewer page so it "looks" like the design in your mockups.
Let me know if you are you able to post a link to your mockups and how far you've got with creating viewers and I'll try and help you with the rest.
Dave Edis - Senior Developer
interactivetools.com
|
|
| |
|
nkerschgens
User
Sep 12, 2008, 12:44 AM
Post #18 of 25
(993 views)
Shortcut
|
|
Re: [Dave] Products pages - "list" page results setup horizontally
[In reply to]
|
Can't Post
|
|
got it working with html/css.
|
|
| |
|
Dave
Staff
/ Moderator
Sep 12, 2008, 11:24 AM
Post #19 of 25
(976 views)
Shortcut
|
|
Re: [nkerschgens] Products pages - "list" page results setup horizontally
[In reply to]
|
Can't Post
|
|
Great, glad to hear it. :) Let us know if you need anything else.
Dave Edis - Senior Developer
interactivetools.com
|
|
| |
|
Dave
Staff
/ Moderator
Sep 19, 2008, 1:50 PM
Post #21 of 25
(646 views)
Shortcut
|
|
Re: [james_jackson] Products pages - "list" page results setup horizontally
[In reply to]
|
Can't Post
|
|
Ok, starting with the first page (photos2.htm) create a list of records with all the photos and fields you want displaying. Next, put them in a table like this (start with border=1 for debugging):
<table border="1">
<tr>
<?php foreach ($yourVariableName as $record): ?>
<td>
... insert code to show your fields and uploads here ...
</td>
<?php endforeach; ?>
</tr>
</table>
And that will show them all in a horizontal table.
Hope that helps, let me know how it goes.
Dave Edis - Senior Developer
interactivetools.com
|
|
| |
|
james_jackson
User
Sep 26, 2008, 12:40 PM
Post #22 of 25
(471 views)
Shortcut
|
|
Re: [Dave] Products pages - "list" page results setup horizontally
[In reply to]
|
Can't Post
|
|
Hi again, Dave!
I started dropping php code into the html mock up of that we've talked about & I'm getting some error messages. I wanted you to review them before I progress any further. There's obviously something I'm not understanding here...
I've uploaded photos & created a record with CMS Builder. Then changed the html mock up to a php file & added the code snippet about the header. Then I dropped in my Event Title & Event Description php code snippets.. This is what I've got:
Thanks again for all your time,
.james.
http://hamburgermarys-orlando.com/photos2.php
|
|
| |
|
Dave
Staff
/ Moderator
Sep 26, 2008, 12:58 PM
Post #23 of 25
(470 views)
Shortcut
|
|
Re: [james_jackson] Products pages - "list" page results setup horizontally
[In reply to]
|
Can't Post
|
|
No problem, can you attach the photos2.php file to this post?
Dave Edis - Senior Developer
interactivetools.com
|
|
| |
|
james_jackson
User
Sep 26, 2008, 1:45 PM
Post #24 of 25
(464 views)
Shortcut
|
|
Re: [Dave] Products pages - "list" page results setup horizontally
[In reply to]
|
Can't Post
|
|
There ya go... 
|
|
Attachments:
|
photos2.php
(11.2 KB)
|
|
| |
|
Dave
Staff
/ Moderator
Sep 29, 2008, 11:41 AM
Post #25 of 25
(423 views)
Shortcut
|
|
Re: [james_jackson] Products pages - "list" page results setup horizontally
[In reply to]
|
Can't Post
|
|
Hi James,
I didn't see any errors in the attached file or on the page anymore?
What you want to do is start with the code from the code generator that displays images and then copy and paste the tags so they repeat that table cell in your code where you want the images to appear.
Hope that helps!
Dave Edis - Senior Developer
interactivetools.com
|
|
| |
|
