Edward Betts
08d1f9b6c4
Instead of showing a link to search Flickr, the app now performs the search directly and displays results as a grid of thumbnails. Each photo shows the photographer's name and license (with Wikipedia-compatible licenses highlighted in green). Clicking a photo takes the user to the message composition page with the selected image displayed alongside. Includes validation to ensure image URLs are from Flickr's static servers. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
100 lines
3.6 KiB
HTML
100 lines
3.6 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Flickr mail{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
<div class="row">
|
|
<h1>Flickr mail</h1>
|
|
<form action="{{ url_for(request.endpoint) }}">
|
|
<div class="mb-3">
|
|
<label for="enwp" class="form-label">Wikipedia article URL or title:</label>
|
|
<input type="text" class="form-control" id="enwp" name="enwp" value="{{ enwp }}" required>
|
|
</div>
|
|
|
|
<input type="submit" value="Submit">
|
|
</form>
|
|
|
|
{% if name and photos is defined and photos %}
|
|
|
|
<p>Wikipedia article: {{ name }}</p>
|
|
<p>Select a photo to compose a message:</p>
|
|
|
|
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-3 mb-3">
|
|
{% for photo in photos %}
|
|
<div class="col">
|
|
<div class="card h-100">
|
|
<a href="{{ url_for(request.endpoint, enwp=enwp, flickr=photo.flickr_url, img=photo.medium_url) }}">
|
|
<img src="{{ photo.thumb_url }}" alt="{{ photo.title }}" class="card-img-top" style="aspect-ratio: 1; object-fit: cover;">
|
|
</a>
|
|
<div class="card-body p-2">
|
|
<p class="card-text small mb-1 text-truncate" title="{{ photo.realname or photo.username }}">{{ photo.realname or photo.username }}</p>
|
|
<span class="badge {{ 'bg-success' if photo.license in [4, 5, 7, 8, 9, 10] else 'bg-secondary' }}">{{ photo.license_name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<p class="text-muted small">
|
|
<a href="https://flickr.com/search/?view_all=1&text={{ '"' + name + '"' | urlencode }}" target="_blank">View full search on Flickr</a>
|
|
</p>
|
|
|
|
{% elif name and not flickr_url %}
|
|
|
|
<p>Wikipedia article: {{ name }}</p>
|
|
<p class="text-warning">No photos found. Try a different search term.</p>
|
|
<p><a href="https://flickr.com/search/?view_all=1&text={{ '"' + name + '"' | urlencode }}" target="_blank">Search on Flickr directly</a></p>
|
|
|
|
{% endif %}
|
|
|
|
{% if flickr_url %}
|
|
<div class="row">
|
|
{% if img_url %}
|
|
<div class="col-md-4 mb-3">
|
|
<a href="{{ flickr_url }}" target="_blank">
|
|
<img src="{{ img_url }}" alt="Selected photo" class="img-fluid rounded">
|
|
</a>
|
|
<p class="mt-2 small"><a href="{{ flickr_url }}" target="_blank">View on Flickr</a></p>
|
|
</div>
|
|
<div class="col-md-8">
|
|
{% else %}
|
|
<div class="col-12">
|
|
{% endif %}
|
|
<p><a href="https://www.flickr.com/mail/write/?to={{nsid}}" class="btn btn-primary">Send message on Flickr</a></p>
|
|
<div class="mb-2"><strong>Subject:</strong> {{ subject }} <button class="btn btn-sm btn-outline-secondary" id="copy-subject">copy</button></div>
|
|
<div>
|
|
<h5>Message <button class="btn btn-sm btn-outline-secondary" id="copy-message">copy</button></h5>
|
|
{% for p in lines %}
|
|
<p>{{ p }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="mt-3">Written by <a href="/">Edward Betts</a>. Source code and bug reports: <a href="https://git.4angle.com/edward/flickr-mail">https://git.4angle.com/edward/flickr-mail</div>
|
|
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
{% if subject and lines %}
|
|
<script>
|
|
var copy_subject = document.getElementById("copy-subject");
|
|
var copy_message = document.getElementById("copy-message");
|
|
var subject = {{ subject | tojson }};
|
|
var message = {{ "\n\n".join(lines) | tojson }};
|
|
|
|
copy_subject.addEventListener("click", function(e) {
|
|
navigator.clipboard.writeText(subject);
|
|
});
|
|
|
|
copy_message.addEventListener("click", function(e) {
|
|
navigator.clipboard.writeText(message);
|
|
});
|
|
|
|
</script>
|
|
{% endif %}
|
|
{% endblock %}
|