Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Moving Additional Pictures

Moving Additional Pictures

Views: 2,909

Results 21 to 37 of 37
30 Apr 2011, 4:22 PM
#21
valansi avatar

valansi

New Zenner

Join Date:
Dec 2010
Posts:
37
Plugin Contributions:
0

Moving Additional Pictures

sofasurfer:

Darn it, there is not enough time allowed for editing a post.

I think I have the right file. Mine has all the stuff you specified except the first one..."#additionalImages {
...". Do I simply CREATE it?

Sorry for all the confusion.

I would use the "inspect element feature" located on your browser, that way you can easily identify what is what..

1 May 2011, 1:04 AM
#22
sofasurfer avatar

sofasurfer

Zen Follower

Join Date:
Mar 2011
Posts:
149
Plugin Contributions:
0

Re: Moving Additional Pictures

rbarbour. My website is early1900photos.com.
First off, my CUSTOM_TEMPLATE is “freetemplate2”

I did not have a “/templates/tpl_product_info_display.php” in “/includes/templates/CUSTOM_TEMPLATE/”.
So instead of editing “/includes/templates/CUSTOM_TEMPLATE/templates/tpl_product_info_display.php”, I edited “/includes/templates/template_default/templates/tpl_product_info_display.php”.

This caused my images that were way down the page to move below the main image. I good place if they were closer together. Is that possible?

It also cause my discription, which used to be to the right of the main image, to move below the additional images. Although I liked it better next to the main image, this is not to bad.

My goal is to have the images grouped closer as they now are and I would like to get the attributes and the "add to cart" button either to the right of the main image or somewhere close, where ever there is room.

I know this is asking a lot of you so let me put it this way, can you help me do these things in the most convenient way for you? Give me your opinion. I've made a lot of progress but this vast amount of room where everything is spread out is probably the most important to get tidied up.

1 May 2011, 1:25 AM
#23
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Moving Additional Pictures

sofasurfer:

I did not have a “/templates/tpl_product_info_display.php” in “/includes/templates/CUSTOM_TEMPLATE/”.
So instead of editing “/includes/templates/CUSTOM_TEMPLATE/templates/tpl_product_info_display.php”, I edited “/includes/templates/template_default/templates/tpl_product_info_display.php”.

first things first

copy tpl_product_info_display.php file to your CUSTOM_TEMPLATE folder and restore the file in the template_default folder

Whenever making alterations use the proper over-ride structure

I am a little crammed for time but will take a look at your site as soon as I can!

1 May 2011, 1:37 AM
#24
sofasurfer avatar

sofasurfer

Zen Follower

Join Date:
Mar 2011
Posts:
149
Plugin Contributions:
0

Re: Moving Additional Pictures

I will follow your instructions, master.
For all your kind help the last thing I want to do is pressure or hurry you. All I ask is that you do come back:smile:

1 May 2011, 1:44 AM
#25
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Moving Additional Pictures

sofasurfer:

This caused my images that were way down the page to move below the main image. I good place if they were closer together. Is that possible?

in your tpl_product_info_display.php file remove from your additionalImages DIV ```
style="width:100%;"

 
Always keep styling to the stylesheet.

more to come.....
1 May 2011, 1:45 AM
#26
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Moving Additional Pictures

valansi:

So, my final question is..I want to get the product attribute info, all on one line

I am almost there!

1 May 2011, 1:47 AM
#27
sofasurfer avatar

sofasurfer

Zen Follower

Join Date:
Mar 2011
Posts:
149
Plugin Contributions:
0

Re: Moving Additional Pictures

I performed the desired tasks. Now my product page is blank:eek:

1 May 2011, 2:18 AM
#28
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Moving Additional Pictures

sofasurfer:

I performed the desired tasks. Now my product page is blank:eek:

I see you restored, It may actually be easier to achieve what you want if we take it from where you are at now!

1 May 2011, 2:26 AM
#29
sofasurfer avatar

sofasurfer

Zen Follower

Join Date:
Mar 2011
Posts:
149
Plugin Contributions:
0

Re: Moving Additional Pictures

Yes I restored. And then I copied the file to my CUSTOM_TEMPLATE which is "freetemplate2". My page is now working again and the new file in CUSTOM_TEMPLATE seems to have no effect.

1 May 2011, 2:29 AM
#30
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Moving Additional Pictures

open your
/includes/templates/CUSTOM_TEMPLATE/templates/tpl_product_info_display.php

find:

<!--bof Additional Product Images --> 
CONTENTS_WITHIN 
<!--eof Additional Product Images --> 

move it below:

<!--bof Main Product Image --> 
CONTENTS_WITHIN 
<!--eof Main Product Image-->

you do not need the extra div >

1 May 2011, 2:52 AM
#31
sofasurfer avatar

sofasurfer

Zen Follower

Join Date:
Mar 2011
Posts:
149
Plugin Contributions:
0

Re: Moving Additional Pictures

It is edited as requested.
Now my discription and images are moved as they were before.
In post #29 when I had no results, I just found out why. I had placed the file into CUSTOM_TEMPLATE. Now however, I have placed it into CUSTOM_TEMPLATE/ templates and things are better.

1 May 2011, 3:28 AM
#32
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Moving Additional Pictures

sofasurfer:

My goal is to have the images grouped closer as they now are and I would like to get the attributes and the "add to cart" button either to the right of the main image or somewhere close, where ever there is room.

find:

<!--bof Product details list  -->
CONTENTS WITHIN
<!--eof Product details list -->
```and:
<!--bof Attributes Module -->

