Fancy Product Designer Export Issues

July 7, 2015

We recently purchased the Fancy Product Designer plugin for a WordPress client who prints photos onto chocolate bars. Yum! Unfortunately the plugin is not as intuitive as a developer or user would want it to be. We need help!

For example, we have a Fancy Product of “Custom Photo Bar” where a user should be able to upload a photo via the filesystem, Facebook or Instagram. The final product needs to be an image that’s 3.5 inches x 3.5 inches, with a white border around the image the customer uploads, which translates to 1050 pixels x 1050 pixels, as in Figure A here:

Screen Shot 2015-07-07 at 12.50.47 PM

To achieve this effect, we first set the size of the Product Designer Stage to 1050 pixels x 1050 pixels.

Screen Shot 2015-07-07 at 12.56.29 PM

Next, we created the square frame view for our “Custom Photo Bar” Fancy Product, which is basically a thin, white border around the edge of the image.

Screen Shot 2015-07-07 at 12.57.46 PM

Then we set this image as our initial element with “stay on top” checked, so when the customer uploads their image, the image is masked by the frame so that the frame prints in the exported image, as in Figure A above.

The problems occurred when we created an image that was 1050 pixels x 1050 pixels and tried to upload it. Since the product stage is set to 1050 pixels x 1050 pixels, we assumed that uploading an image of the same size would produce something like this:

Screen Shot 2015-07-07 at 1.03.14 PM

Instead, when we upload our 1050×1050 image to the 1050×1050 Product Stage, we get this:

Screen Shot 2015-07-07 at 1.05.11 PM

Apparently, something, somewhere, is resizing the image the customer uploads. Note that the scale for our view is set to 1.0 under the “General” tab of the Product Builder:

Screen Shot 2015-07-07 at 1.08.11 PM

Yet, when we click on the image in the Export Viewer, we see that the scaling has been adjusted to .62, as shown in Figure B below:

Screen Shot 2015-07-07 at 1.13.53 PM

The only thing in the Settings that might explain this is the option to resize when width is larger than height (or vice-versa):

Screen Shot 2015-07-07 at 1.06.33 PM

However, we uploaded a square image of 1050×1050, so these settings should not apply, because they are conditional: they are to apply only when width is larger than height, or vice-versa. So perhaps these settings are applying even when the uploaded image is square? To test that assumption, we changed the “resize to” settings to 1050 pixels, and on the next upload things looked as expected in the Product Stage:

Screen Shot 2015-07-07 at 1.03.14 PM

Happy with this, we added the product to the cart, checked out and logged onto the backend to retrieve the exported image. The Order Viewer gives us the following preview:

Screen Shot 2015-07-07 at 1.28.28 PM

So far, so good, but things get confusing when we go to export the image. At this point, you would expect the exported image to be a PDF that’s 1050 pixels wide by 1050 pixels tall, looking exactly like what’s shown in the Order Viewer preview, since both the size of the Product Stage and the uploaded image are 1050×1050. However, looking below, we can see the PDF width and PDF height are both set to 278mm:

Screen Shot 2015-07-07 at 1.13.53 PM

We don’t know where that figure comes from, it appears to be pre-loaded into the export field. 278mm x 278mm translates to approximately 11 inches by 11 inches, and when you export the PDF it adds margins along the left and bottom sides. The image is also resized to 3041 pixels by 3163 pixels:

Screen Shot 2015-07-07 at 1.37.25 PM

Screen Shot 2015-07-07 at 1.35.55 PM

None of this makes sense, we’ve read through all the relevant documentation and we’re exhausted all known settings. Can anybody out there point us in the right direction?

However, when you open it in Photoshop, the exported PDF comes out looking like this:

Replacing Spaces In File Names On OSX

March 7, 2013

Problem: we need to change the naming conventions for an entire directory of files.
I recently ran into a situation where I needed to remove spaces from the names of about 200 files and replace them with hyphens. There are several ways to accomplish this, but if you don’t want to brush up on your PERL or bother with Automator, you can easily use OSX Terminal to run a sed command.

Read More →

Sample Git Workflow

December 22, 2012

We’ve been using the following Git workflow in a small app development team I’m working on. It works pretty good so far. I’m still new to Git and it’s helped me.

Read More →

Test-Driving WordPress Twenty Twelve

December 4, 2012

I wanted to take a peek at the much-hyped WordPress Twenty Twelve theme so I used it to redesign my portfolio. I figured it would be a good theme to explore, since the chances of a client requesting it seem fairly high. Overall, I think it lives up to most of the hype. I especially recommend it to non-coders because you can do so much through the GUI. For example, you want a custom navigation menu, or three? No problem, you can do it from the “menus” subpanel without writing a line of code!

Read More →

Git Rejected Error On New Repo

November 23, 2012

Problem: Git returns, ! [rejected] master -> master on a brand new repo.
I’ve been using Git since May of this year. At first I didn’t have any problems performing the basic functions. A friend and I were developing a mobile app with a Rails backend and we had a decent workflow going. Even as a total newbie I was able to add changes to the staging area, commit, push and pull to get the latest revisions. Everything was great, until I got busy with other projects and stopped working on our app for about two months.

Read More →