Start a new topic
Implemented

Canvas auto adjust button/feature

Hi


Just got premium and loving your product.


It would be awesome for a smart-button that auto-configures width and height to the picture dragged unto the canvas.


Adding a picture and then manually trying to find accurate dimensions can be quite hard.


If such a code could come into consideration, it would be great to make another setting so that the smart button could alternatively size the bleedlines up to the picture. In that way you could choose any background and it could be the sides of an art canvas.


That would be nothing less than fantastic.


BTW: If you are not interested in making this, at least some sort of slider under the width and height would be great. At this time you need to >Adjust size>input > press ok > check > etc.




1 person likes this idea

Actually, I paid a guy some months back to create this code, and he made this responsive layout. Let me know if you want it. I'd be happy to give it to you.

Thanks Nikolaj, wouldn't it be if they set the background photo, they have an option to adjust the ratio of the background to the photo? But then that depends on the kind of design. E.g a landscaped business card and user uploads a square photo and wants it resized, what do you think should happen there?

Hi Isaac


I'm not sure about all who would need this, but to the people, like me, dealing with art canvas stretched canvas with sides, this would be the ultimate editing feature. Allow me to explain thoroughly.


This feature would probably only work with a restriction to one picture on the canvas.


I make art canvas/ canvas on frame and here are the options I'd like to offer: 


And i'd like to offer the sides in depth 2 and 4 cm. like this



The idea is basically this:


Let's say I add a picture to the canvas:



Let's say I want to use this picture. Not I have to figure out the width and height and set it manually.

This would take quite some time.

So here I suggest a feature that instantly recognizes the pictures format and resizes the canvas perfectly to the bleed lines like this:


Now, obviously this isn't necessarily the right crop I need but Creative cloud takes care of that. And of course instead of the image being 20x40 cm I might want it to be 40x80, so the canvas adjuster should be ratio locked. Then I could change width or height until DPI restriction would set in.


Now, to color the sides of the canvas, allI need to do is edit the background.


I would now be able to create a Pitchprint design, with a 2 cm or 4 cm bleed line.


To round off, sometimes the sides of the canvas is the actual picture, but that we already have with regular bleed lines. So depending on whether the customer wants a userdefined sides or a wrap (the picture itself) the Autofit feature should have a toggle for either bleed line or canvas edges.


If you do this - I guarantee you will be filthy rich, and you can give me a month free membership as thanks :-D

Hey, did it an hour ago, but am still not filthy rich :(


Find it here: http://oc.demos.pitchprint.com/index.php?route=product/product&product_id=61


Basically added an optional Photo Canvas mode to the canvas adjuster which removes the preset values as well as force aspect ratio:




Still need to make the module when in Photo Canvas mode to:


  • Hide the background picture tab
  • Remove any other photo if more than two are added, swap with the last one added
  • Adjust the photo once the canvas dimension is manually changed


2 people like this

Hey.


Wow! That is amazing! And it works so well already. I can't thank you enough! Wait  a couple of hours more and talk with your bank - you should be filthy rich. hahaha.


To address your to-do list.


1. Hide the background picture tab:

The background tab is great, and necessary for creating sides in the demo you've shown, but I'm guessing that you're talking about the "picture wrap" mode, right?


2. Remove any other photo if more than two are added, swap with the last one added

I'm guessing you've fixed this already. The replace image works just perfect in the demo.


3. Adjust the photo once the canvas dimension is manually changed

Yeah - can't wait till you've done this. I am so eager to use this function :-)


I would be nice to have an over overview of the dimension so here's another suggestion for canvas dimension interface (just a quick sketch):


you' da' man' Isaac


Hi Isaac


Absolutely brilliant work. Thank you.


I have a few issues, I'd like to share:


1. I find that using the photocanvas mode, does not work with some pictures. I have not managed to figure out exactly what pictures, but all the facebook pictures only adjust to one of the dimensions (eg. either width or height). All the high-resolution pictures seem to work perfect.


2. A picture crop in creative cloud (aviary) is not registered in the editor, meaning that the cropped picture is not adjusted once returned from avairy.


3. Sometimes the costumer would want their picture to stretch to the sides of their canvas instead of choosing an edge side (background tab) like this:


It would be great with an in-editor on/off button for either autoadjusting to the canvas edge like the picture, or to the bleed lines like it is doing now.


That's all. Once again - impressive.


Thanks


1 person likes this

All done, will release soon.

But couldn't replicate issue with facebook images not resizing, perhaps they are way lower than the screen resolution.


2 people like this

Hi Issac


If I could please draw your attention to a few things.


1. The dock is not fully visible in Safari - I works great in chrome.


2. Will the crop be working, so that the canvas auto-adjusts after a cropping of the picture?


3. Will there be an option to place a picture on the canvas in "wrap-mode" so that the picture outlines the edges of the canvas as an alternative to aligning with the bleedline?


Best regards, Nikolaj

Will check the Safari issue.

Yes, the crop works fine, it auto adjust after editing in Creative Cloud editor. Also the icon after the Edit Picture toggles between the wrap mode and bleed

Hi again Isaac.


The dimension text is white - therefore not visible.



Please send me url, will give you css to add to your layout. Unmodified it's dark:



Login or Signup to post a comment