spitkov/techtalk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

image fix

Browse Source
This commit is contained in:
spitkov 2024-09-23 18:00:18 -04:00
parent 87cd51a866
commit 909513f73e
4 changed files with 121 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
templates/base.html
View File

@ -68,7 +68,27 @@
background-color: inherit; background-color: inherit;
} }
</style> </style>
{% block styles %}{% endblock %} {% block styles %}
<style>
.post-image {
max-width: 200px;
max-height: 200px;
object-fit: contain;
cursor: pointer;
}
.modal-body img {
width: calc(100% - 40px);
height: auto;
margin: 20px;
}
.assets-section img {
max-width: 200px;
max-height: 200px;
object-fit: contain;
margin: 5px 0;
}
</style>
{% endblock %}
</head> </head>
<body> <body>
<div class="container mt-4"> <div class="container mt-4">
@ -148,8 +168,43 @@
</div> </div>
</div> </div>
<!-- Image Modal -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="imageModalLabel">Image</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-center">
<img id="modalImage" src="" class="img-fluid" alt="Post image">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<a id="downloadButton" href="" download class="btn btn-primary">Download</a>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
{% block scripts %}{% endblock %} {% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
var modalImage = document.getElementById('modalImage');
var downloadButton = document.getElementById('downloadButton');
document.querySelectorAll('.post-image').forEach(function(image) {
image.addEventListener('click', function() {
var imageUrl = this.getAttribute('data-image-url');
modalImage.src = imageUrl;
downloadButton.href = imageUrl;
new bootstrap.Modal(document.getElementById('imageModal')).show();
});
});
});
</script>
{% endblock %}
</body> </body>
</html> </html>

25
templates/group_detail.html
View File

@ -95,7 +95,7 @@
</div> </div>
<p class="card-text">{{ post.content|safe }}</p> <p class="card-text">{{ post.content|safe }}</p>
{% if post.image_url %} {% if post.image_url %}
<img src="{{ url_for('static', filename='uploads/' + post.image_url) }}" class="img-fluid mb-2 post-image" alt="Post image" data-bs-toggle="modal" data-bs-target="#imageModal{{ post.id }}"> <img src="{{ url_for('static', filename='uploads/' + post.image_url) }}" class="img-fluid mb-2 post-image" alt="Post image" data-bs-toggle="modal" data-bs-target="#imageModal" data-image-url="{{ url_for('static', filename='uploads/' + post.image_url) }}">
{% endif %} {% endif %}
<div class="d-flex flex-wrap justify-content-between align-items-center"> <div class="d-flex flex-wrap justify-content-between align-items-center">
<div class="btn-group mb-2"> <div class="btn-group mb-2">
@ -506,6 +506,29 @@ document.addEventListener('DOMContentLoaded', function() {
} }
this.submit(); this.submit();
}); });
// Image modal functionality
const imageModal = document.getElementById('imageModal');
const modalImage = document.getElementById('modalImage');
const zoomInButton = document.getElementById('zoomInButton');
const zoomOutButton = document.getElementById('zoomOutButton');
const downloadButton = document.getElementById('downloadButton');
document.querySelectorAll('.post-image').forEach(img => {
img.addEventListener('click', function() {
modalImage.src = this.dataset.imageUrl;
downloadButton.href = this.dataset.imageUrl;
new bootstrap.Modal(imageModal).show();
});
});
zoomInButton.addEventListener('click', function() {
modalImage.style.transform = 'scale(1.2)';
});
zoomOutButton.addEventListener('click', function() {
modalImage.style.transform = 'scale(1)';
});
}); });
</script> </script>
{% endblock %} {% endblock %}

28
templates/index.html
View File

@ -40,9 +40,11 @@
<span class="ms-auto text-muted">{{ post.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</span> <span class="ms-auto text-muted">{{ post.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</span>
</div> </div>
<p class="card-text">{{ post.content|safe }}</p> <p class="card-text">{{ post.content|safe }}</p>
<div class="assets-section mb-2">
{% if post.image_url %} {% if post.image_url %}
<img src="{{ url_for('static', filename='uploads/' + post.image_url) }}" class="img-fluid mb-2 post-image" alt="Post image" data-bs-toggle="modal" data-bs-target="#imageModal{{ post.id }}"> <img src="{{ url_for('static', filename='uploads/' + post.image_url) }}" class="img-fluid post-image" alt="Post image" data-bs-toggle="modal" data-bs-target="#imageModal" data-image-url="{{ url_for('static', filename='uploads/' + post.image_url) }}">
{% endif %} {% endif %}
</div>
<div class="d-flex flex-wrap justify-content-between align-items-center"> <div class="d-flex flex-wrap justify-content-between align-items-center">
<div class="btn-group mb-2"> <div class="btn-group mb-2">
<button class="btn btn-outline-primary btn-sm like-btn" data-post-id="{{ post.id }}"> <button class="btn btn-outline-primary btn-sm like-btn" data-post-id="{{ post.id }}">
@ -135,6 +137,18 @@ document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.like-comment-btn').forEach(button => { document.querySelectorAll('.like-comment-btn').forEach(button => {
button.addEventListener('click', handleCommentLike); button.addEventListener('click', handleCommentLike);
}); });
// Initialize image modal
document.querySelectorAll('.post-image').forEach(img => {
img.addEventListener('click', function() {
var imageUrl = this.dataset.imageUrl;
var modalImage = document.getElementById('modalImage');
var downloadButton = document.getElementById('downloadButton');
modalImage.src = imageUrl;
downloadButton.href = imageUrl;
new bootstrap.Modal(document.getElementById('imageModal')).show();
});
});
} }
function handleLike(event) { function handleLike(event) {
@ -207,15 +221,3 @@ document.addEventListener('DOMContentLoaded', function() {
}); });
</script> </script>
{% endblock %} {% endblock %}
{% block styles %}
{{ super() }}
<style>
.comment-section {
border-top: 1px solid rgba(0,0,0,.125);
}
.comment-section .card-body {
padding-top: 1rem;
}
</style>
{% endblock %}

24
templates/post_detail.html
View File

@ -25,7 +25,7 @@
</div> </div>
<p class="card-text">{{ post.content|safe }}</p> <p class="card-text">{{ post.content|safe }}</p>
{% if post.image_url %} {% if post.image_url %}
<img src="{{ url_for('static', filename='uploads/' + post.image_url) }}" class="img-fluid mb-2 post-image" alt="Post image"> <img src="{{ url_for('static', filename='uploads/' + post.image_url) }}" class="img-fluid mb-2 post-image" alt="Post image" data-bs-toggle="modal" data-bs-target="#imageModal" data-image-url="{{ url_for('static', filename='uploads/' + post.image_url) }}">
{% endif %} {% endif %}
<div class="d-flex flex-wrap justify-content-between align-items-center"> <div class="d-flex flex-wrap justify-content-between align-items-center">
<div class="btn-group mb-2"> <div class="btn-group mb-2">
@ -69,6 +69,28 @@
</div> </div>
{% endblock %} {% endblock %}
{% block modals %}
<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="imageModalLabel">Image</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-center">
<img id="modalImage" src="" class="img-fluid" alt="Post image">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="zoomInButton">Zoom In</button>
<button type="button" class="btn btn-primary" id="zoomOutButton">Zoom Out</button>
<a id="downloadButton" href="" download class="btn btn-primary">Download</a>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %} {% block scripts %}
{{ super() }} {{ super() }}
<script> <script>