search

MakG10 / jquery-meme-generator

A jQuery plugin for interactive creating images with captions (memes) with basic image editing tools.
http://maciej.gierej.pl/en/jquery-meme-generator
59 stars 16 forks source link

[Question] Editable text above the image? #5

Open softnayr opened 7 years ago

softnayr commented 7 years ago

Is there a way to type some text directly into the image?

I am using this project for my image generator but I need the functionality to enter the text directly into the image and not through the textboxes. Is it going to be a major code change if I need to implement this?

Very much like that they did here: http://www.memes.com/generator

MakG10 commented 7 years ago

It doesn't look too difficult to implement, altough it seems kinda tricky to make it feel like a real text box (blinking indicator changing position with arrows, text selection). I will consider it in the next release, it's a nice idea. If you were to implement it yourself, then I would bind the click events on the position helpers here: https://github.com/MakG10/jquery-meme-generator/blob/5553d20d862acd80da2647c8b20ff81442b0df47/src/js/jquery.memegenerator.js#L392 and after the click, listen for the key presses and change the appropriate textbox (you can identify them by data-layer, it is set for both position helpers and textboxes). You may have to trigger a "change" event after modifing the input.

There is also a second approach which actually makes more sense to me now. After selection the position helper on image it could just focus to the appropriate text input, then there is no need to listen for key presses, because you would be changing the text input directly. Without visual aspects (blinking cursor etc.) it's pretty much 3 lines of code.

softnayr commented 7 years ago

Thanks man. I will try the second approach you mentioned. I will let you know what I can come up to. I will also look forward for that "real" textbox above the image.

MakG10 commented 7 years ago

I actually tried that second approach yesterday and it has some down sides. When the field that gets focused after clicking on text is not within the viewport, the page gets scrolled to that field, which is annoying and it may happen that you wouldn't even see the part of the image you're editing.

I've left that part of code in the last commit, it's commented out: https://github.com/MakG10/jquery-meme-generator/blob/9758c9022e645ac81232d0d9a3788b163a3c729a/src/js/jquery.memegenerator.js#L480-L487

softnayr commented 7 years ago

That's interesting. That would give me something to play around with. Thanks man!

I am also trying to incorporate text background colors like you did in text foreground and outline color pickers. I am interested on your thought about this. Or should I open another discussion for this? Man, this could grow into a rich-featured meme generator considering you started it very cool!

MakG10 commented 7 years ago

That's another interesting idea worth implementing. And yeah, it's for another discussion. One of the challenges with implementing new features would be to keep the UI relatively simple, because it could become non user friendly quite fast.

softnayr commented 7 years ago

Yeah keeping the entire thing still simple to use while adding more and more features is really challenging.

I also added a slider effect for images below the text so users could just hit the back and previous buttons while looking for the picture they want for the meme.