Hi Danno! Would like your expertise!

Hi Deb,

The main picture is operating at a fixed 3:2 aspect ratio of 694H x 461W. However, your pictures appear to be cropped to a very thin / narrow aspect ratio of nearly 2:1 with an example of 647H x 347W in this photo:

http://img.auctiva.com/imgdata...bimg/273935283_o.jpg

That's causing the picture to stretch horizontally to fit the frame (like stretching a ballon).

The picture is also cropped shorter at 647px than the viewer at 694px which can cause image pixelation / fuzzyness.

In simple terms....it's a problem with the way the pictures are cropped vs. the design of the template main image and thumbs.

Danno

I guess I just don't know how to crop the pics and maintain the ratio, so for the next shoot I did no cropping at all, and, the pics looked good.

In the meantime, I found another layout of the thumbnails, enlarged pic and description area that I would like to swap out in my template.

I have reworked the code as much as I know how to do, and I am hoping you will have some time to help me out on tweaking it! Pretty please!

I'd like to move the store, contact, newletter blog line over so that it is right justified with the big pic.

The template that I liked has the top of the thumbnails and the big picture aligned. They look aligned in the practicewriter preview, but when I actually do a preview from the lister page, the big picture is lower. Can't figure it out!

And, I finally got my thumbnail code to show pics, but the mouseover to enlarge is not working in preview.

Here's the link:

http://PracticeWriter.com/?610E0

Hi Deb,

I'll take a guess on the crop problem.... The new camera (a Digital SLR variety) is using a default aspect ratio of 2:3. The plain digital cams default with 3:4. I think my daughter's Pro Nikkon digital SLR does that too. You got lucky with the new cam. Take the pixel width and divide it by the pixel height of one of your raw photos from the cam. If the result is about 0.67, that's 2:3.

I took a quick look at the code and noticed that the script at the bottom of the text has a syntax error for the images, e.g. pic[1]="IMAGE1_URL"; should be pic[1]="[IMAGE1_URL]"; (missing the brackets which all Auctiva tags require).

The main image near the top of the code is showing a default link to an Auctiva hosted picture. That one probably needs to be replaced with the [IMAGE1_URL] tag, so your default image on load is the 1st picture.

Got a favor to ask. The code for the old template apparently is using links to images in the ClixTrix library at photobucket. Since you're updating the template, could you please move the links to images at Auctiva or your own photobucket account. I believe it's the three images I created for you, slogan, tag line, and the cropped banner. I'll keep them operational at the ClixTrix account until I see you've got them safely moved (or give me an OK). Photobucket is notifying me of high account usage. Hopefully, they won't cutoff usage (but that can happen). Don't panic, I don't think combined usage is yet high enough for that to occur. That account was setup for testing only, so it doesn't have the benefit of a paid usage limit.

Danno

Oh....and SophieBox Wildcat Edition is now prepared for beta-1 and is in the eBay Developer's Sandbox undergoing shakedown tests.

Hi Danno!

Yes, you can delete those photobucket files...many thanks, and I didn't realize you were hosting them!

Yes, my new camera is a 2:3 ratio...my problem is I don't know how to crop a picture to keep that ratio! (the simplest things...!)

That upper auctiva pic is for the 658 banner (pink one) at the top of the page

I've been googling and fooling with that code since 3p.m. and still haven't figured out how to make the thumbnails enlarge into that big box!

My best guess is that when I found a listing that I loved the thumbnail layout, the enlarged pic, and the description/measurement box, that I didn't copy something in the header code that makes the whole thing work. I only copied from where the description tag onwards...

The reason I love the new layout is because as a viewer, one can scroll a little, frame that section of the listing on their monitor, and see without having to scroll up and down from thumnails to view the whole big picture.

We are rained out on this side of the state; if you are as well, maybe you will have time to help this evening!

Happy 4th!

Hi Deb,

