towards njp.ma

app/settings.py

@@ -145,12 +145,12 @@ DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
 
 GEOIP_PATH = BASE_DIR / 'geo'
 
-DEFAULT_PANDORA_API = "https://pad.ma/api/"
+DEFAULT_PANDORA_API = "https://archive.njp.ma/api/"
 
-URL_PREFIX = 'polis+'
+URL_PREFIX = ''
 
-CONTACT_TO_EMAIL = 'polis@phantas.ma'
+CONTACT_TO_EMAIL = 'contact@njp.ma'
-CONTACT_FROM_EMAIL = 'polis@phantas.ma'
+CONTACT_FROM_EMAIL = 'contact@njp.ma'
 
 try:
     from .local_settings import *

app/static/css/partials/_film.scss

@@ -3,7 +3,8 @@
   box-sizing: border-box;
 
   a {
-    color: #ee0;
+    color: #000;
+    font-size: 12px;
     text-decoration: none;
   }
 
@@ -12,13 +13,30 @@
     font-family: "noto_sans", sans-serif;
     padding: calc(var(--spacing) /4) var(--spacing);
   }
+  #films-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+  }
 
   .film {
+    width: calc(100% / 4 - 16px);
     margin-top: var(--spacing-2);
     h1 {
       font-weight: bold;
       font-size: 20px;
     }
+    figure {
+      img {
+        display: none;
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+      }
+      img:first-child {
+        display: inherit
+      }
+    }
   }
   @media screen and (max-width: 799px) {
     .film {
@@ -59,10 +77,26 @@ main > .film {
       font-size: 18px;
       margin-top: var(--spacing-2);
     }
-    .bio {
+  }
-      margin-top: var(--spacing-2);
+
-      div {
+  .videos {
-        margin-top: var(--spacing);
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    justify-content: center;
+    .video {
+      width: calc(100% / 4 - 16px);
+      figure {
+        img {
+          max-width: 100%;
+          max-height: 100%;
+          object-fit: contain;
+        }
+      }
+    }
+    @media screen and (max-width: 799px) {
+      .video {
+        width: 100%;
       }
     }
   }
@@ -117,7 +151,6 @@ main > .film {
     z-index: 200;
 
     a {
-      color: #ee0;
       text-decoration: none;
       font-weight: 700;
     }

app/static/css/partials/_layout.scss

@@ -36,17 +36,17 @@
 }
 
 body.animated {
-    background: var(--gradient-body);
+    //background: var(--gradient-body);
-    animation: background_animation 60s ease-in-out infinite;
+    //animation: background_animation 60s ease-in-out infinite;
     background-size: 400% 100%;
     color: #ddd;
 }
 
 body.animated-text {
-    animation: text_animation 60s ease-in-out infinite;
+    //animation: text_animation 60s ease-in-out infinite;
 }
 body.animated.animated-text {
-    animation: background_animation 60s ease-in-out infinite, text_animation 60s ease-in-out infinite;
+    //animation: background_animation 60s ease-in-out infinite, text_animation 60s ease-in-out infinite;
 }
 
 body {

app/static/css/partials/_titleanimation.scss

@@ -16,11 +16,11 @@
 
 .animated-title {
   .text, .text-about {
-    background-image: linear-gradient(to right, var(--animated-title-color-1), var(--animated-title-color-2) , var(--animated-title-color-3), var(--animated-title-color-4));
+    //background-image: linear-gradient(to right, var(--animated-title-color-1), var(--animated-title-color-2) , var(--animated-title-color-3), var(--animated-title-color-4));
-    -webkit-background-clip: text;
+    //-webkit-background-clip: text;
-    background-clip: text;
+    //background-clip: text;
-    color: transparent;
+    //color: transparent;
-    animation: animated_title_animation 60s ease-in-out infinite;
+    //animation: animated_title_animation 60s ease-in-out infinite;
     background-size: 400% 100%;
   }
 }

app/static/js/films.js

@@ -24,10 +24,22 @@ function selectChanged() {
     })
 }
 
-document.getElementById('sort-select').addEventListener('change', selectChanged)
+//document.getElementById('sort-select').addEventListener('change', selectChanged)
 
 const locationHash = location.hash.replace('#', '')
 if (locationHash !== '') {
     document.getElementById('sort-select').value = locationHash
     selectChanged()
 }
+
+document.querySelectorAll('.films .film figure').forEach(figure => {
+    var imgs = figure.querySelectorAll('img')
+    if (imgs.length > 1) {
+        console.log('needs updates', figure)
+        setInterval(() => {
+            var img = figure.querySelector('img')
+            img.parentElement.appendChild(img)
+            console.log('change img', img, figure.querySelector('img'))
+        }, 5000)
+    }
+})

app/templates/about.html

@@ -1,161 +1,11 @@
 {% extends "base.html" %}
-{% block title %}About 關於{% endblock title %}
+{% block title %}About{% endblock title %}
 {% block body_class%}body--about animated animated-text{% endblock %}
 {% block main %}
 <div class="about">
-    <h1 class="font-bold">The video art programme of the Asian Art Biennial</h1>
-    <h1 class="font-bold">亞洲藝術雙年展錄像計畫</h1>
-    <div>Curated by Anushka Rajendran</div>
-    <p>策展人    安努舒卡．拉堅德蘭</p>
-    <div>Presented by Pad.ma</div>
-    <p>網站製作團隊     Pad.ma</p>
-  <div class="row">
-    <div class="col col--about">
-      <div class="about-phantasma-block">
-        <p><a href="/polis">Phantas.ma/polis</a>, is the new location for the video art programme of the biennial, “Looking Back to the Future”. Using the time-based annotation, timeline views and edit features of <a href="https://pad.ma">Pad.ma</a>, <a href="/polis">Phantas.ma/polis</a> showcases the participating artists’ videos along with extended commentaries by the curator, artists and critics. Over the duration of the biennial,
-        <a href="/polis">Phantas.ma/polis</a> will evolve to bring the artworks in conversation with each other through both formal and interpretative recombinations of the featured works.</p>
-
-        <p>The title <em>Phantasmapolis</em> is a newly coined Greek word comprising “phantasma” (phantom) and “polis” (city-state) inspired by <em>Phantasmagoria</em>, an English sci-fi novel by architect Wang Dahong. Treating “Asian futurisms”  as its main theme, the <strong>2021 Asian Art Biennial</strong> <em>“Phantasmapolis”</em> seeks to review Asia’s past and present from the perspective of science fiction.</p>
-
-        <p>Curated by Anushka Rajendran, “Phantasmapolis: Looking back to the future” considers alterities and futurisms whose traces endure in our present—often inherited from the past—that were denied existence, or threatened by various dominant apparatuses of power. A series of moving image works articulate their concerns in the grammatical premise determined by the future-past tense, excavating the cyclical nature of time and latencies residing in the interstices of time as experienced in the contemporary.</p>
-
-        <p>The artworks present in this exhibition, even as they maintain scepticism towards techno-fetishistic, development-philic, heteronormative, non-inclusive paradigms for the future, propelled in the interest of capital and by the anaemic premise inscribed by the idea of progress, they do not deny the possibility of reorienting civilizational creativity and resilience towards reconsiderations.</p>
-
-        <p>The online platform that hosts this exhibition conceptualized and drawn from <a href="https://pad.ma">Pad.ma</a> proposes alternative ways of deepening the connectivity and democratic possibilities that can exist vis-à-vis the internet towards ethical digital infrastructures to engage intimately with art.</p>
-      </div>
-    </div>
-    <div class="col col--about">
-      <div class="about-phantasma-block about-phantasma-block--zh">
-        <p><a href="/polis">Phantas.ma/polis</a> 為本屆亞洲藝術雙年展的錄像藝術單元「回望未來」（Looking Back to the Future）的專屬網站，其時基注釋、時間軸、剪輯等特色，於線上呈現參展藝術家的錄像作品，並搭配策展人、藝術家、藝評家的深度評論和活潑精彩的每日節目規畫。雙年展期間，<a href="/polis">Phantas.ma/polis</a> 將會持續演化，藉由將展出作品在形式上和詮釋面上的重新組合，讓作品間產生對話。</p>
-
-        <p>展覽標題「Phantasmapolis」一詞是新造的希臘字，分別由「Phantasma」（幻影、魅影）及「Polis」（城邦）所組構而成。「Phantasmapolis」一詞的靈感來自於建築家王大閎所撰寫的英文科幻小說《Phantasmagoria》（中譯《幻城》）。2021亞洲藝術雙年展「未至之城」嘗試以「亞洲未來主義」作為主軸，透過科幻文學視角重新省視亞洲的過去與當下。</p>
-
-        <p>錄像計畫「未至之城：回望未來」由安努舒卡．拉堅德蘭策展，該計劃想像各種被主流勢力所阻擋、威脅的未來景觀，而許多的「未來」在當前世界裡已出現蛛絲馬跡。展覽中一系列的動態影像以「未來過去式」探索各種議題，深掘當代時間感知的循環特性，以及時間間隙當中的潛在可能。</p>
-
-        <p>雖然展覽中的作品對於科技迷戀、發展導向、異性戀觀點、對未來的排他敘事、受資本驅動、進步導向的貧乏敘事提出質疑，藝術家仍然願意透過文明創造力與韌性，重新探索不同未來可能。</p>
-        <p>呈現此計畫的網路平台之發想與概念來自 <a href="https://pad.ma">Pad.ma</a>，該平台提倡以另類的方式，讓數位介面的藝術體驗更具有連結性也更民主。</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="about-bios">
-    <div class="about-phantasma-block">
-        <ul class="accordion">
-            <li>
-                <label for="bio-anushka" class="accordion-title">
-                   <h3>Anushka Rajendran <br>安努舒卡．拉堅德蘭</h3>
-                   <span class="accordion-caret animated-title"><span class="text-about">&#xe901;</span></span>
-                </label>
-                <input type="checkbox" id="bio-anushka" class="accordion-checkbox">
-                <div class="accordion-content">
-                    <div class="row">
-                        <div class="col col--bios">
-                            <p><strong>Anushka Rajendran</strong> is a curator and art writer based in New Delhi. She is the curator for the Prameya Art Foundation (PRAF), a non-profit arts organization based in New Delhi committed to approaches that enable audience-thinking for contemporary art in India. She is also the Festival Curator of the 2021 edition of Colomboscope and was assistant curator for Kochi-Muziris Biennale 2018. As a research scholar, Anushka is completing her PhD in Visual Studies at the School of Arts and Aesthetics, Jawaharlal Nehru University, New Delhi. Her research traces how the notion of ‘public’ has acquired alternative significance to contemporary Indian art. Her previous MPhil research focused on the adoption of installation art by artists in India in the early 1990s to address collective and personal trauma. For her curatorial practice, she has been awarded fellowships that supported residencies with Fundación Sandretto Re Rebaudengo Madrid; Aomori Contemporary Art Center, Aomori, Japan; the International Studio & Curatorial Program (ISCP), New York (by Inlaks Shivdasani Foundation); and Theertha International Artists’ Collective, Colombo.</p>
-                        </div>
-                        
-                        <div class="col col--bios col--bios-zh">
-                            <p><strong>安努舒卡．拉堅德蘭</strong>，現居於新德里的獨立策展人、藝術評論者。曾為2018年柯欽雙年展（Kochi Biennale）之助理策展人，同時也是現任普拉美亞藝術基金會（Prameya Art Foundation） 策展人，這是個非營利的藝術組織，致力作為印度當代藝術與觀眾之橋樑。Anushka現正於印度新德里國立尼赫魯大學（Jawaharlal Nehru University）研讀視覺研究博士學位，她的研究領域包括：追溯2004年迄今當代印度藝術中公共意義的轉變，以及1990年代初期印度藝術家如何透過繪畫、雕塑回應個人及集體的創傷。安努舒卡曾於日本青森當代藝術中心、紐約國際工作室策展計畫（簡稱ISCP）及哥倫波等地駐村。2021年將擔任斯里蘭卡哥倫坡三年展（Colomboscope）之共同策展人。</p>                            
-                        </div>
-                    </div>
-                </div>
-            </li>
-
-            <li>
-                <label for="bio-padma" class="accordion-title">
-                   <h3>Pad.ma</h3>
-                   <span class="accordion-caret animated-title"><span class="text-about">&#xe901;</span></span>
-                </label>
-                <input type="checkbox" id="bio-padma" class="accordion-checkbox">
-                <div class="accordion-content">
-                    <div class="row">
-                        <div class="col col--bios">
-                             <p><a href="https://pad.ma"><strong>Pad.ma</strong></a> is an artist-run online archive of densely text-annotated video material, primarily footage and not finished films contributed by filmmakers, artists and cultural workers. It was set up in 2008 as a collaboration between CAMP, 0x2620, the Alternative Law Forum and Majlis. Pad.ma (and her allied projects) remain at the forefront of radical and future-oriented thinking and engagement with both material and theory of digital archives.</p>
-
-                            <p><a href="https://studio.camp"><strong>CAMP</strong></a> is a collaborative studio founded in Bombay in 2007. It has been producing fundamental new work in film and video, electronic media, and public art forms, in a practice characterised by a hand-dirtying, non-alienated relation to technology. From their home base in Mumbai, they co-host the online archives <a href="https://pad.ma">Pad.ma</a> and <a href="https://indiancine.ma">indiancine.ma</a> and run a rooftop cinema for the past 14 years.</p>
-
-                            <p>Founded in 2010 in Berlin, <a href="https://0x2620.org"><strong>0x2620</strong></a> is an artist-run agency for the advancement of the international exchange of information, and usually operates at the intersections of art, politics and technology. Its activities include extensive research on intellectual property and piracy, the development of open-source software tools and web applications, and the production of both technological and social infrastructure for the collaborative creation, maintenance and use of relatively large data sets.</p>                        
-                        </div>
-                        <div class="col col--bios col--bios-zh">
-                            <p><a href="https://pad.ma"><strong>Pad.ma</strong></a> 公眾存取數位媒體檔案庫（Public Access Digital Media Archive ，簡稱Pad.ma）是一個為密集文字標注影片素材所設立的線上檔案庫。其營運團隊成員皆為藝術家，彙整內容主要為電影創作者、藝術家、文化工作者提供的影片資料帶和未完成的影片。2008年正式上線的Pad.ma為CAMP、0x2620、另類法律論壇、Majlis共同合作而成。Pad.ma（與其他相關計畫）激進、以未來為導向的思考模式多年來始終如一，並積極投入數位檔案的素材與理論的研究。
-                            </p>
-
-
-                            <p><a href="https://studio.camp"><strong>CAMP</strong></a>為2007年成立於孟買的合作型工作室。其創作一向與技術維持近距親身的接觸，和不排斥不疏離的關係，並秉持此一精神與作法，不斷推出電影及錄像、電子媒體、公共藝術等類型的全新作品。他們以設址於孟買的總部為據點，執行線上資料庫Pad.ma和Indiancine.ma的聯合運作，其於14年前開辦的屋頂電影院至今依舊照常營運。</p>
-
-                            <p><a href="https://0x2620.org"><strong>0x2620</strong></a> 2010年成立於柏林，是一個為促進國際資訊交流而建立的藝術家營運機構，擅長處理藝術、政治、技術之間所產生的交集與碰撞塊。活動包括在智慧財產與盜版、開放源軟體工具及網路應用程式的開發、合作性創作、相對巨量數據集的維護及使用等多方面的研究。</p>
-                        </div>
-                    </div>
-                </div>
-            </li>
-            <li>
-                <label for="bio-annotation" class="accordion-title">
-                   <h3>Annotation Collaborators <br>影片評論共筆</h3>
-                   <span class="accordion-caret animated-title"><span class="text-about">&#xe901;</span></span>
-                </label>
-                <input type="checkbox" id="bio-annotation" class="accordion-checkbox">
-                <div class="accordion-content">
-                    <div class="row">
-                        <div class="col col--bios">
-                            <p><strong>Yang Yu-Chiao</strong> is a researcher on oral literature, narratology and folktale poetics, and is also a narrator of Taiwanese folktales in the oral tradition. Yu-Chiao also created several performances drawing from storytelling, poetry, writing actions, and experimental sounds with artists working with different media including digital, film, and classical music since 2017.  Yu-Chiao has published several works including a series of tales that demonstrate characters in oracle bone script.</p>
-                            <p><strong>Chen Wan-Yin</strong> is an art critic and a writer. She is currently a Ph.D. researcher on media aesthetics and East Asian contemporary art at Vrije Universiteit Amsterdam. She previously worked as an editor of Artist Magazine (Taipei) from 2014 to 2017 and since 2015, she has also been working as a scriptwriter with video artist Hsu Che-Yu.</p>
-                        </div>
-                        <div class="col col--bios col--bios-zh">
-                            <p><strong>楊雨樵</strong>，喜歡散步，喜歡樹的屍骨。專職為口頭傳統民間譚的言說藝術表演者與獨立撰稿人，並從事口傳文學、戲劇與電影的敘事學、故事詩學與比較故事學研究。除開設「世界民間譚」展演式講座外，2017 年開始以言說藝術表演者身份，和聲音、影像領域的藝術家合作，發展如《聲熔質變——Anamorphosis & Anatexis》的實驗性系列演出至今。出版過數本以甲骨文為對象的文學創作，其他文章散見於紙本刊物與網路平台。</p>
-                            <p><strong>陳琬尹</strong>，現為阿姆斯特丹自由大學藝術史與文化學系博士生，研究關注東亞現當代藝術史與媒介美學，曾任多年藝術雜誌編輯。</p>
-                        </div>
-                    </div>
-                </div>
-            </li>
-            <li>
-                <label for="bio-acknowledgements" class="accordion-title">
-                   <h3>Acknowledgements <br>致謝</h3>
-                   <span class="accordion-caret animated-title"><span class="text-about">&#xe901;</span></span>
-                </label>
-                <input type="checkbox" id="bio-acknowledgements" class="accordion-checkbox">
-                <div class="accordion-content">
-                    <div class="row">
-                        <div class="col col--bios">
-                            <p>Nobuo Takamori, Ho Yu-Kuan, Ye Renyu and Liao Chia-Cheng, Karen Menezes.</p>
-                        </div>
-                        <div class="col col--bios col--bios-zh">
-                            <p>高森信男、侯昱寬、葉人瑜與廖嘉誠、Karen Menezes</p>
-                        </div>
-                    </div>
-                </div>
-            </li>
-            <li>
-                <label for="bio-contact" class="accordion-title">
-                   <h3>Contact <br>聯絡</h3>
-                   <span class="accordion-caret animated-title"><span class="text-about">&#xe901;</span></span>
-                </label>
-                <input type="checkbox" id="bio-contact" class="accordion-checkbox">
-                <div class="accordion-content">
-                  <div class="contact" id="contact-container">
-                    <form id="contact-form" method="post">
-                        <label for="input-email">Your Email</label>
-                        <input name="email" type="email" id="input-email" required>
-                        
-                        <label for="input-msg">Message 訊息</label>
-                        <textarea name="message" id="input-msg" required></textarea>
-                        
-                        <input type="submit" value="Send Message 傳送訊息">
-                        {% csrf_token %}
-                    </form>
-                  </div>
-                </div>
-            </li>
-        </ul>
-    </div>
-    <br>
-  </div>
-  <br>
-  <p>The video art programme of the <a href="https://www.asianartbiennial.org/2021en/">Asian Art Biennial</a> is organized by National Taiwan Museum of Fine Arts, supervised by the Ministry of Culture, and is co-organized by the Cultural Taiwan Foundation and in partnership with SEA Plateau.</p>
-
-  <p><a href="https://www.asianartbiennial.org/2021/">亞洲藝術雙年展</a>錄像計畫由國立臺灣美術館策劃，文化部指導、財團法人文化臺灣基金會支持、SEA plateaus協力。</p>
 </div>
 {% endblock %}
 
 {% block end %}
     <script src="{% static 'js/about.js' %}"></script>
-
 {% endblock %}

app/templates/base.html

@@ -5,7 +5,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 		<title>
 		    {% block title %}
-			Phantas.ma/polis - Looking Back to the Future
+			Nam June Paik - Media Archive
             {% endblock title %}
         </title>
         <link href="{% sass_src 'css/style.scss' %}" rel="stylesheet" type="text/css">
@@ -13,18 +13,15 @@
 	</head>
 	<body class="{% block body_class%}{% endblock %}">
 		<div class="topnav">
-		  <a href="/polis" class="title animated-title">
+		  <a href="/" class="title animated-title">
 				<div class="title-text text">
-				Phantas.ma/polis<span class="hide-mobile">: Looking Back to the Future</span>
+				njp.ma
-				</div>
-				<div class="text">
-					未至之城<span class="hide-mobile">：回顧未來</span>
 				</div>
 		  </a>
 		  <nav>
-			  <a href="{% url 'films'%}" class="animated-title"><span class="text">films <span class="hide-mobile">-</span> 影片</span></a>
+			  <a href="{% url 'films'%}" class="animated-title"><span class="text">films</a>
-			  <a href="{% url 'texts' %}" class="animated-title"><span class="text">assemblies <span class="hide-mobile">-</span> 選集</span></a>
+			  <a href="{% url 'texts' %}" class="animated-title"><span class="text">assemblies</a>
-			  <a href="{% url 'about' %}" class="animated-title"><span class="text">about <span class="hide-mobile">-</span> 關於</span></a>
+			  <a href="{% url 'about' %}" class="animated-title"><span class="text">about</a>
 		  </nav>
 		</div>
         <main>

app/templates/contact.html

@@ -1,20 +1,20 @@
 {% extends "base.html" %}
-{% block title %}Contact 聯絡{% endblock title %}
+{% block title %}Contact{% endblock title %}
 {% block body_class%}animated animated-text{% endblock %}
 {% block main %}
 <div class="contact">
 	{% if submitted %}
 		Thanks for your message
 	{% else %}
-	<h1>Contact 聯絡</h1>
+	<h1>Contact</h1>
 	<form method="post">
 		<label for="input-email">Your Email</label>
 		<input name="email" type="email" id="input-email" required>
 		
-		<label for="input-msg">Message 訊息</label>
+		<label for="input-msg">Message</label>
 		<textarea name="message" id="input-msg" required></textarea>
 		
-		<input type="submit" value="Send Message 傳送訊息">
+		<input type="submit" value="Send Message">
 		{% csrf_token %}
 	</form>
 	{% endif %}

app/templates/film.html

@@ -1,25 +1,22 @@
 {% extends "base.html" %}
 {% block head %}
-	<meta name="title" content="{{ film.data.title }} {{ film.data.tile.zh }}"/>
+	<meta name="title" content="{{ film.data.title }}"/>
 	<meta name="description" content="{% for director in film.data.director %}{{ director|safe }}{% endfor %}"/>
-	<meta content="{{ stream_prefix }}{{ film.padma_id }}/loop.jpg" name="thumbnail"/>
-	<meta content="{{ stream_prefix }}{{ film.padma_id }}/loop.jpg" name="image_src"/>
 
 	<meta property="og:title" content="{{ film.data.title }} {{ film.data.tile.zh }}"/>
 	<meta property="og:type" content="movie"/>
 	<meta property="og:url" content="https://phantas.ma{{ film.get_absolute_url }}"/>
-	<meta property="og:image" content="{{ stream_prefix }}{{ film.padma_id }}/loop.jpg"/>
 	<meta property="og:site_name" content="Phantas.ma"/>
 	<meta property="og:description" content="{% for director in film.data.director %}{{ director|safe }}{% endfor %}"/>
 
 	<meta property="twitter:card" content="summary_large_image"/>
 	<meta property="twitter:title" content="{{ film.data.title }} {{ film.data.tile.zh }}"/>
 	<meta property="twitter:description" content="{% for director in film.data.director %}{{ director|safe }}{% endfor %}"/>
-	<meta property="twitter:image" content="{{ stream_prefix }}{{ film.padma_id }}/loop.jpg"/>
 
 {% endblock head %}
 {% block body_class%}animated{% endblock %}
 {% block main %}
+{% comment %}
 <style>
 :root {
 	--bg-color-1: {{ film.color_1 }};
@@ -34,29 +31,24 @@ body {
 
 </style>
 
+{% endcomment %}
 <div class="film">
 	<div class="info">
 		<div class="info-meta">
 			<h1>
 				<span class="font-bold">{{ film.data.title | safe }}</span>
-				<span>{{ film.data.title_zh | safe }}</span>
 			</h1>
-			<h2>
-				{% for director in film.data.director %}
-				{{ director|safe }}<br>
-				{% endfor %}
-			</h2>
 			<div class="details">
-				{% if film.data.date %} {{ film.data.date}}, {% endif %} {{ film.duration }}
+				{{ film.data.description|default:'' }}
             </div>
 				
 		</div>	
 		<div class="video-block">	
-			<img src="{{ stream_prefix }}{{ film.padma_id }}/loop.jpg" class="video-fallback-block">
+			<img src="{{ stream_prefix }}{{ film.items.0.id }}/loop.jpg" class="video-fallback-block">
 			<video
 				id="timeline-video"
-				src="{{ stream_prefix }}{{ film.padma_id }}/loop.mp4"
+				src="{{ stream_prefix }}{{ film.items.0.id }}/loop.mp4"
-				poster="{{ stream_prefix }}{{ film.padma_id }}/loop.jpg"
+				poster="{{ stream_prefix }}{{ film.items.0.id }}/loop.jpg"
 				controlsList="nodownload"
 				autoplay
 				loop
@@ -69,26 +61,26 @@ body {
                 <br>
             <p>{{ film.data.summary_zh|safe }}</p>
         </div>
-		<div class="bio-block">
+		<div class="videos">
-			<div class="bio">
+			{% for item in film.data.items %}
-				<div class="en">
+			<div class="video">
-					{{film.data.director.0}}: {{ film.data.bio|safe }}
+				<a href="fixme">
-				</div>
+					<figure>
-				<div class="zh">
+					<img src="https://archive.njp.ma/{{ item.id }}/480p.jpg">
-					{{film.data.director.1}}: {{ film.data.bio_zh|safe }}
+					<figcaption>
-				</div>
+						{{ item.title | safe }}
+					</figcaption>
+					</figure>
+				</a>
 			</div>
+			{% endfor %}
 		</div>
 		<div class="play">
-			<div class="film-play-block">
+			<div class="film-play-padma"><a href="{{ film.pandora_url }}" target="_blank">Open in Archive</a></div>
-				<div><a href="" id="play-fullscreen" class="icon-play"><span class="animated-title"><span class="text">&#xe901;</span></span></a></div>
-				<div class="film-play-spacer">OR</div>
-				<div class="film-play-padma"><a href="https://pad.ma/{{ film.padma_id }}/info" target="_blank">View on Pad.ma</a></div>
-			</div>
 		</div>
 		{% if film.related_texts.exists %}
 		<div class="texts">
-			<h2>Related Assemblies 相關選集</h2>
+			<h2>Related Assemblies</h2>
 			{% for text in film.related_texts %}
 			<div class="text">
 				<a href="{{ text.get_absolute_url }}">

app/templates/film_play.html

@@ -5,7 +5,7 @@
 {% block end %}
 <script>
 	var film = {
-		id: "{{ film.padma_id }}",
+		id: "{{ film.pandora_id }}",
 	}
 </script>
 <script src="/static/js/ascroll.js"></script>

app/templates/films.html

@@ -26,15 +26,18 @@
 			data-saturation="{{ film.data.saturation }}"
 			data-lightness="{{ film.data.lightness }}"
 		>
-			<h1><a href="{{ film.get_absolute_url }}">
+		<a href="{{ film.get_absolute_url }}">
-				<span>{{ film.data.title | safe }}</span>
+		<figure>
-				<span>{{ film.data.title_zh | safe }}</span>
+			<div>
-			</a></h1>
+		{% for item in film.data.items %}
-			<h2>
+			<img src="https://archive.njp.ma/{{ item.id }}/480p.jpg">
-				{% for director in film.data.director %}
+		{% endfor %}
-				<span>{{ director|safe }}</span>
+			</div>
-				{% endfor %}
+		<figcaption>
-			</h2>
+			{{ film.data.title | safe }}
+		</figcaption>
+		</figure>
+		</a>
 		</div>
 	{% endfor %}
 	</div>
@@ -42,5 +45,5 @@
 {% endblock %}
 
 {% block end %}
-	<!-- <script src="{% static 'js/films.js' %}"></script> -->
+	<script src="{% static 'js/films.js' %}"></script>
 {% endblock %}

app/templates/index-alt.html

@@ -1,141 +0,0 @@
-{% extends "base.html" %}
-{% block body_class%}body--home{% endblock %}
-{% block head %}
-	<style type="text/css">
-		.body--home {
-			display: flex;
-			flex-direction: column;
-			background-color: #000;
-			min-height: 100vh;
-		}
-
-		.body--home main {
-			margin:  auto;
-		}
-		
-		.body--home h2 {
-			font-size: 20px;
-			color: #fff;
-		}
-
-		@font-face { 
-	        font-family: "wrong font"; 
-	        src: url("https://files.pad.ma/ttf/wrongfont.woff") format("woff"); 
-	    } 
-
-		h1 {
-		    font-family: "wrong font";
-		    margin: auto;
-		    font-weight: normal;
-		    color: yellow;
-		    font-size: 52px;
-		    font-weight: bold;
-		}
-		
-		.h1-en-home {
-			line-height: 1.2;
-		}
-
-		.h1-zh-home {
-			font-size: 42px;			
-		}
-
-		@media screen and (min-width: 800px) {
-			h1 {
-				font-size: 66px;
-			}
-
-			.h1-zh-home {
-				font-size: 50px;
-			}
-		}
-
-		@keyframes rainbow_animation {
-		    0%,100% {
-		        background-position: 0 0;
-		    }
-
-		    50% {
-		        background-position: 100% 0;
-		    }
-		}
-
-		.topnav {
-			background-color: transparent;
-			order: 10;
-			font-weight: 700;
-		}
-
-		.topnav a.title {
-			display: none;
-		}
-
-		.topnav nav {
-			margin: auto;
-		}
-
-		.topnav nav .text .hide-mobile {
-			display: none;
-		}
-
-		.topnav a {
-			font-size: 16px;
-			border-bottom: 1px solid rgba(255, 255, 255, 0.5);
-		}
-
-		@media screen and (min-width: 800px) {
-			.topnav a {
-				font-size: 20px;
-			}
-		}
-
-		main > .index {
-			font-size: 18px;
-			line-height: 1.5;
-			padding: 0 16px;
-		}
-
-		.rainbow_text_animated {
-		    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
-		    -webkit-background-clip: text;
-		    background-clip: text;
-		    color: transparent;
-		    animation: rainbow_animation 6s ease-in-out infinite;
-		    background-size: 400% 100%;
-		}
-
-	</style>
-{% endblock head %}
-{% block main %}
-<div class="index">
-	<h1 class="h1-en-home rainbow rainbow_text_animated">Phantasmapolis</h1>
-	<h2>Looking back to the future</h2><br>
-	<h1 class="h1-zh-home rainbow rainbow_text_animated">未至之城</h1>
-	<p>回望未來</p>
-
-	<div class="font-bold">Video art programme</div>
-	<p2>2021 Asian Art Biennale</p>
-	
-	<div class="font-bold">錄像計畫</div>
-	<p>2021亞洲藝術雙年展</p>
-	<p>2021.10.30 - 2022.3.6</p>
-
-	<div><a href="{% url 'films'%}" class="animated-title font-bold h3"><span class="text">Films</span></a></div>
-	<p>21 films on subjects from animism to zoology</p>
-	
-	<div><a href="{% url 'films'%}" class="animated-title h3">亞洲藝術雙年展</a></div>
-	<p>回望未來<p>
-
-	<div><a href="{% url 'texts' %}" class="animated-title font-bold h3"><span class="text">Assemblies</span></a></div>
-	<p>31 sequences of commentary on clips within or across film</p>
-	
-	<div><a href="{% url 'texts'%}" class="animated-title h3">亞洲藝術雙年展</a></div>
-	<p>回望未來<p>
-
-	<div><a href="{% url 'about' %}" class="animated-title font-bold h3"><span class="text">About</span></a></div>
-	<p>phantas.ma/polis is a ...</p>
-	
-	<div><a href="{% url 'about'%}" class="animated-title h3">亞洲藝術雙年展</a></div>
-	<p>回望未來<p>
-</div>
-{% endblock %}

app/templates/index.html

@@ -20,27 +20,15 @@
 {% block body_class%}animated animated-text body--home{% endblock %}
 {% block main %}
 <div class="index">
-	<h1 class="h1-en-home">Phantasmapolis</h1>
+	<h1 class="h1-en-home">njp.ma</h1>
-	<p>Looking back to the future</p>
+	<p></p>
-	
-	<h1 class="h1-zh-home">未至之城</h1>
-	<p>回望未來<p>
-	
-	<div class="font-bold">Video art programme 錄像計畫</div>
-	<p class="margin-reset">Asian Art Biennale 2021</p>
-	<p>2021亞洲藝術雙年展</p>
-	<p class="font-size-sm">2021.10.30 - 2022.3.6<p>
 	
 	<div class="font-size-sm">
-		<div class="h3"><a href="{% url 'films'%}" class="font-bold">Films 影片</a></div>
+		<div class="h3"><a href="{% url 'films'%}" class="font-bold">Films</a></div>
-		<p class="margin-reset">{{ films }} films on Asian futures, past and present</p>
-		<p>{{ films }}部關於亞洲未來、過去與現在的影片<p>
 
-		<div class="h3"><a href="{% url 'texts' %}" class="font-bold">Assemblies 選集</a></div>
+		<div class="h3"><a href="{% url 'texts' %}" class="font-bold">Assemblies</a></div>
-		<p class="margin-reset">{{ texts }} video essays within or across films</p>
-		<p>{{ texts}}篇影像隨筆與解析<p>
 
-		<div class="h3"><a href="{% url 'about' %}" class="font-bold">About 關於</a></div>
+		<div class="h3"><a href="{% url 'about' %}" class="font-bold">About</a></div>
 	</div>
 </div>
 {% endblock %}

app/templates/texts.html

@@ -3,23 +3,13 @@
 {% block main %}
 
 <div class="texts">
-	<div class="assemblies row">
+	<div class="assemblies">
-		<div class="col">
+		{% for text in texts %}
-			{% for text in en_texts %}
+		<div class="text">
-			<div class="text en">
+			<h1><a href="{{ text.get_absolute_url }}">{{ text.title | safe }}</a></h1>
-				<h1><a href="{{ text.get_absolute_url }}">{{ text.title | safe }}</a></h1>
+			<h2>{{ text.byline|striptags }}</h2>
-				<h2>{{ text.byline|striptags }}</h2>
-			</div>
-			{% endfor %}
-		</div>
-		<div class="col">
-			{% for text in zh_texts %}
-			<div class="text zh">
-				<h1><a href="{{ text.get_absolute_url }}">{{ text.title | safe }}</a></h1>
-				<h2>{{ text.byline|striptags }}</h2>		
-			</div>
-			{% endfor %}
 		</div>
+		{% endfor %}
 	</div>
 </div>
 {% endblock %}

app/text/models.py

@@ -174,7 +174,7 @@ class Text(models.Model):
         if not item_id:
             item_id = self.data.get('item')
         if item_id:
-            item = Film.objects.filter(padma_id=item_id).first()
+            item = Film.objects.filter(pandora_id=item_id).first()
             if item:
                 for key in ('title', 'title_zh', 'director'):
                     data['item_' + key] = item.data[key]

app/text/views.py

@@ -19,10 +19,6 @@ def index(request):
     context['texts'] = Text.objects.filter(public=True).count()
     return render(request, 'index.html', context)
 
-#def index_alt(request):
-    #context = {}
-    #return render(request, 'index-alt.html', context)
-
 def page(request, slug=''):
     context = {}
     if request.user.is_staff:
@@ -42,8 +38,7 @@ def about(request):
 def texts(request):
     context = {}
     all_texts = models.Text.objects.filter(public=True).order_by('position', 'created')
-    context['en_texts'] = all_texts.filter(language='en')
+    context['texts'] = all_texts.filter()
-    context['zh_texts'] = all_texts.filter(language='zh')
     return render(request, 'texts.html', context)
 
 def text(request, slug):

app/video/management/commands/load_titles.py

@@ -3,6 +3,13 @@ from django.conf import settings
 import ox
 from ... import models
 
+
+def escape(key):
+    return key.replace('%', '%25').replace('&', '%26').replace('_', '%09').replace(' ', '_').replace('<', '%0E').replace('>', '%0F')
+
+def escape_slug(key):
+    return key.replace('%', '').replace('&', '-').replace('_', '-').replace(' ', '-').replace('<', '').replace('>', '').lower()
+
 class Command(BaseCommand):
     help = 'import titles from pan.do/ra'
 
@@ -12,38 +19,42 @@ class Command(BaseCommand):
 
     def handle(self, *args, **options):
         api = ox.api.signin(options['api'])
+
         query = {
             'query': {
-                'conditions': [{'key': 'groups', 'value': options['group'], 'operator': '=='}]
             },
             'keys': [
                 'id', 'title', 'director', 'summary', 'source', 'sourcedescription', 'date', 'location',
                 'duration', 'featuring', 'cinematographer',
                 'hue', 'saturation', 'lightness',
+                'folder', 'folderdescription'
             ],
             'range': [0, 1000]
         }
+        folders = {}
         for item in api.find(**query)['data']['items']:
-            print(item)
+            if item['folder'] not in folders:
-            f, c = models.Film.objects.get_or_create(padma_id=item['id'])
+                folders[item['folder']] = {
+                    'title': item['folder'],
+                    'description': item['folderdescription'],
+                    'url': api.url.replace('/api/', '/grid/folder==' + escape(item['folder'])),
+                    'items': [],
+                }
+            del item['folderdescription']
+            if item['summary'] == folders[item['folder']]['description']:
+                item['summary'] = ''
+            folders[item['folder']]['items'].append(item)
+
+        for item in folders.values():
+            if not item['description'] and len(item['items']) == 1:
+                item['description'] = item['items'][0]['summary']
+                item['items'][0]['summary'] = ''
+            f, c = models.Film.objects.get_or_create(pandora_url=item['url'])
             for key, value in item.items():
-                if key == 'title':
+                if key != 'url':
-                    if ' / ' in value:
-                        f.data['title'], f.data['title_zh'] = value.split(' / ', 1)
-                    else:
-                        f.data['title'] = value
-                        f.data['title_zh'] = ''
-                elif key == 'summary':
-                    f.data['summary'], f.data['summary_zh'] = value.split('<br><br>', 1)
-                elif key == 'sourcedescription':
-                    if '<br><br>' in value:
-                        f.data['bio'], f.data['bio_zh'] = value.split('<br><br>', 1)
-                    else:
-                        f.data['bio'] = f.data['bio_zh'] = value
-                elif key != 'id':
                     f.data[{
                     }.get(key, key)] = value
             if c:
                 f.public = True
-            f.slug = item['id']
+            f.slug =  escape_slug(item['title'])
             f.save()

app/video/migrations/0001_initial.py

@@ -1,4 +1,4 @@
-# Generated by Django 3.2.7 on 2021-09-28 12:09
+# Generated by Django 3.2.9 on 2021-11-12 09:35
 
 from django.db import migrations, models
 
@@ -11,20 +11,6 @@ class Migration(migrations.Migration):
     ]
 
     operations = [
-        migrations.CreateModel(
-            name='Edit',
-            fields=[
-                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
-                ('created', models.DateTimeField(auto_now_add=True)),
-                ('modified', models.DateTimeField(auto_now=True)),
-                ('slug', models.SlugField()),
-                ('public', models.BooleanField(default=False)),
-                ('padma_id', models.CharField(max_length=1024)),
-                ('annotation_user', models.CharField(max_length=1024)),
-                ('vimeo_id', models.CharField(default=None, max_length=255, null=True)),
-                ('data', models.JSONField(default=dict)),
-            ],
-        ),
         migrations.CreateModel(
             name='Film',
             fields=[
@@ -33,9 +19,9 @@ class Migration(migrations.Migration):
                 ('modified', models.DateTimeField(auto_now=True)),
                 ('slug', models.SlugField()),
                 ('public', models.BooleanField(default=False)),
-                ('padma_id', models.CharField(max_length=255)),
+                ('position', models.IntegerField(default=0)),
-                ('vimeo_id', models.CharField(default=None, max_length=255, null=True)),
+                ('pandora_url', models.CharField(max_length=1024)),
-                ('data', models.JSONField(default=dict)),
+                ('data', models.JSONField(blank=True, default=dict)),
             ],
         ),
     ]

app/video/migrations/0002_auto_20210930_1527.py

@@ -1,23 +0,0 @@
-# Generated by Django 3.2.7 on 2021-09-30 15:27
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('video', '0001_initial'),
-    ]
-
-    operations = [
-        migrations.AlterField(
-            model_name='edit',
-            name='data',
-            field=models.JSONField(blank=True, default=dict),
-        ),
-        migrations.AlterField(
-            model_name='film',
-            name='data',
-            field=models.JSONField(blank=True, default=dict),
-        ),
-    ]

app/video/migrations/0003_film_position.py

@@ -1,18 +0,0 @@
-# Generated by Django 3.2.7 on 2021-10-11 12:47
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('video', '0002_auto_20210930_1527'),
-    ]
-
-    operations = [
-        migrations.AddField(
-            model_name='film',
-            name='position',
-            field=models.IntegerField(default=0),
-        ),
-    ]

app/video/migrations/0004_alter_film_vimeo_id.py

@@ -1,18 +0,0 @@
-# Generated by Django 3.2.7 on 2021-10-23 09:46
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('video', '0003_film_position'),
-    ]
-
-    operations = [
-        migrations.AlterField(
-            model_name='film',
-            name='vimeo_id',
-            field=models.CharField(blank=True, null=True, default=None, max_length=255),
-        ),
-    ]

app/video/models.py

@@ -20,8 +20,7 @@ class Film(models.Model):
     public = models.BooleanField(default=False)
     position = models.IntegerField(default=0)
 
-    padma_id = models.CharField(max_length=255)
+    pandora_url = models.CharField(max_length=1024)
-    vimeo_id = models.CharField(max_length=255, default=None, blank=True, null=True)
 
     data = models.JSONField(default=dict, blank=True)
 
@@ -33,7 +32,9 @@ class Film(models.Model):
 
     def related_texts(self):
         from ..text.models import Text
-        return Text.objects.filter(Q(data__item=self.padma_id) | Q(data__related=self.padma_id))
+        folder = self.data.get('title')
+        if folder:
+            return Text.objects.filter(Q(data__folder=folder) | Q(data__related=folder))
 
     def duration(self):
         return ox.format_duration(self.data['duration'] * 1000, verbosity=1, milliseconds=False)
@@ -68,23 +69,8 @@ class Film(models.Model):
 
     def json(self):
         data = {}
-        data['id'] = self.padma_id
+        data['url'] = self.pandora_url
         #data.update(self.data)
         return json.dumps(data)
 
 
-class Edit(models.Model):
-    created = models.DateTimeField(auto_now_add=True)
-    modified = models.DateTimeField(auto_now=True)
-
-    slug = models.SlugField()
-    public = models.BooleanField(default=False)
-
-    padma_id = models.CharField(max_length=1024)
-    annotation_user = models.CharField(max_length=1024)
-    vimeo_id = models.CharField(max_length=255, default=None, null=True)
-
-    data = models.JSONField(default=dict, blank=True)
-
-    def __str__(self):
-        return self.data.get('title', self.slug)