Inserting Responsive images on CDE dashboards – which way do you like ? Inserting through HTML option OR Images options ?

Hi Guys,

This post will talk about inserting images to the CDE dashboard .. It's just not only talk about inserting images but also talk about Responsiveness of the images which should fit in Mobile devices.

Now, it's a Mobile world...... Oooppss...!!! I don't have a one yet... Oh..!!! No, I have desktop/laptop browsers :-) Thank god...

What you will learn in this post are..........

1) Where to take the images in folder structure of your project ?
2) How to generate URL for the images ?
3) What are the different ways to insert images on CDE dashboard ?
4) How to make images Responsive using Bootstrap CSS ?

Software Ready:
C-Tools of Trunk Version : (after 14.06.18)
Pentaho 5.0.1 stable or 5.1.0 evaluation Community.
Mozilla/Chrome browsers...

Step 1: Folder Structure to keep your images for a project.
a) Let's assume you are creating a project Under “Public” folder.
b) Create a folder to keep all of your images in your project..
   For example:
Public/Explore/CDEExploring/UploadingImage/Images

Images is the folder to keep all your images to take on CDE dashboards.

c) Just hold the mouse on Images folder(high light it) and then click on Upload from Folder Action Panel.
d) Refresh the browser and check the image files, in “Files” panel of “Images” folder.
For instace : fifaImage1.jpg is the file uploaded
c) Currently, the upload is accepting .jpg and .png image files but not .jpeg. (Not tested with other image extensions).

Step 2: Check whether the images are available properly or not..
a) Go click on the image file from Files section then click on “Open in New Window” from Folder Action section.
b) You should be able to see the image in a new window.(It looks as it is as the original image).
c) You can find the URL generated for the image ..
For example : The URL for particular image looks like below sample.

http://localhost:8085/pentaho/api/repos/:public:Explore:CDEExploring:Developement:UploadingImage:Images:fifaImage.png/content

(my pentaho port is 8085 but the actual port is 8080 for new readers).

Steps3 : Ways of inserting the images on CDE dashboard.
There are 3 ways(as per my knowledge) to insert the images on CDE dashoboard.
They are
a) Using HTML code and locate the file.
b) Using image property available in pentaho CDE.
c) Using CSS

I'll be discussing first 2 methods.. I had already discussed inserting images using HTML code in one of my posts....Ah..!!!!  that's well but here is the matured stuff with images on CDE dashboards which will be responsive....


a) Using HTML code

Layout section (Do you think for a sample of image on the dashbaoad Datasource & Components are required to discuss ? )
1) Design Row -> Column -> html
2) Open the html editor and write below code.
  
Description :
You are going to take a panel & in the body you will be inserting the images.
Using scr attribute of img tag you will be inserting image as a normal image tag of HTML code.
Remember you need to provide the generated URL (which has already discussed in step 2) for scr..
i.e.,

src="/pentaho/api/repos/:public:Explore:CDEExploring:Developement:UploadingImage:Images:fifaImage.png/content”
You can also give the full path.... i.e.,

src=”http://localhost:8085/pentaho/api/repos/:public:Explore:CDEExploring:Developement:UploadingImage:Images:fifaImage2.png/content”
CODE
<div class="col-md-12">
<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Responsive Images Demonstration in Pentaho CDE & Tutorial on how to insert Images using Image Option OR HTML </h3>
  </div>
  <div class="panel-body">
   
    <a>
  <img src="/pentaho/api/repos/:public:Explore:CDEExploring:Developement:UploadingImage:Images:fiaImage2.png/content"></img>
    </a>
   
    <a>
    <img src="/pentaho/api/repos/:public:Explore:CDEExploring:Developement:UploadingImage:Images:fifaImage.png/content"></img>
    </a>
   
    <a>
    <img src="/pentaho/api/repos/:public:Explore:CDEExploring:Developement:UploadingImage:Images:fifaImage3.jpg/content"></img>
    </a>
   
  </div>
</div>
</div>
b) Using image property available in pentaho CDE.

Row->Column->Image (select column – observe Layout structure icons – find Image icon and click it).

Here is also, the URL's is the role..


src="/pentaho/api/repos/:public:Explore:CDEExploring:Developement:UploadingImage:Images:fifaImage.png/content”

(relative path).
(OR)

src=”http://localhost:8085/pentaho/api/repos/:public:Explore:CDEExploring:Developement:UploadingImage:Images:fifaImage.png/content”

(absolute path -full path)

Quick step Image:

Step 4: How to make this images Responsive .. Mobile supported Images for CDE Dashboard

You need to write a css snippet for the images..
Add resources from Layout structure icons .. Take a Code snippet of CSS and name it..

Write below css code.

img {
  display: inline-block;
  height: 200px;
  max-width: 100%;
}
Sample Mobile output Images :

 

Desktop output sample: 

NOTE:
When you add  images directly to the columns using Images option of CDE, you will be having full utilization of columns size.
When you add images using  HTML for columns there is slight left and right margins available ..

Preferable way for Mobile Dashboards is : Inserting images using HTML where you can have the full control of it .

Download the Example here :  Click Me...:-)
(Download from here and upload to your BA Server)


References :
1) http://pentaho-bi-suite.blogspot.in/2013/08/inserting-images-for-reports-in-pentaho.html
2) http://forums.pentaho.com/showthread.php?137993-How-to-insert-an-image-in-a-CDE-dashboard
3)  http://forums.pentaho.com/showthread.php?94022-css-and-Images-location
4)  http://forums.pentaho.com/showthread.php?165490-Need-help-with-dashboard-drill-down-url



Sadakar
BI developer

Contact me if you have a requirement on real time dashboards... :-)