All scripts to do the photo replaces operate almost identically, i.e. mouseover of the thumb fires a script that substitutes the replacement image associated with the thumb. The visual-arrangement of thumbs and main image is really not connected to the function of the replacement or the code.

Practicewriter has the unfortunate problem of corrupting Javascript by translating the ampersand symbol from & to &-amp; for the symbol. You can see that where the logic tests for "and" are &&, but are translated by practicewriter to &-amp;&-amp; (dash added to display in Forum). Although the script can work on practicewriter (and my mouseover and check suggests it does), a copy of the script gets the corrupted version. I do see some cases of that problem on the page, but it appears there is more script here than the simple mouseover replace. I'll have to study it for awhile to see if I'm missing something. It's a little like taking a page from a novel and trying to figure out the plot of the book.

Since photobucket gives activity reports and did show heavy use through June (over 58,000 hits), I'll check to see if there is any current use of the photos before I delete them.

Danno

Update.....

This script appears to be the only code that is truely involved with the image replace.

This section loads the 8 images to the browser cache and the swap function is the code that's run when the mouseover is fired for each thumb.

<SCRIPT>
var pic=new Array();
pic[1]="[IMAGE1_URL]";
pic[2]="[IMAGE2_URL]";
pic[3]="[IMAGE3_URL]";
pic[4]="[IMAGE4_URL]";
pic[5]="[IMAGE5_URL]";
pic[6]="[IMAGE6_URL]";
pic[7]="[IMAGE7_URL]";
pic[8]="[IMAGE8_URL]";
function swap(num){document.getElementById('bigPic').src=pic[num] }
</SCRIPT>

This snippet of code that's on the the HTML IMG tag for each thumb is the call for that function to do the replace.

onmouseover="swap(1);" <--- this one calls swap to replace main image with image #1.

Hope that simple explanation helps.

I see other code, but I'm unsure of its intended use....appears to not really have any in the context of the document.

From what I've been able to see via googling, all of the code for a mouseover function starts with some code in the header...is that correct? Then the code that you have highlighted in your last post goes in the body?

quote:

function swap(num){document.getElementById('bigPic').src=pic[num] }
</SCRIPT>

In the above code, the getElementById('bigPic'), does what? Do I have to have something called bigPic?

Hi,

Well, technically, ebay doesn't allow use of <head> tag, and they/Auctiva will/should delete the head code and script when it's placed there.

Just place the script after the 1st HTML tag in your template for protection from deletion. If you look at the old template, use that as an example.

The "getElementById" is essentially looking up the ID of the tag where your main image is in the document. If you look in the code at the IMG tag for the main image, it has id="bigPic". That's how that function knows which image is the target for that replacement. src="..." is the URL of the image(s). So, the replace is literally the string for the URL on the statement. You previously defined the array of images as pic[1], pic[2], etc. and stored the URL string unique to each, so the call from mouseover just passes the function the number (num variable) of the image.

Putting it all together....all the images links are preloaded and their source URLs are added to array pic (1 - 8). With mouseover of each thumb, you're calling function swap with a specific thumb/image number in the array asking the function to locate the main image and replace it's URL source/src string with the new image's.

Hope that makes some sense.

Danno

It makes sense, I just don't know why it is not working in Auctiva preview...will keep trying!

Hi Deb,

Try this code.

http://practicewriter.com/?61202

Danno

HOW IN THE H...L???

I am going to print your code out and my code out and compare line by line to see what I have been doing wrong!!

I don't know how I earned a whiz after my name on this forum!!!

I will say that your code looks much cleaner, and YES, IT WORKS!!!!!!!!!

Too bad there isn't an emoticon that blows you a kiss!!

Hi,

Yes, I tidied it up a little and rebalanced the design. Hopefully, no changes that are not in keeping with your final needs.

You're welcome and have a good one.

Danno

Update....

