Autogenerate project preview images for Open Graph #1886
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <style> | ||
| * { | ||
| box-sizing: border-box; | ||
| color: #1f2d3d; | ||
| font-weight: 600; | ||
| font-family: 'SegoeUI', 'Montserrat', 'Helvetica', sans-serif; | ||
| padding: 0; | ||
| margin: 0; | ||
| } | ||
|
|
||
| body { | ||
| width: 320px; | ||
| height: 180px | ||
| } | ||
|
|
||
| .main-wrapper { | ||
| width: 100%; | ||
| height: 100%; | ||
| position: relative; | ||
| display: flex; | ||
| align-items: start; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .main-content { | ||
| width: -webkit-fill-available; | ||
| } | ||
|
|
||
| .project-title { | ||
| font-size: 1.2em; | ||
| text-align: left; | ||
| padding-bottom: 0.5rem; | ||
| font-weight: 600; | ||
| border-bottom: 0.5px solid #1f2d3d; | ||
| } | ||
|
|
||
| .project-tagline { | ||
| padding-top: 0.3rem; | ||
| font-size: 0.7rem; | ||
| font-weight: 300; | ||
| } | ||
| .title-wrapper{ | ||
| line-height: 1.2; | ||
| text-align: left; | ||
| padding: 0.75em; | ||
| } | ||
|
|
||
| .organization-label{ | ||
| font-size: 0.4rem; | ||
| text-transform: uppercase; | ||
| padding-bottom: 0.1rem; | ||
| } | ||
|
|
||
|
|
||
| .datetime-wrapper { | ||
| position: absolute; | ||
| font-size: 0.5rem; | ||
| left: 1.35em; | ||
| bottom: 1.2em; | ||
| gap: 4rem; | ||
| text-align: left; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <main class="main-wrapper" id="container"> | ||
| <div class="main-content"> | ||
| <div class="title-wrapper"> | ||
| <h5 class="organization-label">{{project.account.title}}</h5> | ||
| <h1 class="project-title">{{ project.title }}</h1> | ||
| <div class="project-tagline"> | ||
| {{ project.tagline }} | ||
| </div> | ||
| </div> | ||
| <div class="datetime-wrapper"> | ||
| <p>{{ project.datelocation }}</p> | ||
| <p>{{ project.primary_venue.title }}</p> | ||
| </div> | ||
| </div> | ||
| </main> | ||
| <script> | ||
| const randomizeIndex = (count) => { | ||
| return Math.floor(count * Math.random()); | ||
| }; | ||
| const randomizeElements = (hueList) => { | ||
| const uniqueHuePair = new Set(); | ||
| let hueCount = hueList.length; | ||
| let randomIndex; | ||
| let hue; | ||
| while (uniqueHuePair.size < 2) { | ||
| randomIndex = randomizeIndex(hueCount); | ||
| hue = hueList[randomIndex]; | ||
| uniqueHuePair.add(hue); | ||
| } | ||
| return uniqueHuePair; | ||
| }; | ||
|
There was a problem hiding this comment. Set doesn't allow duplicate |
||
|
|
||
| window.addEventListener("load", () => { | ||
| var hueValues = [5, 23, 39, 48, 92, 172, 201, 220, 273, 335] | ||
| huePair = Array.from(randomizeElements(hueValues)); | ||
| console.log(huePair); | ||
| var gradient = `linear-gradient(to bottom right, hsl(${huePair[0]}, 100%, 87%), hsl(${huePair[0]+(huePair[1]-huePair[0])*0.33}, 100%, 87%), hsl(${huePair[0]+(huePair[1]-huePair[0])*0.66}, 100%, 87%), hsl(${huePair[1]}, 100%, 87%))`; | ||
| document.getElementById("container").style.background = gradient; | ||
| }) | ||
|
There was a problem hiding this comment. Same. Move the JS part to a new preview.js file under assets/js. Include it in webpack.config.js |
||
| </script> | ||
| </body> | ||
| </html> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -38,6 +38,7 @@ | |
| shortlink, | ||
| siteadmin, | ||
| sitemap, | ||
| thumbnails, | ||
| ticket_event, | ||
| ticket_participant, | ||
| update, | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| """View for autogenerating thumbnail previews.""" | ||
|
|
||
| from __future__ import annotations | ||
|
|
||
| import os | ||
| import tempfile | ||
|
|
||
| from flask import render_template | ||
| from html2image import Html2Image | ||
|
|
||
| from ..models import Project, db | ||
| from ..signals import project_data_change | ||
| from .jobs import rqjob | ||
|
|
||
|
|
||
| @project_data_change.connect | ||
| def redo_project_preview_image(project: Project) -> None: | ||
| render_project_preview_image.queue(project_id=project.id) | ||
|
|
||
|
|
||
| @rqjob() | ||
| def render_project_preview_image(project_id: int) -> None: | ||
| """Generate a project preview image.""" | ||
| project = Project.query.get(project_id) | ||
| if project is None: | ||
| return | ||
|
|
||
| fd, temp_filepath = tempfile.mkstemp('.png') | ||
| os.close(fd) | ||
| temp_dir, temp_filename = os.path.split(temp_filepath) | ||
| hti = Html2Image(size=(320, 180), output_path=temp_dir) | ||
| html_src = render_template('preview/project.html.jinja2', project=project) | ||
| screenshot_files = hti.screenshot(html_str=html_src, save_as=temp_filename) | ||
|
|
||
| if screenshot_files: | ||
| with open(screenshot_files[0], mode='rb') as file: | ||
| project.preview_image = file.read() | ||
| db.session.commit() | ||
|
|
||
| for each_screenshot in screenshot_files: | ||
| os.remove(each_screenshot) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| from io import BytesIO | ||
|
|
||
| import pytest | ||
| from magic import from_buffer | ||
| from PIL import Image | ||
|
|
||
| from funnel.views.thumbnails import render_project_preview_image | ||
|
|
||
|
|
||
| @pytest.mark.usefixtures('project_expo2011', 'all_fixtures') | ||
| def test_preview_image_jobs(project_expo2011) -> None: | ||
| assert project_expo2011.preview_image is None | ||
| render_project_preview_image(project_id=project_expo2011.id) | ||
| assert project_expo2011.preview_image is not None | ||
|
|
||
|
|
||
| @pytest.mark.usefixtures('project_expo2011', 'all_fixtures') | ||
| def test_preview_image_size_mimeytpe(project_expo2011) -> None: | ||
| render_project_preview_image(project_id=project_expo2011.id) | ||
| with Image.open(BytesIO(project_expo2011.preview_image)) as preview_image: | ||
| assert preview_image.size == (1280, 720) | ||
| image_mimetype = from_buffer( | ||
| BytesIO(project_expo2011.preview_image).read(2048), mime=True | ||
| ) | ||
| assert image_mimetype == 'image/png' |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can move these to a new
preview.scssfile underassets/sass/pages