Cotonti / Open Source PHP Content Management FrameworkContent Management Framework

Forums / Cotonti / Extensions / Add text to your uploaded images dynamically (text from the page fields eg)

A plugin which allows you to add text to images

foxhound
#1 2014-01-21 06:38

I was thinking today about a new plugin which might be of interest of more.
I thought it would be very nice to have the ability to add text to an uploaded image. But not like a watermark but a plugin which would allow you to add text dynamically to a specific image which you uploaded with for example Page Avatar. You could tell it to use the page_title field, page_author and for example any page_extra fields.
I am not sure how such process would go but I assume you would first upload the image with Page Avatar to your page, than edit the page and select the fields you want the plugin to add to the image, click submit and in a folder (to which Page Avatar uploaded the image) you can now find that image with a text over it using the fields you specified (or maybe that can be done in a config).
You can than use that image on your website or other people can use the image on theirs (if they want).


I was searching around for info about this and to see if it was something I could maybe do myself but I just lack the php knowledge. I found this site though which might be usefull to anyone who sees any future in this: http://alvarotrigo.com/blog/using-php-gd-library-to-write-text-over-images-using-truetype-fonts/

So, you could for example first have an image like this: eb96_4_4.jpg

And after upload/performing the text edit it looks like this: eb96_4_with_text_4.jpg

 

What are your ideas/thoughts? Maybe it is not even possible, I really would not know so any info or maybe how this could be achieved is very welcome :)

<img src="http://www.armaholic.com/datas/thumbs/green-sea-battalion-uniforms-version-03-preview_4.jpg" alt="green-sea-battalion-uniforms-version-03-" />
Macik
#2 2014-01-21 19:07

Some comments:

  • first of all — why you are need it? May be there are another way to do it.
  • nevertheless this can be done with PHP standard GD library, that already used in CMS (see http://ru2.php.net/manual/en/book.image.php for docs). 
  • the main question: is there any usefull hooks (in PAgeAvatar for example) to catch some image related code to insert own for image manipulation.

 

https://github.com/macik
правильный хостинг — https://goo.gl/fjCa1F
foxhound
#3 2014-01-21 22:01

Thanks for the reply!
I will answer your questions one by one.

1 - We host files for people on my website and we often post our mirrors in other places. It would just look really nice if we can use an image displaying the contents of the file (mods/addons/missions/script/etc) and on the side of the picture add text like the title of the file, the author and the version. People can than add that image to our mirror link. If authors have their own website they could link to that image and use it as a link to their files on our servers. It is purely cosmetic.
Sure, we could manually do it but since we on some days upload dozens of files doing it by hand only increases the workload so an automated system should help with that.

2 - I think I also saw some pages explaining how to do it with GD while I was checking things about this earlier.
However, a full and working php coded file (or files0 would still be needed and it has to work with the Cotonti fields in pages. Thats the knowledge I simply lack. I can not work with PHP.
You could of course say........go learn it.....and you are right. However, at some point a person has to know its own limits. I am a server admin, a website admin, a newsposter, a moderator and I am coding my own new website (HTML/CSS) and I would like to see the sun now and than as well. So, there simply is no time for me to learn. So I either just ask and hope people are interested or go hunt for a paid coder :)
Ohh, and its not just a small website.....this is like a 24 hour/day job that is why I just do not have time for more things to learn and have to seek other ways for things I want ;)

3 - No idea what you mean. Could the default page_title and page_author and page_extra fields not be used? (probably I am saying something really stupid now.....sorry).

<img src="http://www.armaholic.com/datas/thumbs/green-sea-battalion-uniforms-version-03-preview_4.jpg" alt="green-sea-battalion-uniforms-version-03-" />
Macik
#4 2014-01-22 16:50

As for 2nd point: IT industry and its internet part grows very fast and technologies become very complicated. If it looks back in 90-s, you can read 1-2 book and be a webprofefssional. Compare to nowadays with hundreds of books for small aspect of single tech. So, yes, now we needs to hire a specialist.

As for 3rd pont: I speak about ability to extend current (pageavatar) code rathe than write complete plugin from scratch. Using of page filest not a problem at all and not corresponds to hooks system.

https://github.com/macik
правильный хостинг — https://goo.gl/fjCa1F
lukgoh
#5 2014-01-23 20:13

http://uk1.php.net/imagettftext

Perhaps that is of some use?

Macik
#6 2014-01-23 21:27
#39061 lukgoh:

http://uk1.php.net/imagettftext

Perhaps that is of some use?

Exactly! But main difficulty is to find a proper place to insert it.  :)

https://github.com/macik
правильный хостинг — https://goo.gl/fjCa1F
foxhound
#7 2014-01-23 22:09

Looks very usefull indeed.
Could it be performed during an update of the existing page?
Say, with page_avatar you uploaded an image with the first page submission. Than, when you edit that page you tick a box which tells the plugin to write the text to a specific image of the one created with page_avatar. (you need to be able to specify the image cause with page_avatar you can upload like 10 different sized images of the same image but I just want the text applied to one specific sized image. All the other images should not have that text.

Or maybe "Attach" will work better with it? I havent yet looked at attach (although I will soon as I plan to use it) so right now I have no idea which would be the easiest.

<img src="http://www.armaholic.com/datas/thumbs/green-sea-battalion-uniforms-version-03-preview_4.jpg" alt="green-sea-battalion-uniforms-version-03-" />
Macik
#8 2014-01-24 19:24

First you should define some rules: what images, what sizes, in what cases, what text to place… etc.  Than you can deside is this possible to automate it or user action is required. Automatic can be done on upload stage. user action required can be done with some addition forms|inputs on page update, as you noted above.

https://github.com/macik
правильный хостинг — https://goo.gl/fjCa1F