|
|
You can already do that via add files, picture will show on the first tab |
|
|
|
This issue is about TD background. |
|
|
|
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. |
|
|
|
I've attached the files |
|
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&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 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&tab=default">Main page</a> : <a href="/racktables/index.php?page=rackspace&tab=default">Rackspace</a> : <a href="/racktables/index.php?row_id=26&page=row&tab=default">serverovna</a> : <a href="/racktables/index.php?rack_id=27&page=rack&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&tab=default&rack_id=27">View</a></li>
<li><a class="std" href="/racktables/index.php?page=rack&tab=edit&rack_id=27">Properties</a></li>
<li><a class="std" href="/racktables/index.php?page=rack&tab=log&rack_id=27">Log</a></li>
<li><a class="std" href="/racktables/index.php?page=rack&tab=design&rack_id=27">Design</a></li>
<li><a class="std" href="/racktables/index.php?page=rack&tab=problems&rack_id=27">Problems</a></li>
<li><a class="std" href="/racktables/index.php?page=rack&tab=files&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&row_id=26">serverovna</a> :</h2></td><td><a href="/racktables/index.php?page=rack&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&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%"> </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"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>41</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>40</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>39</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>38</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>37</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>36</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>35</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>34</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>33</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>32</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>31</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>30</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>29</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </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 "test server""><a href="/racktables/index.php?page=object&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"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>23</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>22</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>21</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>20</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>19</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>18</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>17</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>16</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>15</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>14</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>13</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>12</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>11</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>10</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>9</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>8</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>7</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>6</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>5</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>4</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>3</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>2</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
<tr><th>1</th><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td><td class="atom state_F"><div title="Free rackspace"> </div></td></tr>
</tbody></table>
</center>
</div>
</td></tr></tbody></table></div>
</div>
</body></html>
|
|
oernii
2013-10-07 11:37
reporter
|
|
|
|
|
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. |
|
|
|
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. |
|
|
|
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. |
|
|
|
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. |
|