Deb, I took some time this morning and ran some tests of the design and additional code checks. I found some problems. The main picture was anchored to bottom. This would have caused it to float down the page if the description ran long. I changed it to "top". The [DESCRIPTION] was set inside a paragraph element. However, you typically use paragraphing (more than one) in your description text. That would create paragraphs nested inside a paragraph, which is an illegal construct (and possibly one of the reasons many report description code/text being dropped by the editor). I changed that to a division. I also added some padding to the links bar, so the text wouldn't overrun the bottom (like the "g" on Blog). A few other minor code touch-ups and one missing closing tag on an element were resolved. I also examined one of your active listings to see if the description elements would fit in the area. Width is OK and height really depends on your listing (and is how I caught the picture anchor problem).

I saved the result back to my prior practicewriter link. Sorry I didn't have time yesterday to catch these problems.

Good evening! I will take time later on to copy the new code you tweaked this a.m. into the lister form, and see how it looks.

When I copied it yesterday, it looked fine in preview, so I assume that the code problems you were able to find this morning would have showed up once it was published...I will try and launch an auction this evening using the new template, if my time goes well!

Update:

Here is the almost finished new template, which you will recognize as part of "our" original design, and the new pic/description section.

I am tweaking the color of the table boxes to a lighter gray than what we originally had. It looks like you used the table class attribute to define the background color for the table sections like Store Information, shipping, payment, etc. I googled to learn what table classes are and changed the code from abgdkgray to abgltgray, using pure intuition, not knowledge! That changed the table bg on the Store Policies and Important Information section, but I cannot find the code to change the background and font color on Payment, Return Policy, About Me, and Contact Us...still looking, but wanted you to see the update.

http://PracticeWriter.com/?612FD

Hi Deb,

I looked at the link and active listing and did some code fixes to assist. I reestablished the Style Sheet and pulled font families and colors back to the sheet. I added an outer table at 100% width for flexibility to operating a color mat when desired and used #eee for effect. I added a 1 pixel #888888 border to the inner table. I added a PowerSeller logo from the ClixTrix library at photobucket (please save and upload to yours if you like it and replace the link). I also added back the mouserover greens to all your links. However, the blog link doesn't seem to be operable (no link).

