{"id":399,"date":"2021-09-12T20:14:18","date_gmt":"2021-09-12T18:14:18","guid":{"rendered":"https:\/\/www.2glyph.com\/blog\/?p=399"},"modified":"2021-09-12T21:10:57","modified_gmt":"2021-09-12T19:10:57","slug":"glyphviewer-exporting-content","status":"publish","type":"post","link":"https:\/\/www.2glyph.com\/blog\/glyphviewer-exporting-content\/","title":{"rendered":"GlyphViewer – Exporting Content"},"content":{"rendered":"

At some point you might ask yourself why am I building multiple translations for text in images if I could just translate them into my own language. The reason is quite simple:\u00a0“Don’t be selfish!”<\/em>. We want to\u00a0help you improve the online experience of your users!<\/strong>.<\/p>\n

GlyphViewer was designed to allow non-technical people to build complex multilingual advertise slogans starting from campaign’s images. Serve native language slogans to people all around the world, link regions in your image to where users need to be directed. Thus, the targeted person will fully understand what the campaign is about without any additional language knowledge, besides the mother’s tongue.<\/p>\n

To start exporting images and their data open a project (check out\u00a02. Working with projects<\/a>), then select the image you would like to export using the tab bar, go to\u00a0Publish\u00a0<\/em>menu and select either\u00a0Export As Image<\/em>\u00a0or\u00a0Export As HTML<\/em>:<\/p>\n

Exporting images<\/h4>\n

GlyphViewer application can export your built content (glyphs, words, translations) in a multiple image formats such as\u00a0jpg<\/em><\/strong>,\u00a0png<\/em><\/strong>,\u00a0bmp<\/em><\/strong>,\u00a0ico<\/em>\u00a0<\/strong>and many more. Though this format is useful because you can basically upload it anywhere it is limited at only one language per image, or a selected language for each element (word, translation). Further information can be found in Export as image section.<\/p>\n

Exporting SEO friendly HTML<\/h4>\n

This feature should probably the reason you may want to purchase GlyphViewer. Using this format you can export ALL of your translated data into a HTML format, SEO enabled, that can server the user native language translations if available. Upload it to your web server, or any other place that allows HTML data, and when a user from China visits your site, an Chinese translation of your text in the image will be shown. More information about SEO options can help can be found in\u00a0Export SEO friendly HTML\u00a0section.<\/p>\n

Export as image<\/h2>\n

You can use this to export your image and it’s translation data as a static image format of your choosing. Clicking\u00a0Export As Image…<\/em>\u00a0from the\u00a0Publish\u00a0<\/em>menu will display the following dialog:<\/p>\n

\u00a0\"gv_exportimg\"<\/a><\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
\n

The original image path is shown in the dialog. All you need to do is fill in the required Export Settings, choose a destination path and click\u00a0Export<\/strong>.<\/p>\n

1.\u00a0Image Data<\/h4>\n

You can choose which associated data to export from your image. The image’s data is either\u00a0glyphs, words or translations. \u00a0If you select a check box the specific image data will be added to the final image. For example if words are checked all words in the image will be shown on the exported image, as part of the final image (as if you’ve made a screenshot of the image seen in GlyphViewer). All exported data (glyphs, words, translations) will be at their current position in the image, as currently seen, with their font and color intact. For example if a glyph has a grey box around it due to a small confidence value (check\u00a03. Building translations<\/a>\u00a0for more information) that grey box will also be shown in the resulting image.<\/p>\n

2. Save\u00a0Type<\/h4>\n

Here you can choose from a great number of available\u00a0image formats to export. The destination will automatically be updated with the corresponding file extension of the\u00a0chosen format.<\/p>\n

3. Quality<\/h4>\n

The save quality will increase\u00a0or decrease\u00a0the\u00a0disk size of the\u00a0exported image. Of course, choosing a smaller quality value will decrease the image’s resolution. As you will slide the quality indicator you will notice on the left image preview, if format permits, an increase or decrease in the quality of the image. The preview on the left is equal to how the image will be shown if width and height are preserved (no scaling)<\/p>\n

4. Best Size<\/h4>\n

A nice feature of GlyphViewer application is the ability to compute a best size of the image based on current width and height so that no more that 20% degradation is between the original image and the new size. This way you can automatically compute a size of the image where view quality is also kept.<\/p>\n

5. Default Language<\/h4>\n

You can also choose what will be the language for your words and translations. This combo box will contain all of the translation languages associated with this image. For example if you choose\u00a0English<\/em>\u00a0from the combo box all\u00a0exported words and translations (if they are checked in\u00a01.) will use English if available.\u00a0You can use this combo box to generate static content for a specific language you desire. To add all available languages use the\u00a0Export As HTML<\/em>\u00a0feature.<\/p>\n

6. Destination<\/h4>\n

The last text box\u00a0contains the\u00a0destination and name\u00a0of the exported image. As always you can use the\u00a0blue icon folder to browse for the destination directory to\u00a0use. The name of the exported image will be constructed from the original image’s name as shown in the Original Image: label adding the\u00a0extension of the chosen save format.<\/p>\n

By default the chosen directory to export your images is located in the\u00a0[<\/strong>project_directory]\/Export\/<\/strong>\u00a0<\/em>.<\/p>\n

After you have exported your image the file will be created at the specified destination and the resulting image\u00a0will also be opened in a new tab<\/strong>\u00a0in the global tab bar.<\/p>\n<\/div>\n

Export SEO friendly HTML<\/h2>\n

Probably the most useful feature of\u00a0the GlyphViewer application is the ability to export you translated data into a HTML page. This can be done by selecting the image you would like to export from the tab bar and choosing\u00a0Export As HTML<\/em>\u00a0from the\u00a0Image<\/em>\u00a0menu.\u00a0A dialog will appear:<\/p>\n

\u00a0\"gv_export_html\"<\/a><\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
\n

1.\u00a0Image Data<\/h4>\n

You can choose which associated data to export from your image. The image’s data is either\u00a0glyphs, words or translations. \u00a0If you select a check box the specific image data will be added to the final image. For example if words are checked all words in the image will be shown on the exported image, as part of the final image (as if you’ve made a screenshot of the image seen in GlyphViewer). All exported data (glyphs, words, translations) will be at their current position in the image, as currently seen, with their font and color intact. For example if a glyph has a grey box around it due to a small confidence value (check\u00a03. Building translations<\/a>\u00a0for more information) that grey box will also be shown in the resulting image.\u00a0Note*: Unlike the\u00a0Export As Image<\/em>\u00a0option selecting Glyph, Words or Translations from here will export ALL of those types to the HTML format in any language they can be found.<\/p>\n

2. Save\u00a0Type<\/h4>\n

The save type has any meaning only when\u00a0Use Preview Image<\/em>\u00a0is selected, as you will use the new image saved in the format chosen. So if you like to change the format of the image used, click on\u00a0Use Preview Image<\/em>\u00a0then change the save type option to the format desired. This is useful when you want to export a HTML format containing a JPG format starting from you original BMP image.<\/p>\n

3. Quality<\/h4>\n

The save quality will increase\u00a0or decrease\u00a0the\u00a0disk size of the\u00a0exported image. Of course, choosing a smaller quality value will decrease the image’s resolution. As you will slide the quality indicator you will notice on the left image preview, if format permits, an increase or decrease in the quality of the image. The preview on the left is equal to how the image will be shown if width and height are preserved (no scaling).\u00a0Note*: useful only when\u00a0Use Preview Image<\/em>\u00a0is selected.<\/p>\n

4. Best Size<\/h4>\n

A nice feature of GlyphViewer application is the ability to compute a best size of the image based on current width and height so that no more that 20% degradation is between the original image and the new size. This way you can automatically compute a size of the image where view quality is also kept.\u00a0Note*: useful only when\u00a0Use Preview Image<\/em>\u00a0is selected.<\/p>\n

5. Default Language<\/h4>\n

You can also choose what will be the language for your words and translations. This combo box will contain all of the translation languages associated with this image and in case of the HTML format is useful to set which is the default language to show the HTML data in when user native language cannot be identified or no native translation exists. It is also used to set the default description and keywords html\u00a0meta tags.<\/p>\n

6. HTML ExportTemplate<\/h4>\n

GlyphViewer allows you to customize the exported HTML data by creating new HTML formats in\u00a0templates<\/strong>\u00a0directory of the installation. Just follow the sample\u00a0CustomTemplate.html<\/em>\u00a0file found there and build your own HTML templates. All you need to do is add the file in templates directory and GlyphViewer will load it for you. Currently there is the\u00a0Default Template<\/em>\u00a0and\u00a0CustomTemplate.html<\/em>\u00a0to choose from.<\/p>\n

7. Use Preview Image<\/h4>\n

GlyphViewer allows you to either use the original image in the exported HTML content, or to create a new image, base on the\u00a02. Save Type<\/strong>,\u00a03. Quality<\/strong>\u00a0options that will be linked to the format. The new image, in case Use Preview Image is selected, will be placed in the same directory as the exported HTML destination at\u00a012<\/strong>. For example if your original image was\u00a0commercial.bmp<\/em>, save type\u00a0jpg<\/em>\u00a0and quality 50%,\u00a0commercial.jpg<\/em>\u00a0with a quality of 50% will be create in\u00a0projects\/Exported<\/em>\u00a0directory and will be referenced by\u00a0commercial.html<\/em>\u00a0exported file.<\/p>\n

8. SEO Settings<\/h4>\n

Probably the most important settings in this format are found in the\u00a0SEO Settings<\/em><\/strong>\u00a0tab. The title, along with some\u00a0html meta tags<\/strong><\/em>\u00a0such as\u00a0Author<\/em>,\u00a0Author Url<\/em>,\u00a0Copyright<\/em>\u00a0can be found here.\u00a0Note*: by default they are filled with your account SEO settings in the About menu option. It’s probably best to keep this options the same for each image you export, with the exception of\u00a0Title<\/em>\u00a0<\/strong>which should be filled (170 char maximum<\/strong>) to the current image title.<\/p>\n

9. Available SEO languages<\/h4>\n

GlyphViewer to increase the SEO rating of the exported format will add description and keywords html meta tags for each of the translated language. This way search engines can see what the image contains in each of the available languages. Use the available languages from this combo box to check out the description and keywords for each language.<\/p>\n

Why do we do this?<\/strong><\/em><\/p>\n

Imagine you have an image of a bread and have an English translation:\u00a0bread<\/em>\u00a0and a French one: pain. The idea is that a user from French will search the word bread in it’s own language.\u00a0A search engine will now see 2 meta descriptions for your image: bread and pain and will associate both of them to your image.<\/strong><\/p>\n

10. Meta Description<\/h4>\n

Holds per language data that will be added to the meta description tag built automatically by GlyphViewer from the available translations in that language in the image.<\/p>\n

11. Meta Keywords<\/h4>\n

Holds per language data that will be added to the meta keywords tag built automatically by GlyphViewer from the available translations and words in that language in the image. Basically all the most important words in that language will be added here.<\/p>\n

\u00a012. Export Destination<\/h4>\n

The last text box\u00a0contains the\u00a0destination and name\u00a0of the exported HTML format. As always you can use the\u00a0blue icon folder to browse for the destination directory to\u00a0use. The name of the exported image will be contructed from the original image’s name as shown in the Original Image: label adding the HTML extension.<\/p>\n

By default the chosen directory to export your images is located in the\u00a0[<\/strong>project_directory]\/Export\/<\/strong>\u00a0<\/em>.<\/p>\n

After you have exported your image the file will be created at the specified destination and the resulting\u00a0HTML format will also be opened in a new tab<\/strong>\u00a0in the global tab bar.<\/p>\n

Basically after ensuring that the SEO Settings are correct, checking whether to export glyph, words and\/or translations and using the original or a new format of the image all you have to do is click\u00a0Export<\/strong>. A new HTML format will be generated and displayed in a new tab.<\/p>\n<\/div>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

At some point you might ask yourself why am I building multiple translations for text in images if I could just translate them into my own language. The reason is quite simple:\u00a0“Don’t be selfish!”<\/em>. We want to\u00a0help you improve the online experience of your users!<\/strong>.<\/p>\n

GlyphViewer was designed to allow non-technical people to build complex multilingual advertise slogans starting from campaign’s\u00a0[…]<\/p>\n","protected":false},"author":1,"featured_media":400,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,5],"tags":[],"_links":{"self":[{"href":"https:\/\/www.2glyph.com\/blog\/wp-json\/wp\/v2\/posts\/399"}],"collection":[{"href":"https:\/\/www.2glyph.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.2glyph.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.2glyph.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.2glyph.com\/blog\/wp-json\/wp\/v2\/comments?post=399"}],"version-history":[{"count":3,"href":"https:\/\/www.2glyph.com\/blog\/wp-json\/wp\/v2\/posts\/399\/revisions"}],"predecessor-version":[{"id":413,"href":"https:\/\/www.2glyph.com\/blog\/wp-json\/wp\/v2\/posts\/399\/revisions\/413"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.2glyph.com\/blog\/wp-json\/wp\/v2\/media\/400"}],"wp:attachment":[{"href":"https:\/\/www.2glyph.com\/blog\/wp-json\/wp\/v2\/media?parent=399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.2glyph.com\/blog\/wp-json\/wp\/v2\/categories?post=399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.2glyph.com\/blog\/wp-json\/wp\/v2\/tags?post=399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}