updated index based on xpub1 feedback

main
Michael Murtaugh 1 week ago
parent d320f23bb6
commit a2c7987159

@ -27,7 +27,7 @@ div.caption {
position: absolute; position: absolute;
left: -120px; left: -120px;
width: 240px; width: 240px;
} }
div.caption .corner { div.caption .corner {
width: 11px; width: 11px;
height: 11px; height: 11px;
@ -39,6 +39,7 @@ div.caption .corner {
div.caption div.captiontext { div.caption div.captiontext {
/* height: 4em; */ /* height: 4em; */
width: 100%; width: 100%;
background: white;
border: 1px solid black; border: 1px solid black;
/* top | right | bottom | left */ /* top | right | bottom | left */
padding: 0 0.3em 0.3em 0.3em; padding: 0 0.3em 0.3em 0.3em;

@ -16,6 +16,9 @@ h1 {
margin: 0 0 10px 0; margin: 0 0 10px 0;
padding: 0; padding: 0;
} }
h2 {
font-size: 28px;
}
#root { #root {
max-width: 512px; max-width: 512px;
/* white-space: nowrap; */ /* white-space: nowrap; */

@ -1,7 +1,48 @@
{% extends "call/base.html" %} {% extends "call/base.html" %}
{% load static %}
{% block extrahead %}
<link rel="stylesheet" href="{% static 'call/guestbook.css'%}">
<style>
body {
background: hsl({{bg_hue|default:"0"}}deg {{bg_sat|default:"0"}}% {{bg_lightness|default:"66"}}%);
margin: 0;
}
@page {
/* size: 2160px 3840px; */
size: 432px 768px;
margin: 0;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
#page {
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
}
div.caption div.captiontext {
font-size: 24px;
}
div.caption {
/* border: 1px solid black; */
position: absolute;
/* left: -480px;
width: 960px; */
left: -120px;
width: 240px;
}
</style>
{% endblock %}
{% block content %} {% block content %}
<img src="{{object.image.url}}"> <div id="page">
<img src="{% url 'creature_frame' object.id %}"> <div class="flex-container">
<p>{{object.caption}}</p> <div class="creature"><img src="{% url 'creature_frame' creature.id %}?cell={{cell}}"><div class="centerbottom"><div class="caption"><div class="corner"></div><div class="captiontext">{{creature.caption}}</div></div></div></div>
</div>
</div>
{% endblock %} {% endblock %}

@ -6,9 +6,37 @@
{% block content %} {% block content %}
<h1>XPUB Community Builder...</h1> <h1>Study @ XPUB!</h1>
<span id=loading>loading...</span> <span id=loading>loading...</span>
<div id=root class=rootloading> <div id=root class=rootloading>
<div id="info" style="font-family: serif !important">
<p>
The <a href="https://xpub.nl/" target="extern">Master Experimental Publishing (XPUB)</a> at the <a href="https://pzwart.nl/" target="extern">Piet Zwart Institute</a> in Rotterdam (NL) is a two-year master focused on the acts of making things public and creating publics in the age of post-digital networks.
</p>
<p>XPUB is looking for new students! Come & join us!<p>
<p>Use the <em>XPUB Community Builder</em> below to put yourself on our digital guestbook, join an upcoming open day either online or in-person, and APPLY!</p>
<p><a href="https://www.pzwart.nl/application/deadlines/" target="extern">Application deadlines</a>:</p>
<p>
<ul>
<li>March 4, 2024 (non-EU final + EU priority deadline)</li>
<li>May 8, 2024 (final EU deadline)</li>
</ul>
</p>
<p><a href="https://www.pzwart.nl/blog/open-day/" target="extern">Open days</a>:</p>
<p>
<ul>
<li>ONLINE: <a href="mailto:pzi.coordinators@hr.nl?subject=XPUB Open Day (online)&amp;body=Hello, I will join the online open day on the February 11th on 10:00 CET or 16:00 CET" target="_blank">February 11, 2024, 10:00 + 16:00 CEST</a></li>
<li>IN PERSON:<a href="https://www.pzwart.nl/blog/open-day/" target="extern">February 15, 2025</a></li>
</ul>
</p>
<p>
<button style="background: yellow" id="apply" onclick="window.open('https://www.pzwart.nl/experimental-publishing/apply/', 'extern')">Apply</button>
</p>
</div>
<h2>XPUB Community Builder</h2>
<canvas id=c width=16 height=16></canvas> <canvas id=c width=16 height=16></canvas>
<!-- <div id=caption>HERE CAPTION</div> --> <!-- <div id=caption>HERE CAPTION</div> -->
<div class="caption"><div class="corner"></div><textarea placeholder="Your messsage" autofocus id="caption"></textarea></div> <div class="caption"><div class="corner"></div><textarea placeholder="Your messsage" autofocus id="caption"></textarea></div>
@ -75,32 +103,10 @@
</p> </p>
</div> </div>
<div id="info" style="font-family: serif !important">
<p>
The <a href="https://xpub.nl/" target="extern">Master Experimental Publishing (XPUB)</a> at the <a href="https://pzwart.nl/" target="extern">Piet Zwart Institute</a> in Rotterdam (NL) is a two-year master focused on the acts of making things public and creating publics in the age of post-digital networks.
</p>
<p><a href="https://www.pzwart.nl/application/deadlines/" target="extern">Application deadlines</a>:</p>
<p>
<ul>
<li>March 4, 2024 (non-EU final + EU priority deadline)</li>
<li>May 8, 2024 (final EU deadline)</li>
</ul>
</p>
<p><a href="https://www.pzwart.nl/blog/open-day/" target="extern">Open days</a>:</p>
<p>
<ul>
<li>ONLINE: <a href="mailto:pzi.coordinators@hr.nl?subject=XPUB Open Day (online)&amp;body=Hello, I will join the online open day on the February 11th on 10:00 CET or 16:00 CET" target="_blank">February 11, 2024, 10:00 + 16:00 CEST</a></li>
<li>IN PERSON:<a href="https://www.pzwart.nl/blog/open-day/" target="extern">February 15, 2025</a></li>
</ul>
</p>
<p>
<button style="background: yellow" id="apply" onclick="window.open('https://www.pzwart.nl/experimental-publishing/apply/', 'extern')">Apply</button>
</p>
</div>
<div style="display: none"><a href="{% static 'call/terms.json'%}" id="terms-data-source"></a></div>
</div> <div style="display: none"><a href="{% static 'call/terms.json'%}" id="terms-data-source"></a></div>
</div>
<div style="display: none"> <div style="display: none">
<form enctype="multipart/form-data" method="post" action=""> <form enctype="multipart/form-data" method="post" action="">

@ -17,14 +17,14 @@ Including another URLconf
from django.contrib import admin from django.contrib import admin
from django.urls import path, include from django.urls import path, include
from call import views from call import views
from .views import Guestbook, CreatureList, CreatureDetail, creature_frame from .views import Guestbook, CreatureList, creature_detail, creature_frame
urlpatterns = [ urlpatterns = [
path("guestbook/", Guestbook.as_view(), name="guestbook"), path("guestbook/", Guestbook.as_view(), name="guestbook"),
# path("creatures/<int:pk>/s/", Statement.as_view(), name="statement"), # path("creatures/<int:pk>/s/", Statement.as_view(), name="statement"),
# path("creatures/<int:pk>/w/", Walk.as_view(), name="walk"), # path("creatures/<int:pk>/w/", Walk.as_view(), name="walk"),
path("creatures/", CreatureList.as_view(), name="creature_list"), path("creatures/", CreatureList.as_view(), name="creature_list"),
path("creatures/<int:pk>/", CreatureDetail.as_view(), name="creature_detail"), path("creatures/<int:creature_id>/", creature_detail, name="creature_detail"),
path("creatures/<int:creature_id>/frame/", creature_frame, name="creature_frame"), path("creatures/<int:creature_id>/frame/", creature_frame, name="creature_frame"),
path('', views.index) path('', views.index)
] ]

@ -5,6 +5,7 @@ from .models import Creature
from django.urls import reverse from django.urls import reverse
# from io import StringIO # from io import StringIO
from PIL import Image from PIL import Image
from random import randint, seed
def index(request): def index(request):
@ -40,15 +41,29 @@ class CreatureList(generic.ListView):
template_name = "call/creature_list.html" template_name = "call/creature_list.html"
queryset = Creature.objects.filter(published=True) queryset = Creature.objects.filter(published=True)
class CreatureDetail(generic.DetailView): def creature_detail(request, creature_id):
""" Generates Pixelated PNG of creature """ """ Generates Pixelated PNG of creature """
model = Creature context = {}
template_name = "call/creature_detail.html" context['creature'] = get_object_or_404(Creature, pk=creature_id)
context['cell'] = int(request.GET.get("cell", "0"))
seed(creature_id)
context['bg_hue'] = randint(0, 360)
context['bg_sat'] = 100
context['bg_lightness'] = randint(50, 100)
return render(request, "call/creature_detail.html", context)
def creature_frame (request, creature_id): def creature_frame (request, creature_id):
""" Generates Pixelated PNG of creature """ """ Generates Pixelated PNG of creature """
cell = int(request.GET.get("cell", "0"))
creature = get_object_or_404(Creature, pk=creature_id) creature = get_object_or_404(Creature, pk=creature_id)
im = Image.open(creature.image.path) im = Image.open(creature.image.path)
response = HttpResponse(content_type="image/png") response = HttpResponse(content_type="image/png")
scale = 6 # 24
im = im.crop((16*cell, 0, (16*cell)+16, 16))
w, h = im.size
im = im.resize((w*scale,h*scale), resample=Image.NEAREST)
im.save(response, "PNG") im.save(response, "PNG")
#im_with_background = Image.new("RGBA", (w*scale, h*scale), (128,0,0))
#im_with_background.paste(im, mask=im)
#im_with_background.save(response, "PNG")
return response return response

Loading…
Cancel
Save