Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Eliminating wrap-arounds

Eliminating wrap-arounds

Views: 41,464

Results 41 to 60 of 166
18 Jul 2007, 5:48 PM
#41
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Eliminating wrap-arounds

gjh42:

I use 7zip (and have a six-year-old trial copy of Winzip:) so can't comment on how to use Winzip Pro 11... sorry...
I'll find out eventually, don't worry.
It's only that I am lazy and prefer to ask.
Thanks.

18 Jul 2007, 9:01 PM
#42
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Re: Eliminating wrap-arounds

And finally here is THE additional images relocated with style contribution.
Feel free to tear it down, I will consider all suggestions.
Thanks.

18 Jul 2007, 9:48 PM
#43
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Eliminating wrap-arounds

Without having actually tested it yet, I have just a few suggestions:

tpl_product_info_display.php looks fine, but it would be good to include a comment in the top section about the purpose and date of the specific change.

Everyone already has a modified stylesheet, and the stylesheet.css would erase their changes if carelessly uploaded.
It would be better to put only the modified stylesheet sections in a file named stylesheet_additional_images.css or something, so they could safely and easily be added/merged with the existing.

It would be helpful to put the date, title, version and other "header" info at the top of the readme. I would also suggest putting the whole CSS block there for easy reference, as it is not very large.
For consistency with other tags, it might be better to name the wrapper #additionalImagesWrapper, or perhaps #productImagesWrapper since it is for all the product images, not just additional ones.

/beginning of additional images code/

#additionalImageWrapper {
float: left;
width: 120px
}

#productAdditionalImages .additionalImages a {
float: left;
margin-left: 10px;
}

/end of additional images code/

One typo - "root/includes/templates/your_template/templates/tpl_product_display_info.php contains "

Good work so far, and I will test it when I have time tonight - I don't expect any difficulties.

19 Jul 2007, 2:51 AM
#44
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Re: Eliminating wrap-arounds

Allrighty then.
Behold the birth of version 1.0 (open to further suggestions).
Thanks.

24 Jul 2007, 4:16 PM
#45
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Eliminating wrap-arounds

Sorry for the long delay in replying. The package looks fine now, with one exception: you really should not have "stylesheet.css" in the includes - you should instead put the added declarations by themselves in a file called something like stylesheet_additional_images.css. You can include a comment that the code would best be added to the main stylesheet instead of loading another css file; but this will function just fine if uploaded alongside the user's stylesheet with no risk of adverse consequences.

I can guarantee that if you put stylesheet.css in the package, someone would ignore all instructions and upload it as is, erasing their own custom stylesheet (which they would not have backed up), and then come crying for help which we would not be able to give.

So go ahead and submit this mod, and thank you for doing this.

25 Jul 2007, 7:24 AM
#46
blag avatar

blag

Zen Follower

Join Date:
May 2007
Location:
Leicester, England
Posts:
165
Plugin Contributions:
0

Re: Eliminating wrap-arounds

Hear, hear!!

26 Jul 2007, 11:17 PM
#47
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Re: Eliminating wrap-arounds

gotcha y'all.
I have been travelling for business the whole week so unable to answer in a timely manner, sorry about that.
Please note that the added declarations are already in the readme, with thorough explanations.
But caution is warranted, so instead of the standard stylesheet + the mod, I will create an additional stylesheet with just the mod, to be uploaded in same folder.
I will also add a comment at the top suggesting that it would be best to just add the code to the custom stylesheet instead of loading one too many, but that it would work either way.
Thank you so much for the input, I think this mod will clear many recurrent questions and stimulate creativity.

26 Jul 2007, 11:20 PM
#48
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Re: Eliminating wrap-arounds

Oh, don't worry about the testing.
I have already loaded literally hundreds of pages, and they all work great both in IE and FF.
Later.

28 Jul 2007, 1:00 PM
#49
newmanz avatar

newmanz

New Zenner

Join Date:
Jul 2007
Posts:
21
Plugin Contributions:
0

Re: Eliminating wrap-arounds

Hello,
I uploaded your files into the respective folders required.
When I go to load up a new product or edit and old product, I seem to be only getting the choice to add one picture file, same as before.

What have I done wrong?

I renamed my old display.php file original_info_display and uploaded tpl_product_info_display.php into templates/freeblue/templates

I uploaded the Additional_images_stylesheet.css into my templates/freeblue/css folder leaving the original stylesheet_new.css

https://www.newmanz.co.nz/zen

28 Jul 2007, 1:29 PM
#50
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Re: Eliminating wrap-arounds

