Recently, a client has posed an interesting request: to create the ability to produce three different types of ads within the same form. Up to that point, we had a different form for each separate type of ad.
This project applied to Native, Text & Logo vertical, and Text & Logo horizontal ads, since these types of ads have the same set of fields. The difference is simply in the size of the image. Therefore, we decided to combine all ads into one ad builder. What a great idea!
One of the benefits of doing this was to allow the advertiser to speed up the process of placing ads by minimizing the steps which need to be taken. Another benefit was that using the tool to crop images now permitted the use of virtually any image, with limitations only around the minimum width/height of the image. There is no longer a need to prep the images, as we had to do before.
The process of bring this project to life was split into two phases:
Adding a new type of Native Text & Logo ad. This allowed us to control the imprints of the builder for certain advertisers. The builder is, in fact, accessible for all advertisers.
Adding the user tools.
Here are some highlights of this process:
When moving toward the creation of a new ad, the advertiser would see a new tab in the list of ad types. The tab is titled Native + Text & Logo and would show up at the top of the list. The form itself resembles the same form as for Native ads, but also features three separate previews for each of the new ad types.
We used jQuery plug-in cropper for image cropping. The image frames set up in the preview are appropriate for the size of the image accessible in the builder. Initially, the frame takes up the smaller side of the image.
The advertiser can move the frame in order to quickly select the needed part of the image and immediately see the result. The requirements for images are the following:
Smaller side of the image has to be no smaller than 240 pixels
Size of image should be no more than 10 megabytes
Acceptable formats include JPG, JPEG, PNG, and GIF
After each ad is cropped and saved on the server, the ad is finally created and all the cropped images are also saved for each ad type. We use the widely-utilized Imagick library for image cropping on the server, because it can be used with PHP and can work with animated GIF files.
If the client needs only Native and Text & Logo ads, the whole process can be condensed. All we have to do is input the needed content and link, load the image, input the final image in real time, and click “create.” Can’t be any simpler!
Our advertisers have already greatly appreciated our efforts in this space – now there’s no need to repeat the process of ad creation time after time! What a relief!