You should be able to now use the Style Sheet to change the font color (currently #333333) on the description and seller details sections.

By moving to the thinner design, you can now easily add the Store search and categories boxes at the left using your eBay Store customization.

See my prior link for changes.

Danno

Edit: If you're having problems with 2:3 aspect ratio cropping, I'd recommend use of Picasa. Picasa has a 4x6 photo crop feature (4x6 is 2:3 aspect ratio).

Hi, it looks really good...I just took a quick look before dinner.

thanks for fixing the table borders, you had them there before and with my fiddling I wiped them out. There also was a gray box around the store policies and important information header that I lost. The font for that header and everything under it changed as well...it was a sans serif font. I'll take a look after dinner.

Hi Deb,

Just got back to checking and found "another" minor problem in the Shipping section that I fixed. There was a paragraph code around the shipping tag and the right International side needed a little TLC with margins to get balance.

I remove that background on the policies header, only because it seem verbose with the sectional headers. It's very easy to add a background color to that section, but it just looked better (to me ) with it white!

Sorry....I'm very distracted with sandbox tesing of Wildcat, so only can give spare time.

Let me know if you see any visual problems that I can give tips or help adjust.

Danno

Deb,

I've created a new version that adds support for buyers that don't browse the eBay site with scripting enable on the browser. I added a noscript code section that will display pictures 2 - 8 when the mouseover can't work with scripting disabled. I've given you the option of using either a scrollbar or a vertical column of pics by selection of auto or visible in the Style Sheet.

I also added a new id for the policy section and pulled that into the style sheet, so you can change the text, background color, border, etc. for that banner. Note, I added a simple 2px border in the same color as the lower headers, as a starter.

It's updated on the practicewriter. To see the noscript version of the page, disable scripting in Firefox. It's currently set to auto, so a vertical scrollbar appears with all the pics.

Many folks are getting disgusted with eBay's scripting problems and only visit the site with scripting disabled. Hopefully, this gives you more viable buyers (and those that see you doing this will hopefully appreciate the gesture to their preference).

I hope this all makes sense and I'm not adding further confusion.

BTW...I would strongly recommend you install Firefox and/or Safari browsers to see how your listings look in other than IE. That's very important, as some changes can have bad effects in those browsers.

Danno

Hi Hi!
Just got back to looking this evening...dog lays on the floor behind my chair, and went off when he heard a car drive up to the house...jangled my nerves so bad, I was shaking...middle of the night now, so hopefully some peace and quiet while I read what you did!

edit: which browser do you use? I had a look at the firefox site--does it really make browsing faster than when using IE?

Hi Deb,

I use IE8 Firefox and Safari (all 3). I use all 3 for both general net and work/testing. Firefox and Safari are both relatively easy to install and they both have semi-automatic update capability. Safari has some very nice features for developers that I specifically like. Firefox tends to launch a little faster and does tend to run scripts a little more stable. Safari also does somewhat better and is the smoothest in rendering many of the SophieBox features like the super-zoom, magna-zoom and slideshow.

There are those days when a site (like Auctiva) does an update that gives problems in one browser, but works OK in another. It's good for that too.

It looks like eBay has finally switched to buyers getting the new listing-page design.

Danno

Hi Danno,

I am new to auctiva. I made a custom template which looks perfect when I am previewing it but when I post it to Ebay, it doesn't show any of my template. I really could use your help. I have been trying to figure this out for over 15 hours. Any help would be much appreciated.

Kind Regards,

Jim

Hi Jim,

Do you mean that when you are on the template designer page, save and preview you can see it?

When you are in the listing designer page, (where you fill in your description and add the pics), did you choose custom template, then select the one you designed?

BTW, Danno is usually here very early in the a.m., or after dinner.

I always look for the easiest fix first, like when someone asks, "Is it plugged in?"

Deborah

I am going to launch some auctions this p.m. using the newest template, will check it out in Firefox.

Now, on your new SophieBox, will super zoom work right from the listing page or will it open a new page? Shoppers dislike Auctiva's (or anyone else's, for that matter CTE)

What is the wildcat?

Is the model walking the runway still a feature of Sophiebox? I have seen a few shopping sites using that technology to good effect.

Deb

Hey Danno,
I just thought of something! (yes, be afraid!!)

When I am in auctiva, on the lister page, creating a listing, the page always loads funky for me...little things, comes up slowly...click on one thing, like skip to shipping section, and the page jumps to a different area...click save, jumps back up to the pic area...really annoying crap!

I wonder if it is because I am using IE? I've never used any other browser. But I do recall that when I mentioned it my former asst, who uses firefox, she said she didn't have those issues!

Is this what you mean by Firefox being more script loading friendly???

Good Morning Deb,

I checked your listings this morning and found 330344301979 with the new template. I see the 1st image is a little distorted and checked its saved dimensions. It's saved at 672H x 334W (2:1 spec), so I assume that image was cropped at that odd setting (similar to discussion that started this thread).

Visual problems, I only see a slight drift in the center area that has it not aligned with the right side of the upper banner. I'll have to check code and the model's stats image to see if there is something pushing it wide. eBay has also changed (again) what they are using in the New Design. They've gone back to an undimensioned table and added a division in the table cell to encapsulate seller's code. That's causing the background gray surrounding the template to collapse to the minimum I set in the code of 10 pixels. That can be easily widened (can add something like 50+ pixels to left and right) or the background removed entirely. At this point, your needs with Store design and possible inclusion of left rail Store Categories boxes etc. are next considerations.

The code appears to work fine; just needs the touch-ups and any design fixes for next steps in your thinking.

