edward/flickr-mail
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Add integrated Flickr search with photo selection

Browse source 
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>
This commit is contained in:
Edward Betts 2026-02-04 13:41:37 +00:00
parent 6f43cee91b
commit 08d1f9b6c4
2 changed files with 245 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

68
templates/combined.html
View file

@ -15,36 +15,62 @@
<input type="submit" value="Submit">
</form>
{% if name %}
{% if name and photos is defined and photos %}
<p>Wikipedia article: {{ name }}</p>
<p><a href="https://flickr.com/search/?view_all=1&safe_search=3&text={{ '"' + name + '"' | urlencode }}" target="_blank">Search flickr</a></p>
<p>Select a photo to compose a message:</p>
<form action="{{ url_for(request.endpoint) }}">
<input type="hidden" name="enwp" value="{{ enwp }}"></input>
<div class="mb-3">
<label for="flickr" class="form-label">Flickr URL:</label>
<input type="text" class="form-control" id="flickr" name="flickr" value="{{ flickr_url }}" required>
<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>
<input type="submit" value="Submit">
</form>
<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 %}
<p><a href="https://www.flickr.com/mail/write/?to={{nsid}}">send message</a>
<div><strong>Subject:</strong> {{ subject }} <button class="btn btn-primary" id="copy-subject">copy</button>
<div>
<h3>message
<button class="btn btn-primary" id="copy-message">copy</button>
</h3>
{% for p in lines %}
<p>{{ p }}</p>
{% endfor %}
</div>
<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>