I just learned that v. 1.0 of this contribution is available for download in the templates section, it includes the latest modifications that we discussed here.
It has been reviewed by the Zen Cart team, and approved.
Hoorray!!!
Now, Newmanz, is this what you downloaded?
Second, your problem apparently has nothing to do with the files, Zen Cart will only allow you to upload ONE main product image.
The other images you upload manually, following the Zen Cart naming convention, into the same folder as main image.
e.g. MainImage_01, MainImage_02, etc.
You can also use alphabetical characters or a combination of both:
MainImage_a , MainImage_b, etc.
Always use just one underscore _, OK?
There is a lot more in the Manual pp. 203-207.
There is also a FAQ by Ajeh
https://www.zen-cart.com/tutorials/index.php?article=58
After you understand that, you can use Image Handler to upload additional images for you.
Dig into that first, and then be back to us if problems.
Hope this helps.

15 Sep 2007, 11:45 PM
#51
rplatt avatar

rplatt

New Zenner

Join Date:
Sep 2007
Posts:
6
Plugin Contributions:
0

Re: Eliminating wrap-arounds

I've been kicking about in the CSS for a few days and have hit a brick wall with regards to the layout of the additional images. I've used the mod from the downloads section on my site as illustrated here .. http://www.1300ad.co.nz/store/index.php?main_page=product_info&products_id=181 but I just can't get the images to align. Ideal scenario is image(s) alignment on the left and text on the right (text contained so that it doesn't wrap around the images, in more of a columnar style)

Feel free to throw eggs at me if it's been asked already. Perhaps it's simply my comprehension but even a simple suggestion to get this behind me would be most appreciated. I've a moderate understanding of CSS and guff but certainly no expert.

:frusty:

16 Sep 2007, 9:57 PM
#52
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Eliminating wrap-arounds

Have you solved your problem since posting this? I don't see anything wrong with your display. (In Firefox 2)

16 Sep 2007, 11:36 PM
#53
rplatt avatar

rplatt

New Zenner

Join Date:
Sep 2007
Posts:
6
Plugin Contributions:
0

Re: Eliminating wrap-arounds

Yeah, I've literally been trying for about a week, had a moment of realisation last night and.. problem solved. Simply used a different module which just replaced the product_info (I think) page. Decreased ease of customisation as it's not css but still.. I'm content. I'm learning as I go.

Can't get the hoverbox2 addon to work but that's for another thread..

But, thanks for pointing me to the forums gjh42.

17 Sep 2007, 1:10 AM
#54
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Re: Eliminating wrap-arounds

rplatt:

Yeah, I've literally been trying for about a week, had a moment of realisation last night and.. problem solved. Simply used a different module which just replaced the product_info (I think) page. Decreased ease of customisation as it's not css but still.. I'm content. I'm learning as I go.

Can't get the hoverbox2 addon to work but that's for another thread..

But, thanks for pointing me to the forums gjh42.
I have been away from the forums for a few days.
I wouldn't suggest that you use a different module, the template in the downloads section is based on the latest Zen Cart version.
To solve the wrap-around the images problem I simply use a table for the text of the product description if its too long.
There may be other solutions using CSS, but more involved, tables work fine for now.

17 Sep 2007, 2:48 AM
#55
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Eliminating wrap-arounds

A very simple way of keeping the description from wrapping around the images is to specify in the stylesheet```
#productDescription {
margin-left: 210px;
}


You can add the same margin to other elements like the product details, attributes and add to cart button.
23 Apr 2008, 10:47 PM
#56
webskipper avatar

webskipper

Totally Zenned

Join Date:
Nov 2007
Location:
USA
Posts:
876
Plugin Contributions:
2

Re: Eliminating wrap-arounds

How does this contribution turn on to function? Both files are up and i added the additional lines to my stylesheet and I don't see where to upload extra pics.

Thanks in advance.

24 Apr 2008, 5:23 AM
#57
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Eliminating wrap-arounds

This mod does not deal with uploading images, it simply handles their display after they are uploaded.

You have to name your additional images to go along with the base product image, and upload them by FTP to the appropriate place in your /images/ folder. See the FAQ/tutorials for complete info.

24 Apr 2008, 7:39 PM
#58
webskipper avatar

webskipper

Totally Zenned

Join Date:
Nov 2007
Location:
USA
Posts:
876
Plugin Contributions:
2

Re: Eliminating wrap-arounds

I did that, thanks. Still not working. I am working with one product at a time . All aditional images are uploded to the images folder:

image.jpg
image_1
image_2.jpg
etc

24 Apr 2008, 7:59 PM
#59
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Eliminating wrap-arounds

What setting do you have for Configuration > Images > Product Info - Number of Additional Images per Row ?

24 Apr 2008, 9:24 PM
#60
webskipper avatar

webskipper

Totally Zenned

Join Date:
Nov 2007
Location:
USA
Posts:
876
Plugin Contributions:
2

Re: Eliminating wrap-arounds

3 Also, the css addition caused my description to expand over my image.