SophieBox is both a design concept (the traditional web design "presentation box") and an a set of ideas to 1) improve on current display methods with ON PAGE features (like zoom) and functions, 2) improve seller productivity with labor-saving technology, and 3) cost-saving concepts and methods. eBay has made the site far less profitable with the constant changes, higher fees, and reduced traffic (alienation of buyers that includes dropped-out community of sellers). I decided a year ago that the changes were going to be more than "disruptive" and possibily the beginning of the end of the eBay era. I know You are selling at more than eBay. Many are finding there is a (better) life and market by using eBay as a last consideration instead of first choice for selling. BTW...I'm a "Community" supporter, not a basher or anti-eBay. Bad management practices and decisions come and GO in any company. It's the seller community that made eBay to bring the buyers, not the other way around. That's why I decided to stop selling and switch to helping the Community. I saw no future in the collectibles market on eBay, and my forcast of spin-down in that area appears to have been on target and will continue (IMO).

I have at least three designs I'm currently working to beta 1) Wildcat Edition for general-purpose use, 2) Catwalk Edition for the "portrait" market (like the clothing sellers that I've adopted), and 3) Catalog Edition for those with massive collections/lots with need for hundreds/thousands of pictures per listing.

Wildcat just completed final checkout in the Sandbox and will hopefully move to active listing in the next few weeks with a beta-1 release. I already have some planned improvements and a possible 2nd beta prior to any commercial release. eBay's and Auctiva's changes are driving my concept models and changes.

Catwalk (not the simple test code you previously saw) is planned for video add-ins (option).

If I can get viable commercial products, I will open an Auctiva Store for sales.

I'm also working on some simple freebe codesets to give some traction and insentives. For instance, here's a codeset that does the mouseover trick with NO SCRIPTING and protects the pictures with a method I'm calling "Prowler Guard". Go ahead, try to save the pics or thumbs using the right-mouse click and save in this test....I double-cat dare you...hehe

http://PracticeWriter.com/?619E4

Danno

Update: I checked the new listing with Firefox and Safari (just had time earlier for an IE view). With Firefox 3.5, eBay appears to be operating with NO IFRAME and the gray background is very nice across the page (looks good). With Safari 4.02 they not only are using the IFRAME page with the undimensioned table, BUT the IFRAME appears to be automatically creating a 2nd vertical scrollbar on all listings (double-ug!). UNBELIEVABLE that this is somehow an improvement for buyers. If I were a Safari (Mac, IPhone, IPod Touch) user, I wouldn't spend 10 minutes with this mess. That's "today's" report and is different than I saw just a few days ago. Apparently, there is still no stability in eBaynia.

Oh....and that PowerSeller icon needs to be saved and moved to your account for use, instead of the ClixTrix library at Photobucket.

Update2: Wow! I guess eBay is really having problems, as I'm now back to seeing the old classic page design.

Hi Jim,

Do you have a listing number or link for the problem listing?

Danno

Hi Danno,

I am going to download Firefox and have a look!

If the slight stretch is caused by the model stats box, I can shrink it slightly, will do so in the next new listing...I'll do a few more this evening.

That code is cool, NO, I can't save the pics!

Will take care of the powerseller icon this eve...saved to my puter, but haven't uploaded and replaced in the Auctiva template yet. sorry.

Definitely interested in the Catwalk edition, when it becomes available! Usage will necessitate a whole new photography learning curve on my part!

Link to the code I am using for the description box:

http://PracticeWriter.com/?61A95

I have a few tweaks, mostly removing some phantom spaces that keep showing up in the measurement boxes, that practicewriter copying glitch you told me about in this thread!

Hi Deb,

Well, it isn't the model pic as much as it was some extra padding and extra code (old template) that was giving you trouble.

I reworked that whole code element you use in the description editor box to a table and (hopefully) make it work better. The description text is now part of the larger table and should now be simple fill-in too (like the measurements table).

Oh, and the background on the model box was #c0c0c0 gray, so I adjusted the tables gray to match. Did you want a little white-space between the measurements table and the model pic?

Here's the link.

http://PracticeWriter.com/?61AFC

Danno

Hi Danno,

