How to add images, gifs, and videos to emails, form fields, and products

regpack allows for html code in our emails, product descriptions, and any free text field on any form this means you can include an image, gif, or video in these places to further customize your registration process this is a really fun way to jazz up your form flow and your offerings, as well as communication to your users adding an image is simple to do via html and doesn't require a degree in computer science, we promise! using html to add an image to an email there are a few steps to adding an image via html into any email, product description or free text field in regpack get the link to the image you want to use copy this code \<div> \<img src="url"> \</div> you'll put the link of the image where it says url re size if necessary (see below for more on that) place the code by clicking "source" at the bottom of any text box in regpack and you're set! how to get the url of your image this depends on what image you are using if the image is from the internet, you just need to grab the image url from any web page, simply right click the image and click "copy link address" this is the url for the image! be sure you have permission from the image owner to use the image on your website! if you have an image on your computer you would like to use, you'll need to upload it in order to create a url this is done easily through your website platform you can also ask us to host it for you just email support at mailto\ support\@regpacks com ! the most common is wordpress so we'll show you how to do that first head over to "media" and upload the image you'd like to use once uploaded, you can find the url of the image here html code for adding an image the most basic code for adding an image is this \<img src="url"> simply add your image url in between the " ", where it says url and you're done! an example of the above image looks like this \<div> \<img src=" https //www regpacks com/wp content/uploads/2020/04/copy image address png "> \</div> now simply copy that html code and add it to the "source" of any email or free text field in regpack! where to add an image in emails you can find the "source" here on an email click it, and you'll see an html version of your email template simply copy / paste your image html where you want it to appear in the email where to add an image in products you can find the "source" option in product settings as well head over to "products" and then "edit" on the product of your choosing under description, you can add text, but also click "source" and add any html you'd like where to add an image in a free text field same for any free text field on a form head to "forms" and "edit form fields" on any existing form with a free text field add a free text field by choosing it from the side panel, or an edit an existing free text field by clicking on it resizing images advanced html this takes a bit more work for the html code, so it's best if you have an image that is the size you want we aren't able to help with html resizing requests in support if not, you can add "width" and "height" to the html code for your image to resize as you'd like be sure to resize it proportionally a square is simple because the height and width will always be equal, but if you have say, a rectangle, that is 100 150; you'll need to calculate the aspect ratio we love using https //andrew\ hedges name/experiments/aspect ratio/ that makes it doing the math easier simply input the image's current width and height, and then your desired width or height of the new size it will calculate the 2nd value for you then simply plug those numbers into the code, a sample of which is below \<img height=" 500 " src=" https //www regpacks com/wp content/uploads/2020/05/online payments software testimonial jpeg " width=" 750 " /> the bold text is constant and the non bold text is what you will add for each image you'll need the link of the image, and the height and width you'd like it to be wondering how to find the width and height of an image? the easiest way is to experiment save different values and check how they look on the front end then adjust the values until it looks good! an alternative way to check is using paint but if your image is uploaded to media on your website platform, it will tell you in the media description if you scroll up to the image where we showed you how to find the image url, you'll see in the top right the dimensions of the image are listed if using paint, simply add your image into paint, and click "resize" and then "pixel" be sure to keep the "maintain aspect ratio" checkbox ticked, and now you have your current image size! this will even calculate your aspect ratio for you just plug in the height or vertical pixel you'd like, and it will recalculate the other value for you then plug those numbers into your html code, shown above, and you're all set! once your code is ready and your image is the right size enjoy your beautiful pictures, gifs, or videos!