simplest image question in the world

Hi, I have looked for two hours for the instructions on the most basic image issue imaginable. I cannot find the answer.

I am currently uploading only one large image per product, and letting Zen Cart, when needed, put it in the smaller image containers for the thumbnails that display in lists and on the Product Info page.

I simply want to display my one large image directly on the Product Info page, in the center maybe towards the bottom or in the middle.

Isn't this something that can be done through Admin layout settings somewhere?

Thanks..

I simply want to display my one large image directly on the Product Info page, in the center maybe towards the bottom or in the middle.

Isn't this something that can be done through Admin layout settings somewhere?
No, by default it is aligned top left on the product info page

in a copy for your template of tpl_product_info_display.php is where this order/layout can be altered

Thanks, Kobra.

Right now, only the default medium thumbnail is top-left.

Are you saying that there is an Admin setting for making the native large display, by default top-left, where the thumbnail currently is? If so, I would use it.

Or, from my current default medium thumbnail and layout, must all additional image pointing and layout on the page be done w/ code? No Admin manipulation at all?

My concern is because I will be listing 1000s of individual items, and image manipulation becomes very time consuming. When listing an item, it would be better if the single image we are allowed to upload, goes straight onto the page at its full size, rather than as a thumbnail. That would save me a tremendous amount of time if I am trying to list 50+ items per day on an ongoing basis.

Make the admin setting for medium image size the same as the large image. Then your image will display large on the product info page. It would take a little more tweaking to disable the "larger image" function which is now superfluous.

Thanks guys!

