I'm using PHPMailer to send emails with images embedded in the email.
I'm just wondering what the best way to achieve the following usecase is:
Sending an image (like a picture of a gift card) with text overlaying it. Some of the text is standard on each email, other text is variable (like Gift Card code, and amount of gift card).
For styling, I'm obviously using tables and colspans, and all that fun stuff we are forced to use for HTML emails, but since I want the image to be a certain width (approximately 400px, or a bit more than half the width of a standard email window) and I also want the text to fit on the image, I'm wondering what the best way to ensure that the text doesn't escape the boundary of the image is.
Any advice would be appreciated.
Since you're already using tables, set your image as the background for a table cell and put the text inside the cell. You can keep the text inside your arbitrary picture border by setting the padding of the cell.
Related
I'm trying to create a pdf file of user designed HTML that will then be send to a printing house for print and delivery. The printing house wish me to add crop marks on the .pdf.
I'm currently doing this with CSS by placing position: absolute; images over the design with the crop marks. However the Printing Software that the printing house is using can not "find" these Crop Marks.
I guess because I'm not doing it in the "official way".
Is there any functionality of creating crop marks with wkhtmltopdf? How do I make printers or other software understand that the images I included in the document is cropmarks and not just some normal image part of the content?
How is the page's CropBox defined? Also you may check out the section 14.11.3 Printer’s Marks, of the PDF specification and find how you can get it working with your software.
from spec:
The crop box defines the region to which the contents of the page shall be clipped (cropped) when displayed or printed. Unlike the other boxes, the crop box has no defined meaning in terms of physical page geometry or intended use; it merely imposes clipping on the page contents. However, in the absence of additional information (such as imposition instructions specified in a JDF or PJTF job ticket), the crop box determines how the page’s contents shall be positioned on the output medium. The default value is the page’s media box.
I got a page here http://183.78.169.53/tyre2/page2.html. For now is static but I will be reading from the database and form something like this dynamically. The problem as I read position ID from the db and would like to place on each of the tyres? Any idea how to achieve it?
There are a fews ways to put labels on images in web applications.
Make an HTML element like a div or span, whose css background property is an image. You will have
to change the css dynmaically if the image is read from a database.
Generate a new image by compositing the text and background image server-side (but that is sooooo 1990s!)
Generate the whole display using <canvas>
Given what you have already, I would go with option 1.
You can put another image with the number on top of the tires. Alternatively, if all the images are the same, you can set the image as a background for the div/li/aand print the number as plain text.
If every picture is different, you can assign every div (or whatever it is) an I'd, and echo custom CSS that sets a different background image for each div.
I want to create a programme that can
take text input from user and adjust anywhere in specific div
change font, fontcolor and size as per user selection
upload image as background
save whole customization and send as email
with help of PHP/JavaScript
Can anyone suggest how to do this.
Main issue is create image from user customization.
An existing programme to do this is also acceptable
I am programmer and working on php javascript magento
EDIT
Reading your description, it doesn't sound like you really need a screencapture-like version of the content the user created, you just need an HTML embedded editor and a way for someone to upload an image as the background with a way to preview the result. You can send emails with backgrounds using CSS.
(Not sure what you mean, but I presume you can figure this one out)
Use TinyMCE for an editor: http://tinymce.moxiecode.com/
Use jQuery AJAX file upload plugins (maybe http://www.uploadify.com/)
Submit the form (with the selected settings and edited html) to server and process as email
Try here for how to add an image to the background of an email:
http://www.campaignmonitor.com/blog/post/3170/adding-background-images-to-your-email-in-two-simple-steps/
I need to add a font color changing tool section in my form's text area same as we have in our mail boxes.I tried to find on net but didnt get anything useful.Please tell me how can i implement that font color changing tool on my page using javascript????
Simplest way would be to use something like:
http://developer.yahoo.com/yui/examples/editor/simple_adv_editor.html
Color pickers are readily available on the net. Just google for "colorpicker yourFavJSLib". Some results will be:
http://www.dojocampus.org/explorer/#Dijit_Color%20Palette_Default
http://developer.yahoo.com/yui/examples/colorpicker/index.html
http://www.eyecon.ro/colorpicker/
Basically, all you have to do is let the user pick a color and then change the CSS color property with JavaScript for that eMail. You will also want to save the color value for this eMail on the server so it gets reapplied when the page is reloaded.
As an alternative, let users tag their eMails and let them assign colors to the tags instead of the eMail directly. Then store the tags instead of individual colors. Apply the tags as CSS classes.
EDIT: if you want the users to allow for RichText Editing/Composing, either use a readymade component. If you cannot use one, use a color picker and wrap the selected text portion into 'span' tags - but there's really no reason to reinvent the wheel here.
How do I embed text in an image? The embedded text should be hyperlinked to an URL. The use case is like having an image with a link that says 'Click here' which opens a new page.
If you want to stay away from z-indexes and/or image maps, you could do it the old school way, which is to set the image as a background for a table or div, and then just put text inside the table or div.
You have to options to accomplish this:
Add your text to the image with your graphics program of choice. (Use ImageMagick for automated processing) Then create an image map to make parts of the image clickable. If you need some kind of "hot state", then you have to use small images which are absolutely positioned above the original image and show/hide them using Javascript. Depending on your needs it might be easier to make the whole image clickable.
Add a normal image and a normal hyperlink. You can use a regular img tag or use set the background image of the container. Then use absolute positioning to move the hyperlink to the desired position on top of the picture. With that solution you don't need Javascript to create a hover effect.
Using an image editor add the desired text to image itself and then use the image map to the area where text appears to required URL. For a sample please check my sample at http://shreedhar.kotekar.com/ImageMapSample.htm
If you are using asp.net this Embed text in Image using ASP.NET from developer's fusin shows a good example.
Edit- From your comments I see you're looking for php: Adding text to images with PHP
You could use this tool:
http://www.jsclasses.org/package/324-JavaScript-Embed-encoded-text-in-images-using-steganography.html
and here on github:
https://github.com/blauharley/LoremImageCryptonator
With help of this JS-Object you can embed any text you want. It offers two methods (getCryptoImage, getTextFromCryptoImage) that can be used for inserting and extracting any text into and out of an image.
For your use-case you can insert an URL and extract it as soon as the image is clicked.
But first of all you need to create a "Crypto-Image" that a URL has been inserted into before then saves the image. The saved "Crypto-Image" can then be shown on a page.
Hope this helps.