{"id":514118,"date":"2019-05-24T09:22:55","date_gmt":"2019-05-24T07:22:55","guid":{"rendered":"https:\/\/www.devoteam.com\/expert-view\/auto-resize-images-in-spotfire\/"},"modified":"2019-05-24T09:22:55","modified_gmt":"2019-05-24T07:22:55","slug":"auto-resize-images-in-spotfire","status":"publish","type":"expert-view","link":"https:\/\/devoteam.info\/en-se\/expert-view\/auto-resize-images-in-spotfire\/","title":{"rendered":"Auto-Resize Images in Spotfire"},"content":{"rendered":"

In Spotfire, in a text area, it is possible to place pictures. And you can even choose to either place the picture as a background image or as a regular image. Great\u2026. but there is just one tiny issue. The pictures do not size with the box they are in, and do not size when switching to another screen resolution. So quite often I created pretty solutions with beautiful pictures in them, just to get a message from test users indicating that the logo I put in the solution was only half visible and had scroll bars.<\/strong><\/p>\n

Workaround<\/span><\/h2>\n

So, time to find a workaround! And to be honest there is no 100% solution, but I did find a way to make it work better. Let\u2019s look at an example. In this solution I added a text area with a picture.<\/span><\/p>\n

\"\"<\/p>\n

Notice that the picture is too high and not wide enough to fit into the text area. But even if you would resize the text area to fit the picture it would not resize properly on a mobile device or a laptop screen.<\/span><\/p>\n

\"\"<\/p>\n

Now, in the Spotfire text box, it is possible to use HTML. So what I will do is place a small snippet of HTML in my text box, that creates a table with one row, and one cell. And my image goes into this one cell. Initially (example above), the HTML in my text box looks like this. But now I will add my table stuff in, and it will look like this:<\/span><\/p>\n

\n

<table style=”width:100%”><\/span><\/p>\n

\u00a0<tr><\/span><\/p>\n

\u00a0\u00a0\u00a0<td><IMG src=”fa44c17702444313a68ecc9bda6e30a5.png” border=0 width=”100%” height=”auto”> <\/td><\/span><\/p>\n

\u00a0<\/tr><\/span><\/p>\n

<\/table><\/span><\/p>\n<\/div>\n

Result<\/span><\/h2>\n

This little bit of script will maximize the width of our picture and set the height to be relative to the width. The result looks like this:<\/span><\/p>\n

\"\"<\/p>\n

Of course we can set both width and height to auto but that will deform the picture. But at this point, we can resize the text area to correctly contain this picture, and it will more or less be consistent when opening the solution on another size screen:<\/span><\/p>\n

\"\"<\/p>\n

All together, this solution can bring what you are looking for. No guarantees, but the chance is that it will be better than before.<\/span><\/p>\n

Need help with Spotfire?<\/h3>\n

Devoteam has extensive knowledge in Data Visualization technologies such as Spotfire, based on years of experience in transforming well-known organizations to (well-known) data-driven organizations. If you need any additional help with Spotfire or any other data technology, reach out to me via my contact details in the author-section at the bottom of the page.<\/p>\n

More about Data & Analytics<\/a><\/div>\n

More about our TIBCO Spotfire Knowledge<\/h2>\n

Want to learn more about Spotfire through our client use cases, handy how-to articles and blog-posts? Click the button below to discover our knowledge.<\/p>\n

Tibco Spotfire Knowledge<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"

In Spotfire, in a text area, it is possible to place pictures. And you can even choose to either place the picture as a background image or as a regular image. Great\u2026. but there is just one tiny issue. The pictures do not size with the box they are in, and do not size when […]<\/p>\n","protected":false},"featured_media":349445,"template":"","categories":[],"tags":[2747],"industry":[],"class_list":["post-514118","expert-view","type-expert-view","status-publish","has-post-thumbnail","hentry","tag-netherlands-en-se"],"acf":[],"cards":"\n\t

\n\n\t\t
\"Auto-Resize<\/a><\/figure>\n\n\t\t\n\t\t
\n\t

Expert View<\/p>\n\n\t\t\n\t\t

Auto-Resize Images in Spotfire<\/a><\/h3><\/div>\n\t\t\n\t<\/div>\n\n","yoast_head":"\nAuto-Resize Images in Spotfire | Devoteam<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/devoteam.info\/en-se\/expert-view\/auto-resize-images-in-spotfire\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Auto-Resize Images in Spotfire\" \/>\n<meta property=\"og:description\" content=\"In Spotfire, in a text area, it is possible to place pictures. And you can even choose to either place the picture as a background image or as a regular image. Great\u2026. but there is just one tiny issue. The pictures do not size with the box they are in, and do not size when […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devoteam.info\/en-se\/expert-view\/auto-resize-images-in-spotfire\/\" \/>\n<meta property=\"og:site_name\" content=\"Devoteam\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/devoteam.info\\\/en-se\\\/expert-view\\\/auto-resize-images-in-spotfire\\\/\",\"url\":\"https:\\\/\\\/devoteam.info\\\/en-se\\\/expert-view\\\/auto-resize-images-in-spotfire\\\/\",\"name\":\"Auto-Resize Images in Spotfire | Devoteam\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/devoteam.info\\\/en-se\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/devoteam.info\\\/en-se\\\/expert-view\\\/auto-resize-images-in-spotfire\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/devoteam.info\\\/en-se\\\/expert-view\\\/auto-resize-images-in-spotfire\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/devoteam.info\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/spotfire-auto-resize-images-devoteam-tibco.png\",\"datePublished\":\"2019-05-24T07:22:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/devoteam.info\\\/en-se\\\/expert-view\\\/auto-resize-images-in-spotfire\\\/#breadcrumb\"},\"inLanguage\":\"en-SE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/devoteam.info\\\/en-se\\\/expert-view\\\/auto-resize-images-in-spotfire\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-SE\",\"@id\":\"https:\\\/\\\/devoteam.info\\\/en-se\\\/expert-view\\\/auto-resize-images-in-spotfire\\\/#primaryimage\",\"url\":\"https:\\\/\\\/devoteam.info\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/spotfire-auto-resize-images-devoteam-tibco.png\",\"contentUrl\":\"https:\\\/\\\/devoteam.info\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/spotfire-auto-resize-images-devoteam-tibco.png\",\"width\":1920,\"height\":500},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/devoteam.info\\\/en-se\\\/expert-view\\\/auto-resize-images-in-spotfire\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/devoteam.info\\\/en-se\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Expert View\",\"item\":\"https:\\\/\\\/devoteam.info\\\/en-se\\\/expert-view\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Auto-Resize Images in Spotfire\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/devoteam.info\\\/en-se\\\/#website\",\"url\":\"https:\\\/\\\/devoteam.info\\\/en-se\\\/\",\"name\":\"Devoteam\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/devoteam.info\\\/en-se\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-SE\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Auto-Resize Images in Spotfire | Devoteam","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/devoteam.info\/en-se\/expert-view\/auto-resize-images-in-spotfire\/","og_locale":"en_US","og_type":"article","og_title":"Auto-Resize Images in Spotfire","og_description":"In Spotfire, in a text area, it is possible to place pictures. And you can even choose to either place the picture as a background image or as a regular image. Great\u2026. but there is just one tiny issue. The pictures do not size with the box they are in, and do not size when […]","og_url":"https:\/\/devoteam.info\/en-se\/expert-view\/auto-resize-images-in-spotfire\/","og_site_name":"Devoteam","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/devoteam.info\/en-se\/expert-view\/auto-resize-images-in-spotfire\/","url":"https:\/\/devoteam.info\/en-se\/expert-view\/auto-resize-images-in-spotfire\/","name":"Auto-Resize Images in Spotfire | Devoteam","isPartOf":{"@id":"https:\/\/devoteam.info\/en-se\/#website"},"primaryImageOfPage":{"@id":"https:\/\/devoteam.info\/en-se\/expert-view\/auto-resize-images-in-spotfire\/#primaryimage"},"image":{"@id":"https:\/\/devoteam.info\/en-se\/expert-view\/auto-resize-images-in-spotfire\/#primaryimage"},"thumbnailUrl":"https:\/\/devoteam.info\/wp-content\/uploads\/2024\/12\/spotfire-auto-resize-images-devoteam-tibco.png","datePublished":"2019-05-24T07:22:55+00:00","breadcrumb":{"@id":"https:\/\/devoteam.info\/en-se\/expert-view\/auto-resize-images-in-spotfire\/#breadcrumb"},"inLanguage":"en-SE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devoteam.info\/en-se\/expert-view\/auto-resize-images-in-spotfire\/"]}]},{"@type":"ImageObject","inLanguage":"en-SE","@id":"https:\/\/devoteam.info\/en-se\/expert-view\/auto-resize-images-in-spotfire\/#primaryimage","url":"https:\/\/devoteam.info\/wp-content\/uploads\/2024\/12\/spotfire-auto-resize-images-devoteam-tibco.png","contentUrl":"https:\/\/devoteam.info\/wp-content\/uploads\/2024\/12\/spotfire-auto-resize-images-devoteam-tibco.png","width":1920,"height":500},{"@type":"BreadcrumbList","@id":"https:\/\/devoteam.info\/en-se\/expert-view\/auto-resize-images-in-spotfire\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devoteam.info\/en-se\/"},{"@type":"ListItem","position":2,"name":"Expert View","item":"https:\/\/devoteam.info\/en-se\/expert-view\/"},{"@type":"ListItem","position":3,"name":"Auto-Resize Images in Spotfire"}]},{"@type":"WebSite","@id":"https:\/\/devoteam.info\/en-se\/#website","url":"https:\/\/devoteam.info\/en-se\/","name":"Devoteam","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devoteam.info\/en-se\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-SE"}]}},"uagb_featured_image_src":{"full":["https:\/\/devoteam.info\/wp-content\/uploads\/2024\/12\/spotfire-auto-resize-images-devoteam-tibco.png",1920,500,false],"thumbnail":["https:\/\/devoteam.info\/wp-content\/uploads\/2024\/12\/spotfire-auto-resize-images-devoteam-tibco-150x150.png",150,150,true],"medium":["https:\/\/devoteam.info\/wp-content\/uploads\/2024\/12\/spotfire-auto-resize-images-devoteam-tibco-300x78.png",300,78,true],"medium_large":["https:\/\/devoteam.info\/wp-content\/uploads\/2024\/12\/spotfire-auto-resize-images-devoteam-tibco-768x200.png",768,200,true],"large":["https:\/\/devoteam.info\/wp-content\/uploads\/2024\/12\/spotfire-auto-resize-images-devoteam-tibco-1024x267.png",1024,267,true],"1536x1536":["https:\/\/devoteam.info\/wp-content\/uploads\/2024\/12\/spotfire-auto-resize-images-devoteam-tibco-1536x400.png",1536,400,true],"2048x2048":["https:\/\/devoteam.info\/wp-content\/uploads\/2024\/12\/spotfire-auto-resize-images-devoteam-tibco.png",1920,500,false]},"uagb_author_info":{"display_name":"group.it.system","author_link":"https:\/\/devoteam.info\/en-se\/author\/"},"uagb_comment_info":0,"uagb_excerpt":"In Spotfire, in a text area, it is possible to place pictures. And you can even choose to either place the picture as a background image or as a regular image. Great\u2026. but there is just one tiny issue. The pictures do not size with the box they are in, and do not size when…","_links":{"self":[{"href":"https:\/\/devoteam.info\/en-se\/wp-json\/wp\/v2\/expert-view\/514118","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devoteam.info\/en-se\/wp-json\/wp\/v2\/expert-view"}],"about":[{"href":"https:\/\/devoteam.info\/en-se\/wp-json\/wp\/v2\/types\/expert-view"}],"version-history":[{"count":0,"href":"https:\/\/devoteam.info\/en-se\/wp-json\/wp\/v2\/expert-view\/514118\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devoteam.info\/en-se\/wp-json\/wp\/v2\/media\/349445"}],"wp:attachment":[{"href":"https:\/\/devoteam.info\/en-se\/wp-json\/wp\/v2\/media?parent=514118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devoteam.info\/en-se\/wp-json\/wp\/v2\/categories?post=514118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devoteam.info\/en-se\/wp-json\/wp\/v2\/tags?post=514118"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/devoteam.info\/en-se\/wp-json\/wp\/v2\/industry?post=514118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}