Content Sharing System
Synopsis
Implement functionality for users to post images, add comments, and share product links with proper moderation, storage, and display capabilities.
A content sharing system allows users to contribute to your community and share their work.
Database Tables for Content
| Table Name | Purpose | Key Columns |
|---|---|---|
| posts | Store user posts/images | id, user_id, image_url, caption, created_at |
| comments | Store comments on posts | id, post_id, user_id, content, created_at |
| products | Store product links | id, post_id, product_url, title, description |
File Upload for Images
Implement secure image upload with compression and format conversion:
// Example: Client-side image compression before upload
function compressImage(file, maxWidth, maxHeight, quality) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (event) => {
const img = new Image();
img.src = event.target.result;
img.onload = () => {
const canvas = document.createElement('canvas');
let width = img.width;
let height = img.height;
// Calculate new dimensions
if (width > height) {
if (width > maxWidth) {
height *= maxWidth / width;
width = maxWidth;
}
} else {
if (height > maxHeight) {
width *= maxHeight / height;
height = maxHeight;
}
}
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height);
// Convert to compressed JPEG
canvas.toBlob(resolve, 'image/jpeg', quality);
};
};
});
}
Product Link Handling
Implement safe link sharing with preview generation:
// Example: Server-side link preview generation
async function generateLinkPreview(url) {
try {
const response = await fetch(url);
const html = await response.text();
// Extract metadata from HTML
const titleMatch = html.match(/(.*?)<\/title>/i);
const descriptionMatch = html.match(/<meta name="description" content="(.*?)"/i);
const imageMatch = html.match(/<meta property="og:image" content="(.*?)"/i);
return {
title: titleMatch ? titleMatch[1] : '',
description: descriptionMatch ? descriptionMatch[1] : '',
image: imageMatch ? imageMatch[1] : ''
};
} catch (error) {
console.error('Error generating link preview:', error);
return null;
}
}</code>
<p><strong>Moderation Tip:</strong> Implement content moderation to prevent spam and inappropriate content. Consider using automated filters and reporting systems.</p>
</div>
</div>
</div>
<a href="#" class="back-to-top"><i class="fas fa-arrow-up"></i></a>
<footer>
<p>Database & Membership System Builder © 2023 | Built with ❤️ for web developers</p>
</footer>
</div>
<script>
// Smooth scrolling for navigation links
document.querySelectorAll('.topic-nav a').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
window.scrollTo({
top: targetElement.offsetTop - 20,
behavior: 'smooth'
});
});
});
// Back to top button functionality
const backToTopBtn = document.querySelector('.back-to-top');
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
backToTopBtn.style.display = 'flex';
} else {
backToTopBtn.style.display = 'none';
}
});
backToTopBtn.addEventListener('click', (e) => {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Add animation to topic cards when they come into view
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// Set initial state for animation
document.querySelectorAll('.topic-card').forEach(card => {
card.style.opacity = 0;
card.style.transform = 'translateY(20px)';
card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
observer.observe(card);
});
</script>
</body>
</html>