gjh42, your solution works nicely (http://www.vintage-adventures.com/index.php?main_page=product_info&cPath=2&products_id=2). I just need to break the links for Click for Larger Image since they wouldn't be needed under this solution.

There may be another clue in your answer, though...

I wonder if Zen Cart's setting, in code, for that image placeholder could simply be coded to pull in the native image file w/o any dimension restriction (as the placeholder currently has), then the image would display native large, and the default medium thumbnail dimensions (Product Info - Image Width/Height in Admin) would not have to altered?

Dang, I dunno, the medium thumbnail is just dandy as it is on the page. I like it. I just want to also have a single native large image also on the page.

Just, again, to confirm (I can be dense sometimes): any additional image(s) on the page, beyond the one we have been tampering with, can only be added by adding code to the tpl_product_info_display.php, as Kobra directed? Is this correct?

Umm... additional images are a basic feature of Zen Cart's product info page. After you designate the original base image file for the product, upload as many more as you want by FTP directly to the same folder. Name the additional images the same as the base image, with a suffix to indicate that they are additionals. I.E., product23.jpg, product23_1.jpg, product23_2.jpg, product23_back.jpg, etc.

If you want to change the default page position of these images, you can edit tpl_product_info_display.php and/or the stylesheet.

The medium image is not used anywhere but as the main image on the product info page, so there is no impediment to altering it. If you set its dimensions to 0 or blank, it may be unhindered in size (or that may only work with one of h or w at a time - I haven't tested this recently to remember).

Note that additional images will display at the small image size set in admin, with a link to a larger popup. Again, this could be changed by editing some code.

Glenn,

First, thank you.

Yes, I'm starting to get my head around this image architecture business -- not sure why it seemed so difficult.

I guess what I didn't understand for a long time was that simply FTPing additional images (front, back, side view, for example) of the same product (using a certain filename structure) to the same directory as the so-called original image, would add the additional clickable thumbnails on the Prod Info page.

I won't have to use additional images in that way, because my products use only one image per product, always, so all I'm faced with is file sizing and visual sizing considerations.

For keeping the size of thumbnails small I will check out IH2, rather than the laborious task of creating thumbnails myself. For displaying a single large image of each product I have for sale, I can put it directly on the Prod Info page by adjusting the pixel restriction of the "medium" image, or I can let shoppers click and get a large popup. I will fiddle with those choices to see which one seems better for the shopper. I'm still thinking there might be also be a way to put some dynamic code in the php for Prod Info that would call the image at full size. Something like PROD_IMAGE in the php, and the image for that particular product would get called and displayed w/o pixel restraint and w/o being clickable.

Oh yes, when I set the "medium" image pixel restraint to 700x700, the image simply displayed at its native size of 400x500 -- no stretching and no creation of canvas border. So that was cool. I think that might be related to the setting in Admin Images for Calculate Image Size and/or Use Proportional Images. I have no idea if those settings are in play or not in that situation.

Dang, I'm making too much out of this. Sorry. Thank you kindly for helping and have a good day.

This is simple for Zen cart 1.39d

I discovered these two things by accident not sure if it is proper however it does work.

The first goof: I in avertedly place two photos yourimagename_MED.png and yourimagename_LRG.png into the /images/medium/ folder. What happen is that the yourimagename_LRG.png showed up centered at the bottom of the product description page. I did not want that so it took me a bit to figure why it was showing up there.

Anyhow I learned I could right click on the image and it told me the path to the location of the photo and that’s where I discovered the error and moved the photo to the proper location from /images/medium/yourimagename_LRG.png to /images/large/yourimagename_LRG.png where it was suppose to be in the first place and the problem went away, but for you this may be a solution.

The second error I made while testing in the admin area, for the product description. While trying to change colors font size and add links into my product page, I used some code I found on the net, which included an imbedded picture and it showed up to the left on my product description page. I then made the changes to suit my needs.

The picture code is as follows:

<h2>Can the world see your Ad?</h2><img border="0" src="http://midnightadwar.com/earthlight.gif" alt="Midnight Ad War" width="120" height="90" />

Copy and paste this into one of your product description pages in plain text.

After you run your test

Just change the <h2> to whatever title you want or size. <h2>
Change the scr= to the image location to be displayed
alt= change this to what ever you would like to popup when the mouse pointer rolls over it. And width= to whatever sizes you want

Place this code where you normally would type in the Products Description:

By logging into your admin, go to catalog and select categories/product. Open a Product in Category: and drop this code into Products Description box and then click preview you should see the world from one of my pages.

Make any change to suit your needs and stop stealing my bandwidth.

This here is a slice of the actual code and description I dropped into my production description box. To individually control the text, and links on each product page and I can include the picture code above if I want extra pictures to show up, and pending where I place the code is pending where the pic will show up on the page, top, middle, or the bottom.

<font size="3" color="#ffffff">A nice little piece of Internet real-estate and a great way to save money using the power of the Internet to reach the world.</font>

<p> <font size="3" color="#ffffff">Do not miss out, because this site will gain attention and traffic by peoples participation and the compassion to help.</font> </p> <p> <font size="3" color="#00ff00">In addition, for our qualifying Clients/Advertisers with this purchases you will receive a free star with link on our thank you Universe home page at:</font> <a target="_blank" href="http://www.icucenterstage.net"><font size="3" color="#ffff00">(Icucenterstage.net) as our way of saying Thank you!</font></a></p> <p> <font size="3" color="#00ffff"> For our qualifying Clients or Advertisers in the “Silver” category with a five-year purchase you will qualify at a chance to win the planet (Venus) on our thank you universe homepage in addition to your star-link. Drawing for the planets will be held once all the Ad spaces have been sold-out in this category. All planet winners will be entered into a special raffle, giving each holder of a planet 1 in 5 chance of winning. </font></p> <p> <font size="2" color="#00ff00"> We say qualifying Clients/Advertisers because we reserve the right to exclude large companies and corporations from AAA to Zales this also includes brand names, supermarkets and fast food chains; such as Arbys to Jack In The Box, Black-N-Decker to Snap on Tools, Albertson’s to Safeway, and Bert’s Big-N-Tall to Wal-Mart. This exclusion extends to the Internet, which includes eBay to MSN and others like it that controls the majority of the market, or any company or corporation controlled by stockholders or offered on the stock exchange. </font></p>

And it passes validation!

This code here is from the admin area under tools define_main_page.php I just dropped this code into it and it worked great. I am including it if anyone would like to use some snippets feel free. I would clean it up and us general text but I just don’t have the time right now.

<p> <font size="3" color="#ffffff"> With your participation and your willingness to advertise with MidnightAdWar.com, you will not only increase your sites popularity in a unique way; but you will be helping us to stay in our home and perhaps even saving a life in the process.</font></p> <p> <font size="3" color="#ffffff"> Help us and we will provide you with our services and in all provability this site will stimulate media wide attention. Be one of the first to go down in history by helping and get your site noticed worldwide in return.</font> </p> <p> <font size="3" color="#ffffff">We believe advertising with MidnightAdWar.com will be one of the fastest growing interactive new wave to advertise your site. We will charge no associated monthly fee’s, such as (CPA) Cost per Action, (CPI) Cost per Impression, and No (CPC) Cost per Clicks, saving you hundreds or even thousands of dollars per month while using the power of the Internet to reach the world. </font> </p> <p> <font size="3" color="#00FFFF">We also, believe this site will gain media attention through your participation, such as the million dollar home page Created by Alex Tew, gained back in 2005.</font></p> <p> <a target="_blank" href="http://www.milliondollarhomepage.com"><font size="3" color="#00FF00"> Don't take our word for it, checkout the Million dollar homepage for yourself before you decide.</font></a> </p> <p> <font size="3" color="#FFFFFF"> Or do a simple search with these keywords:</font> <font size="3" color="#FF0000">(Alex Tew, million dollar home page)</font> <font size="3" color="#FFFFFF"> but remember you're not buying Ad space to put a kid through college your helping to restore lives!</font></p> <p> <font size="3" color="#FFFFFF">Also, we have no plans for your Ads to be lost in the montage of logos. All Ads placed at midnightadwar will be kept separated and shall not overlap.</font></p> <p> <font size="3" color="#FFFFFF">Plus everyone that joins will receive a star-link on our “thank you” universe at:</font><a target="_blank" href="http://www.icucenterstage.net"><font size="3" color="#ffff00">(Icucenterstage.net) as our way of saying Thank you!</font></a></p>

Billy

midnightadwar.com (currently not live looking for answers for Zen cart Fistdata test account)

Thanks, Billy, pretty cool. That's trippy that the _LRG in the _MED folder would get displayed. Good suggestions for picture placement options. I'll try them out!

Yes I worked with it a little further, and it is actually a lot work.

But here are the steps I took to produce five photo views the hard way on the product page.

First I used all the HD photos at 600x400

The first photo was the view of the package product so I made three copies of it and named the same photo as follows:

1. viewprod.png this is the first photo that was uploaded when setting up the product, and saved it to main using the browse feature.
2. viewprod_Med.png using an FTP I uploaded this photo to /images/medium/
3. viewprod_LRG.png upload to /images/large/

The following photo was the product out of package shots I made duplicate copies of each: 2-Front, 2-Right-side, 2-Left-side and 2-Back-sides and named them accordantly. I don’t sell product so this was just for fun.

Named as follows:

1. viewprod_Frnt_MED.png uploaded to /images/medium/
2. viewprod_Frnt_LRG.png uploaded to /images/large/
3. viewprod_Rside_MED.png uploaded to /images/medium/
4. viewprod_Rside_LRG.png uploaded to /images/large/
5. viewprod_Lside_MED.png uploaded to /images/medium/
6. viewprod_Lside_LRG.png uploaded to /images/large/
7. viewprod_Bkside_MED.png uploaded to /images/medium/
8. viewprod_Bkside_LRG.png uploaded to /images/large/

The second test I did was to use the html code and drop it into the production description box and just told it where to find the photo.

<h2>Packaged Product</h2><img border="0" src="http://yoursite.com/ images/medium/viewprod_Med.png " alt="I Pad Model #xxx" width="120" height="90" /> <h2>Front View</h2><img border="0" src=" <http://yoursite.com/> images/medium/viewprod_Frnt_MED.png " alt=" I Pad Model #xxx " width="120" height="90" /> <h2>Right-Side</h2><img border="0" src=" <http://yoursite.com/> images/medium/viewprod_Rside_MED.png " alt=" I Pad Model #xxx " width="120" height="90" /> <h2>Left-Side</h2><img border="0" src=" <http://yoursite.com/> images/medium/viewprod_Lside_MED.png " alt=" I Pad Model #xxx " width="120" height="90" /> <h2>Back Viewh2><img border="0" src=" <http://yoursite.com/> images/medium/viewprod_Bkside_MED.png " alt=" I Pad Model #xxx " width="120" height="90" />

And there it was different views of the product on the product page using less photos and storage space. The best part about this I was able to change the title of each picture and the size easily enough.

The things I could not figure out was how to place them on the page, horizontally, left, right, or center using the HTML code above or if it is SSL compliant.

However I was able to separate the images using this code and dropping it into the product description box in plain-text.

<p> <font size="3" color="#ffffff"> Place a text message here pertaining to the photo or product description front view.</font></p> <h2>Front View</h2><img border="0" src=" <http://yoursite.com/> images/medium/viewprod_Frnt_MED.png " alt=" I Pad Model #xxx " width="120" height="90" /> <p> <font size="3" color="#ffffff"> Place a text message here pertaining to the photo or product description Back View .</font></p> <h2>Back View</h2><img border="0" src=" <http://yoursite.com/> images/medium/viewprod_Bkside_MED.png " alt=" I Pad Model #xxx " width="120" height="90" />

And it does pass validation but it is giving me warnings pertaining to using this tag ( /> )

In actuality I guess I should not be posting this here, since it does not directly answer your question. Perhaps it should be placed under a category called playing with Zen.:D

Anyhow, what I have learned is that this thing is a monster and it is evolving everyday. The Zen Team has done an amazing job and with all the peoples contributions with modules I could only envision what Zen cart will become.

Anyhow hope it will save someone, sometime from experimenting and will be able to use snippets from it.

Sorry for be so wordy it is an infliction of mine.

Billy
https://www.midnightadwar.com (currently under construction) Since April 1, 2010-10/19/2010