CONTENTS WITHIN

<!--eof Attributes Module -->
<!--bof Add to Cart Box -->

CONTENTS WITHIN

<!--eof Add to Cart Box-->

Then comes the CSS changes:
1 May 2011, 3:36 AM
#33
sofasurfer avatar

sofasurfer

Zen Follower

Join Date:
Mar 2011
Posts:
149
Plugin Contributions:
0

Re: Moving Additional Pictures

All done.
I did not notice any difference after this edit, just in case that is important.

1 May 2011, 3:38 AM
#34
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Moving Additional Pictures

sofasurfer:

All done.
I did not notice any difference after this edit, just in case that is important.

Did you look at a product with attributes?

2 May 2011, 12:34 AM
#36
valansi avatar

valansi

New Zenner

Join Date:
Dec 2010
Posts:
37
Plugin Contributions:
0

Re: Moving Additional Pictures

rbarbour:

I am almost there!

Sounds good, Just post on here or PM me.. thanks, you are a good man, or women, lol.

7 May 2011, 3:28 AM
#37
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Moving Additional Pictures

sofasurferIn ADMIN > CONFIGURATION > IMAGES

find:
Product Info - Number of Additional Images per Row

set value to (2)

find:

<!--bof Main Product Image -->
CONTENTS WITHIN
<!--eof Main Product Image-->

<!--bof Additional Product Images -->
CONTENTS WITHIN
<!--eof Additional Product Images -->
```Change to this:
<div class="productInfoImageWrapper"> <!--bof Main Product Image --> CONTENTS WITHIN <!--eof Main Product Image--> <!--bof Additional Product Images -->

CONTENTS WITHIN

<!--eof Additional Product Images --> </div> ```now find all sections: ``` <!--bof Product Name--> CONTENTS WITHIN <!--eof Product Name--> <!--bof Product Price block -->

CONTENTS WITHIN

<!--eof Product Price block --> <!--bof free ship icon -->

CONTENTS WITHIN

<!--eof free ship icon --> <!--bof Product details list -->

CONTENTS WITHIN

<!--eof Product details list --> <!--bof Attributes Module -->

CONTENTS WITHIN

<!--eof Attributes Module --> <!--bof Add to Cart Box -->

CONTENTS WITHIN

<!--eof Add to Cart Box--> <!--bof Quantity Discounts table -->

CONTENTS WITHIN

<!--eof Quantity Discounts table -->
<div class="productInfoImageWrapper"> <!--bof Product Name--> CONTENTS WITHIN <!--eof Product Name--> <!--bof Product Price block -->

CONTENTS WITHIN

<!--eof Product Price block --> <!--bof Quantity Discounts table -->

CONTENTS WITHIN

<!--eof Quantity Discounts table --> <!--bof free ship icon -->

CONTENTS WITHIN

<!--eof free ship icon --> <!--bof Product details list -->

CONTENTS WITHIN

<!--eof Product details list --> <!--bof Attributes Module -->

CONTENTS WITHIN

<!--eof Attributes Module --> <!--bof Add to Cart Box -->

CONTENTS WITHIN

<!--eof Add to Cart Box--> </div> <br class="clearBoth" /> ```then in your stylesheet add: ``` .productInfoImageWrapper { float:left; width:50% !important; }

.productInfoInfoWrapper {
float:right;
width:50% !important;
}

#productMainImage {
width:100% !important;
}

#cartAdd {
CONTENTS WITHIN
}

float:left;


[Attachment no longer available]