1 2 Previous Next 20 Replies Latest reply on Oct 14, 2018 5:24 PM by Aaron Cowper

    Need Help with Resizing Web Page Image in Dasbhoard

    dan.wiley

      I want to link a picture from the web into my dashboard using a URL, but I am running into an issue with sizing the picture to fit the space I have allotted in the dashboard. Using the "Web Page" image I am able to link up successfully and create an action using hyperlinks in my dataset; however, this does not provide me the ability to resize (pic is too large…basically size of a webpage, and I want it to take up about ¼ of my dashboard). 

       

      I read the follow on Tableau Help, "When you add an image object you are prompted to select an image from your computer. You can also type a URL for an image that is hosted online.”

      http://onlinehelp.tableausoftware.com/current/pro/online/en-us/help.htm#dashboards_create_addobjects.html

       

      This would solve my problem because I know that with an embedded picture I will be able to “Fit Image” and “Center Image” so that I am able to see it in my viz (vs. seeing ¼ of the pic when using an imbedded web page).  However, when I type a URL for the image as the “File Name” and click “Open”, no image appears.  Can anyone help me out with this, or provide me an alternative solution?

        • 1. Re: Need Help with Resizing Web Page Image in Dasbhoard
          Joshua Milligan

          Dan,

           

          I'm afraid I don't have an answer, but I'm able to reproduce the issue in verisons 7, 8.0, and 8.1.

           

          Regards,

          Joshua

          • 2. Re: Need Help with Resizing Web Page Image in Dasbhoard
            Jonathan Drummey

            You could try setting up an HTML file that does the resizing of the image (so your URL Action would point to the HTML that would then point at the image), however Tableau does some funky stuff with padding around HTML borders last I checked.

            • 3. Re: Need Help with Resizing Web Page Image in Dasbhoard
              dan.wiley

              Thanks for the Reply Joshua and Jonathan.  I have attached a Tableau workbook (8.0, twb - no data, only links to a picture URL) which illustrates the issue.  Can you perform the task I described and upload a new Tableau file?   I could not figured out how to attached a Tableau workbook to my post, however attached is an image/screen-shot with comments showing what I am trying to do...

               

              In the top BLUE container I have dropped a "web page" into the container and a blank.  You can see that if I wanted the Google logo to take up only the top left portion, with a web image I have no ability to center and fit the image to the space.  In the bottom RED container I have dropped an "image" into the container, and when prompted instead of choosing a file from one of my folders, I pasted in the same picture URL.  As you can see no image shows up.  Am I misinterpreting Tableau's capabilities as described in the online help article I posted, or is there a way to accomplish what I am trying to do?  I do notice that in the RED container I can click the top right triangle drop down and pick image, fit image, and center image....but when I click pick image and type URL again, I still get nothing.

               

              Thanks in advance for any help you can provide.

              Web Image vs. Image (as URL).jpg

               

              - Dan

              • 4. Re: Need Help with Resizing Web Page Image in Dasbhoard
                dan.wiley

                Jonathan - Thanks for the reply.  I posted some comments on Joshua's post.  Please let me know if you have any thoughts.

                 

                Thanks,
                Dan

                • 5. Re: Need Help with Resizing Web Page Image in Dasbhoard
                  Jonathan Drummey

                  Here's how Tableau works as best as I understand it:

                   

                  - Tableau lays out dashboards in pixels. So when using an HTML object, when you point to an HTML file (or an image) that requires a certain size layout, that's how much space it's going to take in the object. So the Google website is only showing part of the website because Google is designed for some minimum size, and images that you point to with a URL reference get cut off if they are bigger than the Tableau HTML object size.

                   

                  - The image object will only point at a local file, which is explains why you can't get use a URL to get an image, it has to be something local. Once you add the file, then you can choose how you want the image to fit.

                   

                  I don't think using image objects will get you what you want, because we can't control what displays in an image object based on an action. Not knowing what you are trying to do exactly and what access you have to the images, there are a few options I can think of:

                   

                  - Resize all the images so they will fit into your HTML object size, then use the URLs to the resized images.

                  - Create a little web app (using Javascript, Ruby, PHP, etc.) that will take an argument of an image URL, then return a set of HTML code that scales the image appropriately to fit into the HTML object.

                  - Depending on the images, you might try using custom shapes, Jewel Loree recently did a post on this: Jewel Loree » Dealing with 718 Pokemon Shapes in Tableau

                   

                  Jonathan

                  • 6. Re: Need Help with Resizing Web Page Image in Dasbhoard
                    Dan Huff

                    I have handled issues like this in the past by using shape palettes (which admittedly have their own limitations and frustrations) and actions like I have done in the attached workbook.

                     

                    Dan

                    • 7. Re: Need Help with Resizing Web Page Image in Dasbhoard
                      dan.wiley

                      Jonathan,

                       

                      I tried using the code below (example using google logo PNG) to resize the URL/JPG and it works when I save to my desktop as an HTML file and then pull up in a browser.  However, when I try to incorporate into Tableau I get an error message which says "Bad hex character".  Do you know a way around this and/or why Tableau has set it up this way?

                       

                      javascript:document.innerHTML='<html><body><img src="https://www.google.com/images/srpr/logo11w.png" height="100%" width="100%"/></body></html>';

                       

                      Thanks,
                      Dan

                      • 8. Re: Need Help with Resizing Web Page Image in Dasbhoard
                        Jonathan Drummey

                        Hi,

                         

                        I can duplicate your error when I put the code you posted into the Edit URL dialog. I don't know about putting javascript in the Edit URL dialog, maybe Dan Huff knows more about that.

                         

                        Whenever I've used web objects with custom HTML files I create the HTML files on a separate webserver or put them inside the Tableau server - see Accessing the Web Server in Tableau Server | Tableau Software. On Tableau 8.0 I tried your code in a separate HTML file that I then referenced via a URL in the Edit URL dialog, with the javascript:document.innerHTML=' I saw that string at the beginning and the '; at the end with the Google logo, when I took out the javascript I saw just the Google logo.

                         

                        Jonathan

                        • 9. Re: Need Help with Resizing Web Page Image in Dasbhoard
                          Dan Huff

                          Do your log files indicate anything about what character we are complaining about? I'm not sure to be honest if you should be able to add javascript in like this.

                           

                          I think the method Jonathan mentions might be worthwhile to test. Maybe that way you can create the same page and avoid the hex error as the code itself wont be in the URL dialog.

                           

                          Sorry I have nothing that useful to add .

                           

                          Dan

                          • 10. Re: Need Help with Resizing Web Page Image in Dasbhoard
                            dan.wiley

                            Jonathan/Dan: Thanks for all the help.  We finally solved the problem of webpage image re-sizing within the Tableau dashboard by adding an html page to Tableau server’s directory. This contains a javascript that read the GET parameter (i.e. image url) passed to this page, looks at page height and width, and sets up image dimensions accordingly. Once this was completed, to allow re-sizing of webpage images we now add the tableau server directory path to the front of the image URL....(https://tableau."companyserver".com/errors/dyn.htm?img=")+Image URL....and webpages can now be dynamically re-sized to fit any space in the dashboard.  Since javascript is browser-side execution, we need to look at compatibility with available browsers. Test worked with all 3 major browsers (IE, Mozilla, and Chrome).


                            Here is the code from the dyn.htm file we placed in the Tableau server directory:


                            <!doctype <!DOCTYPE html>

                            <html>

                            <head>

                            <title>test</title>

                            <style type="text/css">

                            body.noscroll

                            {

                                position: fixed;

                                overflow-x: hidden;

                                overflow-y: hidden;

                                width: 100%;

                            }

                            </style>

                            <script type="text/javascript">

                              var imgUrl;

                              function fn()

                              {

                              document.compatMode=='CSS1Compat'

                              imgUrl = window.location.search.replace( "?", "" );

                              imgUrl = imgUrl.replace("img=","");

                              //window.alert(imgUrl);

                              var w = document.body.offsetWidth;

                              var h = document.documentElement.offsetHeight;

                              var h2 = document.body.offsetHeight;

                              var h3 = window.innerHeight;

                              if(h < h2) {

                              h = h2;

                              }

                              if(h3 != 'undefined' && h < h3) {

                              h = h3;

                              }

                              //window.alert(h3);

                              document.getElementById('myImage').src = imgUrl

                              document.getElementById('myImage').width = w

                              document.getElementById('myImage').height = h

                              }

                             

                              window.onresize = function() {

                              var w = document.body.offsetWidth;

                              var h = document.documentElement.offsetHeight;

                              var h2 = document.body.offsetHeight;

                              var h3 = window.innerHeight;

                              if(h < h2) {

                              h = h2;

                              }

                              if(h3 != 'undefined' && h < h3) {

                              h = h3;

                              }

                              //window.alert(h3);

                              document.getElementById('myImage').src = imgUrl

                              document.getElementById('myImage').width = w

                              document.getElementById('myImage').height = h

                              }

                            </script>

                            </head>

                            <body onload="fn()" class="noscroll">

                            <img src='<%= request.getParameter("img") %>' id="myImage" alt="Click to open image in new window"/>

                            </body>

                             

                             

                            </html>

                            2 of 2 people found this helpful
                            • 12. Re: Need Help with Resizing Web Page Image in Dasbhoard
                              Marc de Courcel

                              Hi everyone,

                              I am facing exactly the same issue but I use Tableau Online instead of Tableau Server. So I have no idea where I should paste this code ... Any help would be much appreciated

                              Many thanks in advance!

                              Marc

                              • 13. Re: Need Help with Resizing Web Page Image in Dasbhoard
                                Ron Padzensky

                                I am using Tableau Public and face your same dilemma. The remedy I have implemented is painstaking but it works.

                                1. Go to Wikimedia Commons (create an account if you don't already have one)
                                2. Add each image one by one. Add requisite metadata.
                                3. A url will be generated for this image, however this is still original size so don't reference this...
                                4. Click on the link beneath the thumbnail image
                                5. Use the url for the thumbnail image as your reference. This will provide uniform sizing

                                 

                                One caveat is this process will not create thumbnail sized images that are already small to begin with (threshold unknown). Your alternative option is to size all of your images before uploading them to wiki commons (or any other image source site)

                                • 14. Re: Need Help with Resizing Web Page Image in Dasbhoard
                                  Benjamin Williams

                                  This unfortunately doesn't work for me.

                                  I tried to save the file in:

                                  • C:\Program Files\Tableau\Tableau Server\9.3
                                  • C:\Program Files\Tableau\Tableau Server\9.3\apache
                                  • C:\Program Files\Tableau\Tableau Server\9.3\apache\error
                                  • C:\Program Files\Tableau\Tableau Server\9.3\vizqlserver
                                  • C:\Program Files\Tableau\Tableau Server\9.3\vizqlserver\public\v_93001603150125

                                  But none of the locations worked.

                                  Does anyone has a hint for me, where I should save the dyn.htm file?

                                  1 2 Previous Next