image fix
This commit is contained in:
parent
87cd51a866
commit
909513f73e
@ -68,7 +68,27 @@
|
||||
background-color: inherit;
|
||||
}
|
||||
</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>
|
||||
<body>
|
||||
<div class="container mt-4">
|
||||
@ -148,8 +168,43 @@
|
||||
</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://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>
|
||||
</html>
|
||||
@ -95,7 +95,7 @@
|
||||
</div>
|
||||
<p class="card-text">{{ post.content|safe }}</p>
|
||||
{% 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 %}
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
||||
<div class="btn-group mb-2">
|
||||
@ -506,6 +506,29 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
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>
|
||||
{% endblock %}
|
||||
@ -40,9 +40,11 @@
|
||||
<span class="ms-auto text-muted">{{ post.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</span>
|
||||
</div>
|
||||
<p class="card-text">{{ post.content|safe }}</p>
|
||||
{% 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 }}">
|
||||
{% endif %}
|
||||
<div class="assets-section mb-2">
|
||||
{% if post.image_url %}
|
||||
<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 %}
|
||||
</div>
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
||||
<div class="btn-group mb-2">
|
||||
<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 => {
|
||||
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) {
|
||||
@ -206,16 +220,4 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
initializePostInteractions();
|
||||
});
|
||||
</script>
|
||||
{% 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 %}
|
||||
@ -25,7 +25,7 @@
|
||||
</div>
|
||||
<p class="card-text">{{ post.content|safe }}</p>
|
||||
{% 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 %}
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
||||
<div class="btn-group mb-2">
|
||||
@ -69,6 +69,28 @@
|
||||
</div>
|
||||
{% 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 %}
|
||||
{{ super() }}
|
||||
<script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user