Welcome to the support center for

Fancy Product Designer & Multistep Product Configurator


Manage size between stage and printing size

Hi, this is a matter of pre-sale ;
Something I do not understand what is the management of the size of the « stage » relative to the actual size of the product to customize.
I take the example of an iPhone 4 case to illustrate my point :
The real size in mm is 62 mm x 120 mm to 300 dpi . Making it in pixels : 738 x 1420 px.
So I understood that we can scale the " stage " with these dimensions. But the page will be high on the screen ;
Now imagine that I want to propose customizing posters or photographs printing. A typical size for a poster , for example : 500 mm x 700 mm x 300 dpi. Making it with photoshop pixels : 8268 x 11811 pixels !!! The page of the site is going to be huge !!!

Is is expected to have a dissociation between the appearance of the product on the screen and its true size for printing?

Thank you and sorry for my english.

8 people like this idea

Best implementation could be:
- the design library should hold both HighRes and LowRes images. LowRes should be used in the online design process
Printes has to receive files created out of the HighRes. (placement, colors) If its too extensive for a website, just I would need a) scaling info, b) placement info in relation of any corner im the layout

Best, Zoltan


Hello, Thank you for your response. I understand what you're telling me if I propose a library of my own designs. But what I want to do is offer my clients the ability to load themselves their pictures and place them . it must be able to print them they are in 300 dpi . That's why I have a problem between the size of the canvas in px and file size after conversion pixels / dpi. There is a solution ? Thank you


I agree with kameleon premiere's question.
It is not really clear how this is handled in FPD.

If I want to propose the Fancy Product Designer to my customerse on a webpage, the designer itself should not be larger than somewhat around 1.200 x 900 pixels or so,
but the customers should still be able to upload a High Resolution photograph (such as a jpg with 5.000 x 3.000 pixels), to customise a mousepad, for example.

Does it work, with FPD, that if the photo is scaled larger than the mousepad (the one from the demo) that it is also automatically cropped with the original resolution kept intact ?


Hello, can you have an answer please ? Another thing that is not going to print ; I tested customizing posters . When you have finished setting his image, and we receive the final file , it also receives the background image . It's not good. In printing requires that the image is always slightly larger than the finished size , for not having a white border around . Should receive each layer separately. You intended ? Thank you. The different stages of my test below 
Step 1 : open the customizer

Step 2 : upload my design :

Step 3 : resiize and place my design :

Step 5 : download PDF result for verifications :

Step 6 : Result :

Maybe ok for a poster with white border but not for a full-frame picture or object.

I agree that this is something that needs more attention. We can't be expected to match the stage size with the final print resolution size, as you describe in the documentation. The sizes become too large on stage for print resolution graphics and images. There are some controls that allow scaling up designs in the backend, but it would be great if that process could be automated or set in the backend. I am using the plugin to allow the creation of downloadable graphics, but I need the graphics to be print resolution when they are downloaded. It would be nice to be able to set an output size per product in the backend so when the file is downloaded it is output at the correct resolution.

I also posted a question like this....so how do we set this up?

The pic on the screen should merely be a scaled version of the high res end image that we need for print

Please help!!

Yes! The stage size should be the scaled down version of the print ready dimension. 

And. these 2 features are a must:

  1. The stage size should not be the actual size.
  2. The print ready file should only contain the customer's design. In the example above by kameleon Premier, the poster background should not be embedded in the print ready file.
It is nice to show the customer a preview of the final product with a tshirt, mug, or other canvas background behind the design, but that should only be in the preview image, never in the final print ready image.

So how does this work then?

How do you get the file uploaded by the customer in print ready size and also appear on the preview in right scale?

I am aware of this problem. The problem is that you can not create a high resolution image from a low resolution image with PHP. Thats why you have to create a big stage in order to export a high resolution image. I am always searching for a solution monthly, but could not find anything.

Hi Rafael. Thanks for your answer :-) Not simple yes. I'm thinking about it too. Maybe ideas soon oO


 Hello, I'm not a programmer, but in my mind the steps should be:

1 - I download my high-definition file on the server .
2 - the system checks the file extension , size and weight.
3 - when the file arrived ( MyFile A.HD - 1.jpeg ) a low resolution version of the dimensions of the FancyProductDesigner settings and 72 dpi ( MyFile A.LowDef.jpeg .
4 - the file appears in the stage.
5 - the customer alters the settings (size, position X-Y-Z)
6 - valid client ( done! )
7 - the system retrieves ( new dimensions + X-Y-Z position) ---> ( conversion 72dpi x 4.16= 300 dpi)
8 - the system returns new data to the original file ( MyFile A.HD -1.jpg ) and created a new file MyFile A.HD - 1.2.jpeg .
9 - If the customer does not complete this order and wants to re-edit his custom object ?

Hi Rafael,

Is it possible to use a PPI scale conversion (pixel ratio)? Current solutions involve the use of an HTML5 canvas, and an internal PPI converter. The idea is similar to what kameleon Premier mentioned above.

Stackoverflow: http://stackoverflow.com/questions/17025603/what-is-the-best-practice-to-export-canvas-with-high-quality-images

Similar discussion with fabricjs: https://groups.google.com/forum/#!searchin/fabricjs/print/fabricjs/u8d_rwuNffI/9vXjx19t9uwJ

Hey guys. I just got the plugin and am setting it up now for use selling t-shirts and buttons.

I also faced the output size vs. stage size issue. My solution was to set the stage of the product to the resolution I need for output then resize the stage via css in the theme. This is working quite nicely with the product image replacement option for woo prod image. 

So, in a nutshell for FPD shirt products:

  1. Stage is set to 2100 x 2400 (150 dpi for 14"x16" print area) plus whatever "padding" pixels you need for your garment layer padding (sleeves, neck, etc.)
  2. FPD Stage is set to replace woo image and load inline in the page with no lightbox
  3. My theme's CSS makes sure the design stage fits in the space and scales the FPD window (even though actual images are much higher res, browser handles scaling). If your theme doesn't support image resizing I suppose you could easily add a little CSS to limit the size to do this.

I am having some small issues however with the CSS on android mobiles currently where the FPD stage is not resizing properly but only just worked on this last night and besides being a little bit buggy on mobiles I suspect some human error there on my part ;) 

As I said I'm just starting with this plugin but I'm loving it. I'm fearing the communication issues FPD and woo for bulk product pricing but... that's a comment for another thread :P 

Hope that helps or is sort of a solution for you guys as well. 

For the record I would also welcome more granular output tools to fine tune what you can automate. If there could be a filter hook at the output point for things like "remove black up to 15% from image" or even a full on filter routine to automate seps. Wow! For now proper resolution is a must as well as being able to shut off the garment layer for automated output. 


ok this solution should definately be available as a standard. This is a really important issue. Roger > can you help with some css coding hint? I do not have a clue how to make the larger stage look smaller in our theme.

thank you very much,


Login or Signup to post a comment