diff --git a/README.md b/README.md
index 0ac326d..0d34df2 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# panosplitter
-Split your horizontal images into 4x5 images for Instagram carousel posts.
+Split your horizontal images into 4images of variable aspect ratio (4x5, 1x1, 9x16) for Instagram carousel posts.
# License
The code in this project is licensed under GPLv3. Except for all images which are not free to use.
diff --git a/index.html b/index.html
index e0f543c..86c079f 100644
--- a/index.html
+++ b/index.html
@@ -18,8 +18,17 @@
FUTC's Instagram Panorama Slicer
- Split your panorama images into Instagram-friendly carousel posts (4:5 aspect ratio)
+ Split your panorama images into Instagram-friendly carousel posts (standard is 4:5 aspect ratio, choose yours below)
Your photos never leave your computer, all processing is done locally
+
+
+ Choose aspect ratio:
+
+ 4:5 (Instagram standard portrait)
+ 1:1 (Square)
+ 9:16 (Stories/Reels)
+
+
diff --git a/script.js b/script.js
index 7fe3c8c..85c4848 100644
--- a/script.js
+++ b/script.js
@@ -1,3 +1,9 @@
+function getAspectRatio(aspectRatioSelect) {
+ const value = aspectRatioSelect.value;
+ const [w, h] = value.split(":").map(Number);
+ return w / h; // returns numerical ratio
+ }
+
document.addEventListener('DOMContentLoaded', () => {
// DOM Elements
const uploadArea = document.getElementById('upload-area');
@@ -21,18 +27,18 @@ document.addEventListener('DOMContentLoaded', () => {
const loadingText = document.getElementById('loading-text');
const downloadBtnText = document.querySelector('.btn-text');
const downloadBtnLoader = document.querySelector('.btn-loader');
+
+ // variable aspectRatio
+ let aspectRatio = getAspectRatio(document.getElementById("aspect-ratio"));
// Variables to store image data
let originalImage = null;
let slicedImages = [];
let fullViewImage = null;
- // Standard Instagram 4:5 aspect ratio
- const aspectRatio = 4/5; // width:height ratio
-
// Standard resolution (for standard mode)
const standardWidth = 1080;
- const standardHeight = Math.round(standardWidth / aspectRatio); // Should be 1350
+ let standardHeight = Math.round(standardWidth / aspectRatio); // Should be 1350
const minSlices = 2;
const halfSliceWidth = standardWidth / 2;
@@ -137,6 +143,16 @@ document.addEventListener('DOMContentLoaded', () => {
updateImageDetails();
}
});
+
+ // Aspect ratio change
+ aspectRatioSelect = document.getElementById("aspect-ratio");
+ aspectRatioSelect.addEventListener('change', () => {
+ if (originalImage) {
+ aspectRatio = getAspectRatio(aspectRatioSelect);
+ standardHeight = Math.round(standardWidth / aspectRatio);
+ updateImageDetails();
+ }
+ });
// Handle file upload
function handleFile(file) {
@@ -405,6 +421,7 @@ document.addEventListener('DOMContentLoaded', () => {
if (fullViewImage) {
const fullViewItem = document.createElement('div');
fullViewItem.className = 'slice-item full-view-item';
+ fullViewItem.style.aspectRatio = `${fullViewImage.width}/${fullViewImage.height}`;
const img = document.createElement('img');
img.src = fullViewImage.dataURL;
@@ -428,11 +445,12 @@ document.addEventListener('DOMContentLoaded', () => {
slicedImages.forEach(slice => {
const sliceItem = document.createElement('div');
sliceItem.className = 'slice-item';
+ sliceItem.style.aspectRatio = `${slice.width} / ${slice.height}`;
const img = document.createElement('img');
img.src = slice.dataURL;
img.alt = `Slice ${slice.number}`;
-
+
const number = document.createElement('div');
number.className = 'slice-number';
number.textContent = slice.number;
diff --git a/styles.css b/styles.css
index a54dfb2..acc3af4 100644
--- a/styles.css
+++ b/styles.css
@@ -676,4 +676,37 @@ footer {
flex-direction: row;
justify-content: space-between;
}
+}
+
+/* Style for aspect ratio selector */
+.aspect-ratio-selector {
+ margin-top: 1.5rem;
+}
+
+.aspect-ratio-selector label {
+ font-weight: 600;
+ margin-right: 0.5rem;
+ color: #333;
+}
+
+.aspect-ratio-selector select {
+ padding: 0.5rem 1rem;
+ font-size: 1rem;
+ border: 2px solid #ccc;
+ border-radius: 8px;
+ background: white;
+ color: #333;
+ cursor: pointer;
+ transition: all 0.2s ease-in-out;
+}
+
+.aspect-ratio-selector select:hover {
+ border-color: #007bff;
+ box-shadow: 0 0 6px rgba(0, 123, 255, 0.3);
+}
+
+.aspect-ratio-selector select:focus {
+ outline: none;
+ border-color: #0056b3;
+ box-shadow: 0 0 6px rgba(0, 86, 179, 0.3);
}
\ No newline at end of file