Mira/flask_blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

inject css

Browse Source
This commit is contained in:
m
2026-03-25 05:03:29 +01:00
parent 9a83309d36
commit 20fce270a5
5 changed files with 39 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app.py
View File

@@ -106,20 +106,32 @@ def about():
return render_template('about.html', about_txt = about_txt, blog_title = TITLE) return render_template('about.html', about_txt = about_txt, blog_title = TITLE)
@app.route('/post/<int:post_id>') @app.route('/post/<int:post_id>')
def post_detail(post_id): def post_detail(post_id):
# One call to get the data + the extra logic (templates/timelines) context = {"used_components": set()}
post = get_enriched_post(post_id, BLOG_POSTS)
post = get_enriched_post(post_id, BLOG_POSTS)
if not post: if not post:
return "Post not found", 404 return "Post not found", 404
comments = get_comments_for_post(post_id) comments = get_comments_for_post(post_id)
return render_template('post_detail.html', post=post, comments=comments, blog_title = TITLE) context["used_components"].add("image")
#processed_content = render_content(post['content'], context=context)
css_files = []
for comp in context["used_components"]:
css_files.append(f"css/components/{comp}.css")
return render_template(
"post_detail.html",
post=post,
comments=comments,
blog_title = TITLE,
component_css=css_files
)
@app.route('/content/image/<path:filename>') @app.route('/content/image/<path:filename>')

2
content

Submodule content updated: bf7589d017...e565d6fc60

16
static/css/components/image.css Normal file
View File

@@ -0,0 +1,16 @@
.image-container {
margin-top: 10px;
margin-bottom: 10px;
width: 100%;
height: 20vh; /* Show 20% of the viewport height */
overflow: hidden; /* Hide parts of the image outside the container */
position: relative; /* Position context for the image */
}
.image-container img {
width: 100%; /* Make the image fit the container width */
height: auto; /* Maintain aspect ratio */
position: absolute; /* Position image relative to container */
top: 50%; /* Move image down by 50% of its height */
transform: translateY(-50%); /* Pull it back up by 50% of its own height */
}

21
templates/base.html
View File

@@ -45,26 +45,7 @@
}; };
</script> </script>
<script src="{{ url_for('static', filename='js/timeline.js') }}"></script> <script src="{{ url_for('static', filename='js/timeline.js') }}"></script>
<style> <style></style>
.image-container {
margin-top: 10px;
margin-bottom: 10px;
width: 100%;
height: 20vh; /* Show 20% of the viewport height */
overflow: hidden; /* Hide parts of the image outside the container */
position: relative; /* Position context for the image */
}
.image-container img {
width: 100%; /* Make the image fit the container width */
height: auto; /* Maintain aspect ratio */
position: absolute; /* Position image relative to container */
top: 50%; /* Move image down by 50% of its height */
transform: translateY(
-50%
); /* Pull it back up by 50% of its own height */
}
</style>
</head> </head>
<body> <body>

6
templates/post_detail.html
View File

@@ -1,5 +1,7 @@
{% extends "base.html" %} {% block title %}{{ post.title }} - Simple Blog {% for css in component_css %}
Template{% endblock %} {% block content %} {% from <link rel="stylesheet" href="{{ url_for('static', filename=css) }}" />
{% endfor %} {% extends "base.html" %} {% block title %}{{ post.title }} -
Simple Blog Template{% endblock %} {% block content %} {% from
"components/post_renderer.html" import render_post %} {% from "components/post_renderer.html" import render_post %} {% from
"components/comment_renderer.html" import render_comment %} "components/comment_renderer.html" import render_comment %}
<div class="row"> <div class="row">