Detailed Image

We are looking to manipulate the ‘detailed image’ and display it in different positions (other than in it’s main position).



In theory, we just need it’s code


{$product.detailed_image}
```<br />
(That doesn't work, but it should be along those lines)

Anyone have any ideas or suggestions?

Hi



I probably won’t be able to answer your question but…



can you clarify for those who may be able to, where you want to display the images?

What i understand is, that he would like get the “variable” that are for the detail image working" Wich variable should he taking for put the code in more than one places, and show the detail image in more than one place.



Sorry for my horror english :frowning:

Yes, for example, what if I wanted to display the the image from the thumbnail in the “Description” product tab. I know it sounds looney, but if you have a long product description, it becomes advantageous to include the thumbnail or additional images next to some description text help a customer better understand the offered product.



Or say I wanted to modify the features addon to include a picture or something like that, and the way I wanted to do it was harvest the thumbnail instead of directly linking from the cs-cart file structure where the images are hosted?



For instance, there are global $product_data and $products_data arrays that store all of the fields for a specific product and all productB[/B] respectively. So if you wanted to harvest the price value of a product, you would do something like $product_data[‘price’] in the php code. That is just a simple example, which I haven’t even tested for validity, but I hope it better illustrates what I am trying to accomplish.



I just basically need to call up the image_pair from within the php code for some mod I am trying to make. So, it would be helpful to know where/how CS-Cart is showing the images thumb and detailed so these values can be utilized elsewhere.

Ok, I have the solution! I know probably no one cares right now, but having the ability to pull your main image location without lots of queries and hardcoding the path is actually very useful. :slight_smile:



To harvest the image path I wrote a function called fn_get_full_image_url($image_id, $object_id)



function fn_get_full_image_url($image_id, $object_type)
{
$image_data = fn_get_image($image_id, $object_type);

return !empty($image_data) ? 'http://' . Registry::get('config.http_host') . $image_data['http_image_path'] : '';
}




This function uses the image_id then calls up fn_get_image to get the image_data array which has the field http_image_path which is the path to the image on your site. I put this code in the /core/fn.images.php file, as it makes sense to me for it to be in there.



Then utilizing that function elsewhere in your site you would do:



$image_p_data = fn_get_image_pairs($product_id , 'product', 'M'); //get the image_data array
$image_full_path = fn_get_full_image_url($image_p_data['image_id'], 'product');




Now the $image_p_data variable is an array with several fields:

pair_id

image_id

detailed_id

icon → which is actually an array (with image_icon info)

detailed → which is also an array (image_detailed info like path, alt value, height, width, etc.)



For this exercise we just want the image_id field, so we put $image_p_data[‘image_id’] into the fn_get_full_image_url() and boom, you got your all your image info!



Hope this helps someone along the way who doesn’t enjoy repeatedly banging their head on their desk until the answer finally comes out. :cool:

Does anyone know how to set the position of the product detail picture? The default is centered. I want it to be justified left so as not to block the product option selections.

Thanks,

Bob

[quote name=‘pbannette’]Does anyone know how to set the position of the product detail picture? The default is centered. I want it to be justified left so as not to block the product option selections.

Thanks,

Bob[/QUOTE]



Do you mean when you click the thumbnail to make it larger you don’t want this view centered on the pag? Or do you mean when you click on a product from search results and then the detailed image on your product listing is in the middle.

Hi,

To clarify. When you click on the thumbnail on the product page, the large image is centered. It covers the area where the options are. I was trying to keep that area clear.

The other thing I was debating on doing is to see if the popup on the product page could stay open instead of closing while the person is filling in the text fields. Customer would have to click the x to close.

The reason is that a product may have several text fields to fill in. Need to picture to stay open and out of the way so the person can fill in the text fields and see where it goes on the picture.

Just something things I want to “play” with to see it would help the customer.

Thanks,

Bob

[quote name=‘pbannette’]Hi,

To clarify. When you click on the thumbnail on the product page, the large image is centered. It covers the area where the options are. I was trying to keep that area clear.

The other thing I was debating on doing is to see if the popup on the product page could stay open instead of closing while the person is filling in the text fields. Customer would have to click the x to close.

The reason is that a product may have several text fields to fill in. Need to picture to stay open and out of the way so the person can fill in the text fields and see where it goes on the picture.

Just something things I want to “play” with to see it would help the customer.

Thanks,

Bob[/QUOTE]



I think I understand now. You want to move that little “popup” to the side so the user can still see the picture, and fill out / look at stuff about the product while the picture is open in large view.



That is a good question… My first instinct is, that shouldn’t be hard. But then thinking about my skin and how the “popup” (if we can even call it that) works, I am not so sure. Right now, when I click the product thumbnail to see the detailed view, it comes up and “grey’s out” the rest of the product page so detailed image retains all of the focus. And the “popup” is within the window, its not like it pops up in a separate window (which would make things a lot easier for you). Isn’t that javascript that does all that nice fake popup stuff?



If it is, I think you would have to locate the js directory where the popup image is generated, and then in that specific file look for the css properties that are called to put the image in the middle of the page like that, and then you got it. you can move that image around just by changing the css.



It’s monday, so I don’t have much time to look at this today, but maybe later in the week. If you discover anything as far as the javascript or css post here.

start here:



/skins/YOUR_SKIN/customer/views/products/view.tpl

/skins/YOUR_SKIN/customer/views/products/components/products.tpl

/skins/YOUR_SKIN/customer/views/products/components/product_images.tpl

/skins/YOUR_SKIN/customer/common_templates/image.tpl



and …



/js/



Just browse around for the onclick event or something like that. Hope this helps.

Thanks unique2,

This is a good start.

Bob

Dear Unique2!

Your request in this post that’s my wish too.But I don’t know much about code,so I want to know how your solution work?I just do step by step like you and put image in to folder “image/detailed” and it done??Plz teach me,I’m newbie.Thanks you so much.



Sorry for my horror english



Prub

Prub,



Hello, and welcome to the CS-Cart forums. :slight_smile:



Just to make sure I understand, do you want to do what pbannette wants to do or do you want to get the image like I want to do?



pbannette: “When you click on the thumbnail on the product page, the large image is centered. It covers the area where the options are. I was trying to keep that area clear.”



unique2: “We are looking to manipulate the ‘detailed image’ and display it in different positions (other than in it’s main position).”



Thanks

Hi Unique2!

Thanks for your reply.I want to do like this

[url]http://vietnamopentour.net/en/vietnam-tours/option-tours/vietnam-spectacular-14-days.html[/url]

When you click thumbnail in description,it like you click in product’s thumbnail.I use other solution but script conflict and have error with padding.I want to know how can put cs-cart’s product feature in description image.

Ahhh, I see, do you just want to make the “view larger image” from CS-Cart smaller?

[quote name=‘unique2’]Ahhh, I see, do you just want to make the “view larger image” from CS-Cart smaller?[/QUOTE]



Yes,use cs-cart funcion to have compatible 100%.Can you help me?

MAKE A BACKUP BEFORE YOU CHANGE ANY FILES DESCRIBED BELOW. DO NOT CHANGE FILES WITHOUT MAKING A BACKUP PLEASE!



Ok, I don’t know if this will work for you because I have changed/updated my jQuery library against the recommendations on the forums, so some things may or may not work for me that may or may not work for you.



Try this:

In the folder /js/ in your cs-cart installation directory, you will see a file called previewer.js



In this file around like 94 you will see this



P_HEIGHT = 500;
P_WIDTH = 400;




Just under this line you will see how the images are displayed when they are clicked:



$('#previewer_window').append(trl_shadows + '

' + previewer_thumbs + '
' + b_shadow);




If you have some HTML experience some of this code will look familiar to you. Particularly the “width: 100%” part. You can change these widths to be less and less until you have something you are comfortable.



Again, I have not tested this. I feel bad I haven’t been able to get back to you guys on the detailed image thing, because I would need to download and install a demo cs-cart because my Javascript is way different than the Default right now.



So please tell me if this works for you guys.



PS. Make a backup :wink:

Sorry Unique2,but I think we misunderstanding because my bad English.



In fact,I want when I click a thumbnail image that I put in description,I will have a detail image effect like when I click thumbnail image of product (image in top product have a link below “view larger image”).Everyone usually call it is “light box”.In the link I sent in my post,I use “thick box” because I don’t know how to use that cs-cart function.And it conflict with cs-cart,clear padding in table below image in description.



When I read this topic I thought you want to do like I want,so do you want like wat I want???If right,your solution will help me with my problem.If not,sorry for waste your time.

Anyway,thanks Unique2.

Oh, to do what you want to do I think all you have to do is declare it part of a class in the CSS because the js previewer is already loaded. So when you make your clickable Name image you just need to declare what class it is in. It looks like in the product_images.tpl and image.tpl files you will find what you need. I think you only need this:


class="cm-thumbnails-opener view-large-image-link"



I think an example might be


Your Image Name



Does that work for you?