View Issue Details

IDProjectCategoryView StatusLast Update
999RackTablesdefaultpublic2015-10-09 07:03
Reporteroernii Assigned To 
PrioritylowSeverityfeatureReproducibilityhave not tried
Status newResolutionopen 
Summary999: add pictures to objects
DescriptionI'd like to be able to add pictures to objects, which could be displayed as scaled background of the table cells.
TagsNo tags attached.

Activities

melpheos

melpheos

2013-09-16 08:03

reporter   ~0001753

You can already do that via add files, picture will show on the first tab
infrastation

infrastation

2013-09-17 15:18

administrator   ~0001759

This issue is about TD background.
adoom42

adoom42

2013-10-05 23:39

administrator   ~0001817

I'm not sure how to do what you are requesting. Please view the appropriate page in RackTables, save the contents as HTML, make your desired modifications to the file, then attach both the HTML and image to this issue.
oernii

oernii

2013-10-07 11:37

reporter   ~0001831

I've attached the files
oernii

oernii

2013-10-07 11:37

reporter  

rack.html (13,219 bytes)   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>RACK 1</title>
<link rel="stylesheet" type="text/css" href="http://demo.racktables.org/?module=chrome&uri=css/pi.css">
</head>
<body>
<div class="maintable">
 <div class="mainheader">
  <div style="float: right" class="greeting"><a href="/racktables/index.php?page=myaccount&amp;tab=default">RackTables Administrator</a> [ <a href="/racktables/index.php?logout">logout</a> ]</div>
 MyCompanyName RackTables <a href="http://racktables.org/" title="Visit RackTables site">0.20.5</a><ul class="qlinks"><li><a href="/racktables/index.php?page=depot">Objects</a></li><li><a href="/racktables/index.php?page=ipv4space">IPv4&nbsp;space</a></li><li><a href="/racktables/index.php?page=rackspace">Rackspace</a></li></ul> </div>
 <div class="menubar"><div class="searchbox" style="float:right"><form name="search" method="get"><input name="page" value="search" type="hidden"><input name="last_page" value="rack" type="hidden"><input name="last_tab" value="default" type="hidden"><label>Search:<input name="q" size="20" tabindex="1000" type="text"></label></form></div><a href="/racktables/index.php?page=index&amp;tab=default">Main page</a> : <a href="/racktables/index.php?page=rackspace&amp;tab=default">Rackspace</a> : <a href="/racktables/index.php?row_id=26&amp;page=row&amp;tab=default">serverovna</a> : <a href="/racktables/index.php?rack_id=27&amp;page=rack&amp;tab=default">RACK 1</a></div>
 <div class="tabbar"><div class="greynavbar"><ul id="foldertab" style="margin-bottom: 0px; padding-top: 10px;"><li><a class="current" href="/racktables/index.php?page=rack&amp;tab=default&amp;rack_id=27">View</a></li>
<li><a class="std" href="/racktables/index.php?page=rack&amp;tab=edit&amp;rack_id=27">Properties</a></li>
<li><a class="std" href="/racktables/index.php?page=rack&amp;tab=log&amp;rack_id=27">Log</a></li>
<li><a class="std" href="/racktables/index.php?page=rack&amp;tab=design&amp;rack_id=27">Design</a></li>
<li><a class="std" href="/racktables/index.php?page=rack&amp;tab=problems&amp;rack_id=27">Problems</a></li>
<li><a class="std" href="/racktables/index.php?page=rack&amp;tab=files&amp;rack_id=27">Files</a></li>
</ul></div></div>
 <div class="msgbar"></div>
 <div class="pagebar"><table class="objectview" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="pcleft"><div class="portlet"><h2>summary</h2><table border="0" cellpadding="3" cellspacing="0" width="100%">
