Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi all,
Vanilla are planning an update to the site on April 24th (next Wednesday). It is a major PHP8 update which is expected to boost performance across the site. The site will be down from 7pm and it is expected to take about an hour to complete. We appreciate your patience during the update.
Thanks all.

[noob too !] user image editing on website

Options
  • 23-01-2014 11:26am
    #1
    romarr
    Registered Users Posts: 227 ✭✭


    hi
    I'm wondering how to implement a simple enough image editing function on a website ? something along the lines of this http://www.sleepymooncards.ie/cards/birthdays/all/girl_birthday_5/personalise

    Ideally I'd like to implement this in a wordpress site. All the image editors plugins that i've seen have too many functions for what I want the user to be able to do.

    The ones I like seem to be java script based (?) which I know nothing about.

    What would be the best way to implement this ?

    Thanks


Comments

  • Options
    #2
    stevenmu
    Moderators, Society & Culture Moderators Posts: 9,689 Mod ✭✭✭✭stevenmu


    Tbh, good image editing is a relatively difficult coding problem. If you don't know where to begin now, you would be looking at many months of intensive learning to get to the point where you could start.

    So the best option is to use existing image editing plugins. I'm not familiar with any, but I'd guess that at least a few of them will be configurable, so you can choose what functions are available. I'd suggest picking a few that seem close to what you want, and then do some research into them specifically to see how configurable they are.


  • Options
    #3
    CreepingDeath
    Closed Accounts Posts: 8,016 ✭✭✭CreepingDeath


    HTML 5 has a canvas element.

    HTML5Rocks Canvas Link

    And FabricJS has a lot of cool demos.


  • Options
    #4
    Procasinator
    Registered Users Posts: 1,311 ✭✭✭Procasinator


    Looking at the example link you gave, there isn't any raw image editing happening in the browser. It's just using standard img and text, positioned and scaled correctly.

    The photo and editable text are simply standard content in the DOM and styled with CSS. The bird and one picture is simply rendered on top of the photo, with the O in one being transparent.

    If you resize the image, it simply increases the width/height. Move it a bit, it changes left/top.

    Increase the font size, and it simply increases the font-size in the CSS, and recalculates left on the parent div to keep it centred.


  • Options
    #5
    romarr
    Registered Users Posts: 227 ✭✭romarr


    thanks for the responses

    procasinator - you're correct its not really raw image editing that I want to achieve. Just to be able to upload an image, place it in a template and edit some text

    DOM = document object model ? is that right (quick google), I'll have a read up on that and see if I can make sense of it. Would I still be looking at Java script (?) in order to implement this on a site ?

    quickly getting out of my depth here ! I've done a few WP sites, a few html sites ages ago, with a poor working knowledge of CSS if you have any further suggestions on how i might go about this I'd be v greatful

    Thanks again


Advertisement