link to mugshots

media/css/trog3.css

@@ -677,3 +677,60 @@ a.deletelink:link, a.deletelink:visited {
 a.deletelink:hover {
     color: #993333;
 }
+
+/* POPUP IMG */
+/*HOVER POPUP LINKS*/
+
+/*hoverpopups type 1*/
+/*
+<a href="/folk/i/2022/philip_balister.jpg">
+<popup><td align=right>&#128515;<img src='/folk/i/2022/philip_balister.jpg'></td></popup>
+</a>
+*/
+
+popup { color: #000;  }
+
+popup:hover {
+    color: blue;
+	background-color: #e9e9e2; 
+}
+
+table td popup:hover {
+    color: blue;
+	background-color: #e9e9e2; 
+}
+
+popup img {
+	display: none;
+}
+
+table td popup:hover img {
+	display: flex;
+	position: absolute;
+	top: 10%;
+	left: 50%;
+        float: right;
+	margin: 0px;
+	padding: 10px;
+	color: #335500;
+	font-weight: normal;
+	background: #e5e5e5;
+	text-align: left;
+	border: 1px solid #666;
+}
+
+popup:hover img {
+	display: flex;
+	position: relative;
+        float: right;
+	top: 0px;
+	/*left: 170px;*/
+	width: 15%;
+	margin: 0px;
+	padding: 10px;
+	color: #335500;
+	font-weight: normal;
+	background: #e5e5e5;
+	text-align: left;
+	border: 1px solid #666;
+}

templates/expedition.html

@@ -25,6 +25,7 @@
 <li> <a href="/years/{{expedition.year}}/{{expedition.logbookfile}}">full logbook</a> for this Expo
 <li> <a href="/logreport/{{expedition.year}}">logbook report</a> for this Expo
 <li> <a href="/logbookedit/">new logbook entry</a> for this Expo
+</ul>
 {% if logged_in %}
 <p>Reparse and reload this year's logbook by clicking here: <a href="/expedition/{{expedition.year}}?reload">RELOAD</a>
 {% endif %}
@@ -45,17 +46,30 @@ an "<b>S</b>" for a survey trip.  The colours of the "<b>T</b>" and "<b>S</b>" a
 {% endfor %}
 </tr> 
 {% for personexpoday in personexpodays|dictsort:"sortname" %}
-  <tr>
-  <td><a href="{{ personexpoday.personexpedition.get_absolute_url }}">{{personexpoday.personexpedition.person.fullname|safe}}</a></td>
  
-<td>{% if personexpoday.personexpedition.person.mug_shot %}
+
-<div align=right><a href="{{personexpoday.personexpedition.person.mug_shot}}">&#128515;</a></div>
+  <tr>
+
+  <td>
+  <a href="{{ personexpoday.personexpedition.get_absolute_url }}">{{personexpoday.personexpedition.person.fullname|safe}}</a></td>
+
+{% if personexpoday.personexpedition.person.mug_shot %}
+    <!-- Such a godawful kludge I'm almost proud of it -->
+   <td align=right><popup><a href="{{personexpoday.personexpedition.person.mug_shot}}">&#128515;</a><img style="width:150px; 
+   {% with c=forloop.counter %}
+   top:{{500|add:c|add:c|add:c|add:c|add:c|add:c|add:c|add:c|add:c|add:c|add:c|add:c|add:c|add:c|add:c|add:c|add:c|add:c|add:c|add:c|add:c}}px" 
+   {% endwith %}
+   href="{{personexpoday.personexpedition.person.mug_shot}}" src="{{personexpoday.personexpedition.person.mug_shot}}"></popup></td>
+
 {% else %}
  {% if personexpoday.personexpedition.person.blurb %}
+ <td align=right>
  <a href="{{personexpoday.personexpedition.person.get_mugshot_url}}">&#128513;</a>
- {% endif %}
-{% endif %}
  </td>
+ {% else %}<td></td>
+ {% endif %}
+{% endif %}
+
   {% for activities in personexpoday.personrow %}
 
   {% if activities.personentries or activities.survexblocks %}
@@ -78,6 +92,7 @@ an "<b>S</b>" for a survey trip.  The colours of the "<b>T</b>" and "<b>S</b>" a
   {% endif %}
  
   {% endfor %}
+
   </tr>
 {% endfor %}
 </table>