<tbody><tr><th class="tdright" width="50%">Rack row:</th><td class="tdleft">serverovna</td></tr><tr><th class="tdright" width="50%">Name:</th><td class="tdleft">RACK 1</td></tr><tr><th class="tdright" width="50%">Height:</th><td class="tdleft">42</td></tr><tr><th class="tdright" width="50%">% used:</th><td class="TDLeft"><img title="9%" src="http://demo.racktables.org/index.php?module=progressbar&done=33" height="10" border="0" width="100"></td></tr><tr><th class="tdright" width="50%">Objects:</th><td class="tdleft">1</td></tr></tbody></table>
</div>
</td><td class="pcright"><div class="portlet"><h2>Rack diagram</h2><center><table border="0"><tbody><tr valign="middle"><td><h2><a href="/racktables/index.php?page=row&amp;row_id=26">serverovna</a> :</h2></td><td><a href="/racktables/index.php?page=rack&amp;rack_id=29"><img src="http://demo.racktables.org/index.php?module=chrome&uri=pix/tango-go-previous.png" title="previous rack" height="32" border="0" width="32"></a></td><td><h2><a href="/racktables/index.php?page=rack&amp;rack_id=27">RACK 1</a></h2></td></tr></tbody></table>
<table class="rack" border="0" cellpadding="1" cellspacing="0">
<tbody><tr><th width="10%">&nbsp;</th><th width="20%">Front</th><th width="50%">Interior</th><th width="20%">Back</th></tr>
<tr><th>42</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>41</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>40</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>39</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>38</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>37</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>36</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>35</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>34</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>33</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>32</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>31</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>30</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>29</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>28</th><td class="atom state_T" colspan="3" rowspan="4" style="background-size: 100% 100%;background-image: url(hp.jpg);  opacity:0.7; filter:alpha(opacity=70); "><div title="no asset tag, visible label is &quot;test server&quot;"><a href="/racktables/index.php?page=object&amp;object_id=30" style="color: white;">testserver</a></div></td></tr>
<tr><th>27</th></tr>
<tr><th>26</th></tr>
<tr><th>25</th></tr>
<tr><th>24</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>23</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>22</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>21</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>20</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>19</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>18</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>17</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>16</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>15</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>14</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>13</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>12</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>11</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>10</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>9</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>8</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>7</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>6</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>5</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>4</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>3</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>2</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>1</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
</tbody></table>
</center>
</div>
</td></tr></tbody></table></div>
</div>


</body></html>
rack.html (13,219 bytes)   
oernii

oernii

2013-10-07 11:37

reporter  

hp.jpg (53,246 bytes)   
hp.jpg (53,246 bytes)   
cyb3rwulf

cyb3rwulf

2013-11-22 13:07

reporter   ~0001961

Racktables don't show you the racks from front / backview. So it's not so easy to add this in an useful way.

What will happen if you have in the front/mid a server and in the back a small switch? you wont be able to see anything.

In my opinion you need to add a different table that shows only front / back of the rack, based on the current one, to add these pictures in a meaningful way.
mbrydon

mbrydon

2013-12-09 13:29

reporter   ~0002017

Noting the previous point I think it would still be a very useful feature to have, as would probably only want to have a picture on something that uses the full font/interior/back space.
It would definitely persuade anyone still trying to use visio to create their layouts that racktables is all you really need.
brkdncr

brkdncr

2014-02-20 02:28

reporter   ~0002187

How about showing the visual on mouse-over of the equipment? There is other software that does show the front/rear of the cabinent with equipment photos, and the equipment photo is linked to the HW type so you only need to upload a single photo for the same hardware ID. It may be useful to have a front view/rear view, and possible the option to replace the existing display with the photo display.
NazZaR

NazZaR

2015-10-09 07:03

reporter   ~0002993

I would like to have this functionality too. It is very convenient to have visualized racks, like it is shown in attached file 'rack.html' above.
I don't think that it is too hard to implement. Just an image, filled in the box.

Issue History

Date Modified Username Field Change
2013-08-21 17:53 oernii New Issue
2013-09-16 08:03 melpheos Note Added: 0001753
2013-09-17 15:18 infrastation Note Added: 0001759
2013-10-05 23:39 adoom42 Note Added: 0001817
2013-10-05 23:39 adoom42 Status new => feedback
2013-10-07 11:37 oernii Note Added: 0001831
2013-10-07 11:37 oernii Status feedback => new
2013-10-07 11:37 oernii File Added: rack.html
2013-10-07 11:37 oernii File Added: hp.jpg
2013-11-22 13:07 cyb3rwulf Note Added: 0001961
2013-12-09 13:29 mbrydon Note Added: 0002017
2014-02-20 02:28 brkdncr Note Added: 0002187
2015-10-09 07:03 NazZaR Note Added: 0002993