Is This How They Build Online Greeting Cards ?

sunny_pro

New member
Joined
Jun 18, 2017
Messages
86
Points
0
Happy New Year!

Folks,

Have you seen those online greeting cards, where you choose a template (like a bunch of people holding a big white empty sign board) and whatever you type in the "greetings" text box then that shows-up in the image (your typed text shows up in the sign board) ?
How did they program all that with php ? I mean, they did some kind of a text layout on the img, right ?
We've done this kind of thing in Adobe Photoshop but how does php manage it ? Does php have some builtin function that deals with overlaying one img or text over another img ? Img overlaying ? if not, then how'd they manage to program it ?
If you don't mind, I'd like to see a code sample from your end. That can be my new year gift!
I think the programmers do it like the following technique. See if I'm correct or not ...

They cut the template img in half. So, in our example, the bunch of people holding the empty white signboard is one whole img. Like: full.jpeg.
With phptoshop and the like, the webmaster cut the img in 2. Half half.
Like: left_half.jpeg & right_half.jpeg.

Now, let's deal with you the user's input text and its img.
With a font, let's say Ariel Style, I, the programmer, going to write each letter and save it. Like so:


a.jpeg
b.jpeg

and so on right down to:

y.jpeg
z.jpeg

Then, I'm going to give you, the visitor/greeting mssg creator a text box (in a web form).
You will type your word such as: Happy New Year 2018.
And, my script will call the required jpeg files and combine them to form your word. Like so:

h.peg,a.jpeg,p.peg,p.jpeg,y.jpeg and so on.
You get the picture. Gonna put each appropriate img files side by side that will make up your chosen word.

Eg.


$word = $h = mydomain\h.jpeg.$a = mydomain\a.jpeg; AND SO ON until your word is formed: Happy New year 2018.

//combine left half of img with right half of img with greeter's $word inbetween the 2 imgs.
echo left_half.jpeg.$word.right_half.jpeg; //concatenation taking place here.


Is this how the php programmers build these greeting card sites ? Meaning using the same method I did. Ok, maybe programming slightly differntly by using better codes but the method of adding the greeter's greeting words on the image template is done like so. Right ?

Don't forget to PM me your emails so when I get this Greeting Card site of mine up and running then I can give you all a card. Lol!
 

Mike001

New member
Joined
Apr 27, 2016
Messages
578
Points
0
Sunny_pro,

Having programmed a few of those types of sites myself, not exactly card sites, but sites where a user can select an image and overlay items, images or text on the image, there is a lot more to it than simply using an image with a text overlay. You are looking at it is a very simplistic way.

I am sure that it could be done simplistically but you would not have near the functionality of those types of sites, and that is what makes them popular.

You have to keep in mind many of those sites have, sizable images, that in itself adds a whole new dimension to the types of images that can be used, they have many different types of fonts, which again adds more complexity to the over lay of the font on the image as fonts are various sizes in in the same pixel size, they use different types of backgrounds for the fonts and the images, even merely adding different colors adds more complexity to the code.

They use groups of transparencies and gradients which again will add complexity to the code and how the color choices are coded and the types of file types that can be used for the images.

Programming is an art form. I know that sounds silly but it is. It is visualizing an outcome and writing the steps to achieve that outcome, one piece at a time. Most of us use flow charts to work through those steps, at a high level, what we are trying to accomplish. As we work through the steps we will discover good ways and bad ways to accomplish those steps and develop a structure for the code.

First and foremost jpeg files would not be a good choice as the images. They do not support transparencies and resizing tends to distort the image, vector images would be a better choice.

PHP could handle a project like this, but it would not be my first choice as there are limitations to PHP when it comes to dealing with images and drawing. I would use JavaScript and a jQuery drawing library. There are many of them out there and they deal much better a manipulating the DOM (Document Object Model).

CSS3 has many features now that support drawing in the canvas module and would also allow for image development, again using JavaScript. Although i would still using a jQuery drawing library to save time in development.

Stay away from Flash. It is a powerful tool but it is rapidly losing support in the newer browsers as there are many security issues associated with the flash player. Many newer browsers do not even support the Flash player anymore.

Come up with a model (a brief description) of what you are looking to do, build a flow chart and PM me if you want and I can point you in the right direction for starting your code.

Hope this helps.
 
  • Like
Reactions: Marc van Leeuwen

sunny_pro

New member
Joined
Jun 18, 2017
Messages
86
Points
0
sunny_pro
Thank you very much Mike for your indepth explanation.
I did look into css and got greedy to use all the fonts available there and got bogged down. And so, thought best ask in the forums and see if there are a simpler way of doing things with php. Thanks for letting me know about javascript and jQuery. But, I'm not into Javascript as it's too complicated to learn. As for jQuery, don't know much about it.
As of now, sticking to php as I am already struggling to learn one programming language. I can't afford to deal with more as I'll get confused.
Anyway, I know fair html since 1998, updated a little to html 5, learnt little bit of css in 2015 and been trying to learn php ever since that.
And so, for now, I'll stick to html 5, css and php and see how much I can build with these 3.
If you really want to know what is on my mind then look-out for all my threads.

Thanks
 

Mike001

New member
Joined
Apr 27, 2016
Messages
578
Points
0
I have been watching your threads and have responded to a few.

JavaScript is really not that complicated to learn, and it adds a tremendous amount of functionality to what you an do on the web and to your website. jQuery is strictly an extension library of JavaScript. It allows you to add modules to your website, written in JavaScript that do very specific things and they are very easy to implement on the site.

jQuery is a very popular JavaScript library with a relatively user friendly front-end.

Take a look at some of the free videos on my site and you can get up to speed pretty quickly on PHP, JavaScript, HTML and CSS. I have been teaching these subjects at a University level for many years. I also have run a very successful Web Development business, worked with many fortune 500 companies in software development, training and software and hardware deployment management.
 
Older threads
Replies
1
Views
3,051
Replies
1
Views
3,891
Replies
2
Views
1,357
Replies
3
Views
1,482
Replies
2
Views
1,325
Newer threads
Replies
3
Views
5,938
Replies
2
Views
1,987
Replies
5
Views
5,656
Latest threads
Replies
0
Views
28
Replies
0
Views
31
Replies
1
Views
39
Replies
3
Views
94
Recommended threads
Replies
17
Views
8,229
Replies
1
Views
2,384
Replies
11
Views
5,121
Replies
0
Views
2,280
Top