If you want to convert this data in your table:
- Email into clickable mails
- Website into clickable homepages
- Image-path and filename into showing the actual image that is refered to
You can use htmltags_autoconvert=”yes” to achieve this.
Original
| Company website | Company name | Login email | Id | First name | Last name | profile-image |
|---|---|---|---|---|---|---|
| https://wibergsweb.se/ | Wibergs Web | laura@example.com | 2070 | Laura | Grey | https://wibergsweb.se/wp-content/uploads/pexels-george-dolgikh-1310522.jpg |
| https://google.se/ | craig@example.com | 4081 | Craig | Johnson | no image | |
| https://wibergsweb.se/ | Wibergs Web | mary@example.com | 9346 | Mary | Jenkins | https://wibergsweb.se/wp-content/uploads/pexels-pixabay-415829.jpg |
| https://google.se/ | jamie@example.com | 5079 | Jamie | Smith | no image |
Convert into links and images
This example shows how company website turns into clickable links, emails turns into clickable emails and images are displaying from the actual url. It’s very large images that are used here and if you want to show smaller images, you are able to change the width of images with htmltags_autoconvert_imagewidth followed by a specificed width. If you don’t specify any unit, then pixels will be used. The height of the image would adjust in proportion to it’s width. In this example, the images would be 100% of it’s cellwidth and would look like this:
Shortcode
[csvtohtml_create source_type="guess" source_files="email.csv" csv_delimiter=";" htmltags_autoconvert="yes" htmltags_autoconvert_imagewidth="100%"]
| Company website | Company name | Login email | Id | First name | Last name | profile-image |
|---|---|---|---|---|---|---|
| https://wibergsweb.se/ | Wibergs Web | laura@example.com | 2070 | Laura | Grey |  |
| https://google.se/ | craig@example.com | 4081 | Craig | Johnson | no image | |
| https://wibergsweb.se/ | Wibergs Web | mary@example.com | 9346 | Mary | Jenkins |  |
| https://google.se/ | jamie@example.com | 5079 | Jamie | Smith | no image |
Alt-attribute
When using images on a webpage the html specification requires you to have an alt-attribute for the image-element. NOTE! The alt-value is not visible for the user who looks at your table. It’s used for example for blind people (speech based on value in alt) so they know what kind of image it is,
Plain text
As default this alt is just an empty string (e.g. alt=””). If you set htmltags_autoconvert_imagealt with a specific value, all images will have that value (e.g. if you add all images in the table with htmltags_autoconvert_imagealt =”image from profile table” all images will have alt=”Image from profile table”).
Grab from column(s)
A more useful approach is to set the value of alt-attribute based on a specific columns value (because this value should describe the image). In this example we might want to grab the value from the ”First name” column and this is achieved by using htmltags_autoconvert_imagealt=”First name” (where ”First name” is the name of the column). In the table below the first image has the alt-value ”Laura” and the row where second image appears has the alt-value ”Mary”.
Shortcode
[csvtohtml_create source_type="guess" source_files="email.csv" csv_delimiter=";" htmltags_autoconvert="yes" htmltags_autoconvert_imagewidth="100%" htmltags_autoconvert_imagealt="First name"]
| Company website | Company name | Login email | Id | First name | Last name | profile-image |
|---|---|---|---|---|---|---|
| https://wibergsweb.se/ | Wibergs Web | laura@example.com | 2070 | Laura | Grey | |
| https://google.se/ | craig@example.com | 4081 | Craig | Johnson | no image | |
| https://wibergsweb.se/ | Wibergs Web | mary@example.com | 9346 | Mary | Jenkins | |
| https://google.se/ | jamie@example.com | 5079 | Jamie | Smith | no image |
You may also combine several columns to include the alt-value for each column’s value. The example below would generate values: Laura Grey and Mary Jenkins for their image’s alt-value.
Shortcode
[csvtohtml_create source_type="guess" source_files="email.csv" csv_delimiter=";" htmltags_autoconvert="yes" htmltags_autoconvert_imagewidth="100%" htmltags_autoconvert_imagealt="First name,Last name"]
| Company website | Company name | Login email | Id | First name | Last name | profile-image |
|---|---|---|---|---|---|---|
| https://wibergsweb.se/ | Wibergs Web | laura@example.com | 2070 | Laura | Grey | |
| https://google.se/ | craig@example.com | 4081 | Craig | Johnson | no image | |
| https://wibergsweb.se/ | Wibergs Web | mary@example.com | 9346 | Mary | Jenkins | |
| https://google.se/ | jamie@example.com | 5079 | Jamie | Smith | no image |
Combined plain text and columns
It’s even possible to combine some clean text and grab value from column(s). The example below would generate values: This a profile image of Laura Grey and This a profile image of Mary Jenkins for their image’s alt-value.
Shortcode
[csvtohtml_create source_type="guess" source_files="email.csv" csv_delimiter=";" htmltags_autoconvert="yes" htmltags_autoconvert_imagewidth="100%" htmltags_autoconvert_imagealt="This a profile image of,First name,Last name"]
| Company website | Company name | Login email | Id | First name | Last name | profile-image |
|---|---|---|---|---|---|---|
| https://wibergsweb.se/ | Wibergs Web | laura@example.com | 2070 | Laura | Grey | |
| https://google.se/ | craig@example.com | 4081 | Craig | Johnson | no image | |
| https://wibergsweb.se/ | Wibergs Web | mary@example.com | 9346 | Mary | Jenkins | |
| https://google.se/ | jamie@example.com | 5079 | Jamie | Smith | no image |