Pozice obrázku:
-
-
-
-
+
+
Vyberte šablonu:
+
+
+
-
+
+
+
+
+
+
+
+ Obrázek vlevo, text vpravo
+
+
+
+
+
+
+
+
+ Obrázek vpravo, text vlevo
+
+
+
+
+
+
+
+
+ Obrázek nad textem
+
+
+
+
+
+
+
+
+ Obrázek pod textem
+
+
+
+
+
+
+
+
+ Překryv textu na obrázku
+
+
+
+
+
+
+
+
+ Vedle sebe s čarou
+
+
+
+
+
+
+
+
+ Kulatý obrázek vlevo
+
+
+
+ Dvě sloupce
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
@@ -1127,12 +1230,16 @@ async function saveBanner(event) {
formData.append('style[borderRadius]', document.getElementById('bannerBorderRadius').value || '0px');
formData.append('style[isVisible]', document.getElementById('bannerVisible').checked);
- // Append image position data using our variables
- formData.append('style[imagePosition]', currentImagePosition);
- formData.append('style[imageX]', currentImageX);
- formData.append('style[imageY]', currentImageY);
+ // Append template and position data
+ formData.append('style[template]', currentTemplate || 'left-text-right');
- console.log('Sending image position:',
+ // For backward compatibility, we'll still send the position data
+ formData.append('style[imagePosition]', currentImagePosition || 'center');
+ formData.append('style[imageX]', currentImageX || '0');
+ formData.append('style[imageY]', currentImageY || '0');
+
+ console.log('Sending template and position:',
+ currentTemplate,
currentImagePosition,
currentImageX,
currentImageY);
@@ -1296,7 +1403,7 @@ function updateBannerPreview() {
const imagePreview = document.getElementById('imagePreview');
const imagePreviewContainer = document.getElementById('imagePreviewContainer');
const bannerLink = document.getElementById('bannerLink')?.value || '';
- const imagePositionControls = document.getElementById('imagePositionControls');
+ const bannerTemplates = document.getElementById('bannerTemplates');
if (!bannerPreview || !bannerPreviewContent) {
return; // Elements not found
@@ -1343,59 +1450,52 @@ function updateBannerPreview() {
display: 'block'
});
- // Handle content and image like in index.html
+ // Handle content and image
let content = bannerText || 'Náhled banneru';
const bannerImage = document.getElementById('bannerImage');
const hasImage = currentImage || (bannerImage && bannerImage.files.length > 0);
if (hasImage && currentImage) {
- // Show image position controls
- if (imagePositionControls) {
- imagePositionControls.style.display = 'block';
-
- // Update active button
- const positionButtons = imagePositionControls.querySelectorAll('.image-position-btn');
- positionButtons.forEach(btn => {
- btn.classList.toggle('active', btn.dataset.position === imagePosition);
- });
+ // Show templates when image is uploaded
+ if (bannerTemplates) {
+ bannerTemplates.style.display = 'block';
}
// Apply the same border radius to the image as to the container
const imageRadius = Math.max(bannerBorderRadius, 0);
- // Determine image style based on position - exactly match index.html
- let imageStyle = `max-width: ${imageWidth}px; max-height: ${imageHeight}px; border-radius: ${imageRadius}px;`;
- let containerStyle = 'margin-bottom: 15px;';
+ // Get the current template config or use default
+ const template = currentTemplate ? templateConfigs[currentTemplate] : templateConfigs['left-text-right'];
- switch(imagePosition) {
- case 'left':
- containerStyle += 'text-align: left; float: left; margin-right: 15px;';
- break;
- case 'right':
- containerStyle += 'text-align: right; float: right; margin-left: 15px;';
- break;
- case 'center':
- containerStyle += 'text-align: center; display: block; margin: 0 auto;';
- break;
- case 'custom':
- containerStyle += 'position: relative;';
- // For custom position, use absolute positioning to ensure exact placement
- imageStyle += `position: absolute; left: ${imageX}px; top: ${imageY}px;`;
- break;
+ // Create container for the banner content
+ let bannerContent = '';
+
+ if (template) {
+ // Apply template-specific styles
+ bannerContent = `
+
+ 
+
`;
+ } else {
+ // Fallback to default layout
+ bannerContent = `
+
+ ${content}
+
+
+
+
`;
}
- // Format content with image exactly like in index.html
- content = `
-
+ ${content}
+
+
-
-
- ${content}
- `;
+ // Update the banner content
+ content = bannerContent;
// Show the image preview in the container
if (imagePreview && imagePreviewContainer) {
@@ -1646,36 +1746,90 @@ function setupDraggableImage() {
}
}
-// Setup image position buttons
+// Template configurations
+const templateConfigs = {
+ 'left-text-right': {
+ containerStyle: 'display: flex; align-items: center;',
+ imageStyle: 'max-width: 30%; margin-right: 20px;',
+ textStyle: 'flex: 1;'
+ },
+ 'right-text-left': {
+ containerStyle: 'display: flex; flex-direction: row-reverse; align-items: center;',
+ imageStyle: 'max-width: 30%; margin-left: 20px;',
+ textStyle: 'flex: 1;'
+ },
+ 'center-image-above': {
+ containerStyle: 'text-align: center;',
+ imageStyle: 'max-width: 100%; margin-bottom: 15px;',
+ textStyle: 'width: 100%;'
+ },
+ 'center-image-below': {
+ containerStyle: 'text-align: center;',
+ imageStyle: 'max-width: 100%; margin-top: 15px;',
+ textStyle: 'width: 100%; margin-bottom: 15px;'
+ },
+ 'full-image-overlay': {
+ containerStyle: 'position: relative; min-height: 200px;',
+ imageStyle: 'width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;',
+ textStyle: 'position: absolute; bottom: 20px; left: 20px; right: 20px; background: rgba(255,255,255,0.9); padding: 15px; border-radius: 5px;'
+ },
+ 'side-border': {
+ containerStyle: 'display: flex;',
+ imageStyle: 'width: 40%; border-right: 2px solid #ddd; padding-right: 20px;',
+ textStyle: 'width: 58%; margin-left: 20px;'
+ },
+ 'rounded-left': {
+ containerStyle: 'display: flex; align-items: center;',
+ imageStyle: 'width: 120px; height: 120px; border-radius: 60px; margin-right: 20px; object-fit: cover;',
+ textStyle: 'flex: 1;'
+ },
+ 'two-columns': {
+ containerStyle: 'display: grid; grid-template-columns: 1fr 1fr; gap: 20px;',
+ imageStyle: 'width: 100%; height: 150px; object-fit: cover;',
+ textStyle: 'margin: 10px 0;'
+ }
+};
+
+// Setup template selection
document.addEventListener('DOMContentLoaded', () => {
- // Add event listeners to image position buttons
- const positionButtons = document.querySelectorAll('.image-position-btn');
- positionButtons.forEach(btn => {
- btn.addEventListener('click', () => {
- const position = btn.dataset.position;
- currentImagePosition = position;
+ // Add event listeners to template items
+ const templateItems = document.querySelectorAll('.template-item');
+ templateItems.forEach(item => {
+ item.addEventListener('click', () => {
+ const templateId = item.dataset.template;
+ applyTemplate(templateId);
- // Reset position values if not custom
- if (position !== 'custom') {
- currentImageX = '0';
- currentImageY = '0';
-
- // Update hidden input fields
- document.getElementById('imagePositionX').value = currentImageX;
- document.getElementById('imagePositionY').value = currentImageY;
- }
-
- // Update active button styling
- positionButtons.forEach(b => b.classList.remove('active'));
- btn.classList.add('active');
-
- // Update preview
- updateBannerPreview();
+ // Update active state
+ templateItems.forEach(i => i.classList.remove('active'));
+ item.classList.add('active');
});
});
+ // Show templates when image is uploaded
+ const bannerImage = document.getElementById('bannerImage');
+ if (bannerImage) {
+ bannerImage.addEventListener('change', () => {
+ const templates = document.getElementById('bannerTemplates');
+ if (templates) {
+ templates.style.display = 'block';
+ }
+ });
+ }
+
loadBanner();
});
+
+// Apply selected template
+function applyTemplate(templateId) {
+ const config = templateConfigs[templateId];
+ if (!config) return;
+
+ // Store the selected template
+ currentTemplate = templateId;
+
+ // Update the banner preview
+ updateBannerPreview();
+}