I am embarassed to say I spent the rest of last evening TRYING to fix that measurement/description/model box code, and every time I copied it to the lister page, it was corrupted - missing borders, etc. My original reason for wanting to work on it was some phantom spaces in each of the entry boxes for the measurements. While text is centered, there was still a space in there. And, the font size for the description kept defaulting to smaller (which was too big), no matter how I searched to change the code to xx-small! I will copy your code and see what happens when I paste it into the lister page.

Edit: yes, I think a tad of white space between the measurements table and the model pic.

I don't know what happened to Jim? Maybe my simple solution worked,

deb

New:

Thinking again...

I often upload links to my items onto shopping sites such as Kaboodle, and Stylehive. They each have an applet (?) that is downloaded onto one's toolbar. I open the listing I want to upload, then click on the 'add to Kaboodle' that is on my toolbar. This uploads the pic as well.

Will the new code that protects the images in an auction prevent the image from being uploaded in this manner?

Hi,

Added 10 pixels of height to the cell the pic is in and dropped the pic to bottom of the cell.

Phantom spaces.....hmmmm.....the Auctiva editor might be adding a blank space to unused table cells. That would mess up the centering. Have to let me know if this version works the same.

Yeah....your guess on Jim's problem was what I would have suggested for a newbie. See, you do get "Wiz" rating for that one.

Danno

Oh...and there is an empty cell for where the header use to be for Additional Info. That shows as an extra bold line through the center of the table (two borders). Did you want that header GONE?

quote:

Originally posted by Sapienette:
Will the new code that protects the images in an auction prevent the image from being uploaded in this manner?

Prowler Guard shields the pictures from the right mouse-click properties and save, but it doesn't remove the link from the code.

Danno

Danno,

Two other shopping technologies that seem to be gaining ground over online shopping...

shop by phone

The other one, I can't think of the name right now, starts with a Q, and is used by the Ralph Lauren website.

Edit:

QR . I am going to generate one for my ebay store and add it as a pic in all of the listings!

Deb,

That link was to an App for the IPhone/IPod Touch. IPhone and IPod Touch (got the IPod Touch G2 for my youngest daugher for BD in April) use the Safari browser and that App appears to be a web app.

The IPod Touch G2 works in wireless internet hot zones, just like the IPhone.

Danno

Template with QR code

I stuck my new QR code in the only place I could find for it!

What would you think of adding another box just above the one I put it in, with a line like: New! Now easy shopping from your iphone!


The bold line looks ok to me...better than what I came up with!

Yea!! We are online at the same time...a first!

Yes, I know it is an App for the iphone to shop from the phone...I guess shopping online is soooo yesterday!

edit: I should say...shopping by sitting in front of a computer is sooo yesterday!

OK, I just copied/pasted the code for the measurement box and model box into the lister...and it is corrupted. That's what happened to me last night.

The white cells to the right of each body part are gone. There is one big white cell next to color, fiber, label and condition.

http://PracticeWriter.com/?61B1E

on the positive side, the model box is there and so is the white space you just added above it!

Hi,

I did adjustments and added blank spaces for fills in each empty cell. Let's see if the editor will swallow this code. Updates at the same link...

Dan

The description/measurement box is working now, except when I sample filled in a description, the text is not wrapping, but rather, stretching the template!

Morning,

Is it just doing the stretching in the one-page description editor, or is it also doing it in Preview?

It's possible the editor is allowing the stretch on the visual, but isn't actually corrupting the code.

Danno

Oh....and thinking over coffee on best placement of the QR code.

Update:

I just tried the one-page lister with the new table. I started a new listing, switched the editor to HMTL, pasted the code, switched back to Standard, and tried typing in text in the first of the wide lower fields/Colors(s).....it wrapped? Preview was also perfect!

Update2: Coffee Perks

What about placing it in the Store Banner (not the listing banner)? That's got a quick top view so a mobile user can quickly spot and switch. Oh...the code element is 120 x 120, but appears to only really use about 75 x 75 (rest is white space surround), so it's possible it can be cropped to fit location a little better.