G\u00f6rsel Boyutland\u0131r\u0131c\u0131<\/title>\n<style>\n * { box-sizing: border-box; margin: 0; padding: 0; }\n body {\n font-family: 'Courier New', monospace;\n background: #0f0f0f;\n color: #e0e0e0;\n min-height: 100vh;\n padding: 24px;\n }\n h1 {\n font-size: 1rem;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: #888;\n margin-bottom: 24px;\n border-bottom: 1px solid #222;\n padding-bottom: 12px;\n }\n h1 span { color: #f0f0f0; }\n\n .upload-area {\n border: 2px dashed #333;\n border-radius: 6px;\n padding: 28px;\n text-align: center;\n cursor: pointer;\n transition: border-color 0.2s, background 0.2s;\n margin-bottom: 28px;\n background: #141414;\n }\n .upload-area:hover, .upload-area.drag-over {\n border-color: #666;\n background: #1a1a1a;\n }\n .upload-area input { display: none; }\n .upload-area p { color: #555; font-size: 0.85rem; margin-top: 6px; }\n .upload-area .icon { font-size: 2rem; margin-bottom: 8px; }\n .upload-btn {\n display: inline-block;\n background: #222;\n border: 1px solid #444;\n color: #ccc;\n padding: 8px 20px;\n border-radius: 4px;\n cursor: pointer;\n font-family: inherit;\n font-size: 0.85rem;\n transition: background 0.15s;\n }\n .upload-btn:hover { background: #2a2a2a; }\n\n .previews {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 20px;\n }\n .preview-thumb {\n position: relative;\n width: 72px;\n height: 72px;\n border-radius: 4px;\n overflow: hidden;\n border: 1px solid #2a2a2a;\n }\n .preview-thumb img { width: 100%; height: 100%; object-fit: cover; }\n .preview-thumb .remove {\n position: absolute;\n top: 2px; right: 2px;\n background: rgba(0,0,0,0.7);\n color: #f00;\n border: none;\n border-radius: 2px;\n width: 16px; height: 16px;\n font-size: 10px;\n cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n line-height: 1;\n }\n .preview-count {\n color: #555;\n font-size: 0.8rem;\n margin-bottom: 20px;\n }\n\n .sizes-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 16px;\n margin-bottom: 28px;\n }\n\n .size-card {\n background: #141414;\n border: 1px solid #222;\n border-radius: 6px;\n padding: 18px;\n transition: border-color 0.2s;\n }\n .size-card.selected { border-color: #444; }\n .size-card-header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 12px;\n }\n .size-card-header input[type=\"checkbox\"] {\n width: 16px; height: 16px;\n accent-color: #aaa;\n cursor: pointer;\n }\n .size-label {\n font-size: 1rem;\n color: #e0e0e0;\n letter-spacing: 0.05em;\n }\n .size-desc {\n font-size: 0.72rem;\n color: #444;\n margin-left: auto;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n }\n .size-preview-bar {\n height: 3px;\n background: #1e1e1e;\n border-radius: 2px;\n margin-bottom: 10px;\n overflow: hidden;\n }\n .size-preview-fill {\n height: 100%;\n background: #383838;\n border-radius: 2px;\n }\n .size-info {\n font-size: 0.72rem;\n color: #444;\n letter-spacing: 0.04em;\n }\n\n .controls {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 28px;\n flex-wrap: wrap;\n }\n .quality-row {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.82rem;\n color: #555;\n }\n .quality-row input[type=\"range\"] {\n width: 100px;\n accent-color: #666;\n }\n .quality-row span { color: #aaa; min-width: 28px; }\n\n .fit-row {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.82rem;\n color: #555;\n }\n .fit-row select {\n background: #1a1a1a;\n border: 1px solid #333;\n color: #ccc;\n padding: 4px 8px;\n border-radius: 4px;\n font-family: inherit;\n font-size: 0.8rem;\n cursor: pointer;\n }\n\n .process-btn {\n background: #1f1f1f;\n border: 1px solid #444;\n color: #ddd;\n padding: 10px 28px;\n border-radius: 4px;\n cursor: pointer;\n font-family: inherit;\n font-size: 0.85rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n transition: background 0.15s, border-color 0.15s;\n }\n .process-btn:hover:not(:disabled) { background: #2a2a2a; border-color: #666; }\n .process-btn:disabled { opacity: 0.3; cursor: not-allowed; }\n\n .results { }\n .result-group { margin-bottom: 24px; }\n .result-group-title {\n font-size: 0.78rem;\n color: #555;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n margin-bottom: 10px;\n border-bottom: 1px solid #1a1a1a;\n padding-bottom: 6px;\n }\n .result-items { display: flex; flex-wrap: wrap; gap: 10px; }\n .result-item {\n background: #141414;\n border: 1px solid #222;\n border-radius: 4px;\n padding: 10px;\n display: flex;\n align-items: center;\n gap: 10px;\n min-width: 220px;\n }\n .result-thumb {\n width: 48px; height: 48px;\n object-fit: cover;\n border-radius: 3px;\n border: 1px solid #1e1e1e;\n flex-shrink: 0;\n }\n .result-info { flex: 1; min-width: 0; }\n .result-name {\n font-size: 0.75rem;\n color: #888;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 3px;\n }\n .result-size-text { font-size: 0.7rem; color: #444; }\n .dl-btn {\n background: #1a1a1a;\n border: 1px solid #333;\n color: #aaa;\n padding: 5px 12px;\n border-radius: 3px;\n cursor: pointer;\n font-family: inherit;\n font-size: 0.75rem;\n text-decoration: none;\n white-space: nowrap;\n transition: background 0.15s;\n }\n .dl-btn:hover { background: #252525; }\n\n .dl-all-btn {\n background: #1e1e1e;\n border: 1px solid #3a3a3a;\n color: #bbb;\n padding: 8px 20px;\n border-radius: 4px;\n cursor: pointer;\n font-family: inherit;\n font-size: 0.82rem;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n transition: background 0.15s;\n margin-bottom: 16px;\n }\n .dl-all-btn:hover { background: #272727; }\n\n .status {\n font-size: 0.8rem;\n color: #555;\n margin-bottom: 12px;\n min-height: 18px;\n }\n .status.working { color: #888; }\n .status.done { color: #6a8a6a; }\n .status.error { color: #8a4a4a; }\n\n .select-all-row {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.8rem;\n color: #555;\n margin-bottom: 16px;\n }\n .select-all-row button {\n background: none;\n border: 1px solid #2a2a2a;\n color: #555;\n padding: 3px 10px;\n border-radius: 3px;\n cursor: pointer;\n font-family: inherit;\n font-size: 0.75rem;\n transition: color 0.15s, border-color 0.15s;\n }\n .select-all-row button:hover { color: #888; border-color: #444; }\n<\/style>\n<\/head>\n<body>\n\n<h2><span>G\u00f6rsel<\/span> Boyutland\u0131r\u0131c\u0131<\/h2>\n\n<div class=\"upload-area\" id=\"uploadArea\">\n <div class=\"icon\">\u229e<\/div>\n <label class=\"upload-btn\" for=\"fileInput\">G\u00f6rsel Se\u00e7<\/label>\n <input type=\"file\" id=\"fileInput\" multiple accept=\"image\/*\">\n <p>veya s\u00fcr\u00fckle b\u0131rak \u2014 JPG, PNG, WEBP, GIF desteklenir<\/p>\n<\/div>\n\n<div class=\"previews\" id=\"previews\"><\/div>\n<div class=\"preview-count\" id=\"previewCount\"><\/div>\n\n<div class=\"select-all-row\">\n <button onclick=\"selectAll(true)\">T\u00fcm\u00fcn\u00fc Se\u00e7<\/button>\n <button onclick=\"selectAll(false)\">T\u00fcm\u00fcn\u00fc Kald\u0131r<\/button>\n<\/div>\n\n<div class=\"sizes-grid\" id=\"sizesGrid\"><\/div>\n\n<div class=\"controls\">\n <div class=\"quality-row\">\n <label for=\"qualityRange\">Kalite<\/label>\n <input type=\"range\" id=\"qualityRange\" min=\"50\" max=\"100\" value=\"90\">\n <span id=\"qualityVal\">90<\/span>\n <\/div>\n <div class=\"fit-row\">\n <label for=\"fitMode\">Mod<\/label>\n <select id=\"fitMode\">\n <option value=\"cover\">K\u0131rp (Cover)<\/option>\n <option value=\"contain\">S\u0131\u011fd\u0131r (Contain)<\/option>\n <option value=\"stretch\">Uzat (Stretch)<\/option>\n <\/select>\n <\/div>\n <button class=\"process-btn\" id=\"processBtn\" onclick=\"processImages()\" disabled>Boyutland\u0131r<\/button>\n<\/div>\n\n<div class=\"status\" id=\"status\"><\/div>\n<div id=\"results\"><\/div>\n\n<canvas id=\"canvas\" style=\"display:none\"><\/canvas>\n\n<script>\nconst SIZES = [\n { w: 1400, h: 560, label: '1400\u00d7560', desc: 'Banner' },\n { w: 1280, h: 800, label: '1280\u00d7800', desc: 'Wide' },\n { w: 440, h: 280, label: '440\u00d7280', desc: 'Card' },\n { w: 128, h: 128, label: '128\u00d7128', desc: 'Thumb' },\n];\n\nlet files = [];\nlet results = []; \/\/ {size, filename, blob, url}\n\n\/\/ --- Size cards ---\nfunction buildSizeCards() {\n const grid = document.getElementById('sizesGrid');\n const maxW = Math.max(...SIZES.map(s => s.w));\n SIZES.forEach((s, i) => {\n const fill = Math.round((s.w \/ maxW) * 100);\n const card = document.createElement('div');\n card.className = 'size-card selected';\n card.innerHTML = `\n <div class=\"size-card-header\">\n <input type=\"checkbox\" id=\"chk${i}\" checked onchange=\"updateBtn()\">\n <label for=\"chk${i}\" class=\"size-label\">${s.label}<\/label>\n <span class=\"size-desc\">${s.desc}<\/span>\n <\/div>\n <div class=\"size-preview-bar\"><div class=\"size-preview-fill\" style=\"width:${fill}%\"><\/div><\/div>\n <div class=\"size-info\">${s.w} \u00d7 ${s.h} px \u00b7 Oran ${(s.w\/s.h).toFixed(2)}:1<\/div>\n `;\n card.querySelector('input').addEventListener('change', function() {\n card.classList.toggle('selected', this.checked);\n updateBtn();\n });\n grid.appendChild(card);\n });\n}\nbuildSizeCards();\n\n\/\/ --- Upload ---\nconst uploadArea = document.getElementById('uploadArea');\nconst fileInput = document.getElementById('fileInput');\n\nfileInput.addEventListener('change', e => addFiles(e.target.files));\nuploadArea.addEventListener('dragover', e => { e.preventDefault(); uploadArea.classList.add('drag-over'); });\nuploadArea.addEventListener('dragleave', () => uploadArea.classList.remove('drag-over'));\nuploadArea.addEventListener('drop', e => {\n e.preventDefault();\n uploadArea.classList.remove('drag-over');\n addFiles(e.dataTransfer.files);\n});\n\nfunction addFiles(newFiles) {\n Array.from(newFiles).forEach(f => {\n if (f.type.startsWith('image\/')) files.push(f);\n });\n renderPreviews();\n updateBtn();\n clearResults();\n}\n\nfunction renderPreviews() {\n const container = document.getElementById('previews');\n const count = document.getElementById('previewCount');\n container.innerHTML = '';\n files.forEach((f, i) => {\n const url = URL.createObjectURL(f);\n const div = document.createElement('div');\n div.className = 'preview-thumb';\n div.innerHTML = `<img decoding=\"async\" src=\"${url}\"><button class=\"remove\" onclick=\"removeFile(${i})\">\u2715<\/button>`;\n container.appendChild(div);\n });\n count.textContent = files.length > 0 ? `${files.length} g\u00f6rsel y\u00fcklendi` : '';\n}\n\nfunction removeFile(i) {\n files.splice(i, 1);\n renderPreviews();\n updateBtn();\n clearResults();\n}\n\nfunction updateBtn() {\n const anySize = SIZES.some((_, i) => document.getElementById(`chk${i}`).checked);\n document.getElementById('processBtn').disabled = files.length === 0 || !anySize;\n}\n\nfunction selectAll(val) {\n SIZES.forEach((_, i) => {\n const chk = document.getElementById(`chk${i}`);\n chk.checked = val;\n chk.closest('.size-card').classList.toggle('selected', val);\n });\n updateBtn();\n}\n\n\/\/ --- Quality ---\nconst qRange = document.getElementById('qualityRange');\nconst qVal = document.getElementById('qualityVal');\nqRange.addEventListener('input', () => qVal.textContent = qRange.value);\n\n\/\/ --- Process ---\nfunction setStatus(msg, cls) {\n const el = document.getElementById('status');\n el.textContent = msg;\n el.className = 'status ' + (cls || '');\n}\n\nfunction clearResults() {\n results.forEach(r => URL.revokeObjectURL(r.url));\n results = [];\n document.getElementById('results').innerHTML = '';\n setStatus('');\n}\n\nasync function resizeImage(file, w, h, mode, quality) {\n return new Promise((resolve, reject) => {\n const img = new Image();\n const src = URL.createObjectURL(file);\n img.onload = () => {\n URL.revokeObjectURL(src);\n const canvas = document.getElementById('canvas');\n canvas.width = w;\n canvas.height = h;\n const ctx = canvas.getContext('2d');\n ctx.fillStyle = '#ffffff';\n ctx.fillRect(0, 0, w, h);\n\n if (mode === 'stretch') {\n ctx.drawImage(img, 0, 0, w, h);\n } else if (mode === 'contain') {\n const ratio = Math.min(w \/ img.width, h \/ img.height);\n const nw = img.width * ratio;\n const nh = img.height * ratio;\n const ox = (w - nw) \/ 2;\n const oy = (h - nh) \/ 2;\n ctx.drawImage(img, ox, oy, nw, nh);\n } else { \/\/ cover\n const ratio = Math.max(w \/ img.width, h \/ img.height);\n const nw = img.width * ratio;\n const nh = img.height * ratio;\n const ox = (w - nw) \/ 2;\n const oy = (h - nh) \/ 2;\n ctx.drawImage(img, ox, oy, nw, nh);\n }\n\n canvas.toBlob(blob => {\n if (!blob) { reject(new Error('Blob olu\u015fturulamad\u0131')); return; }\n resolve(blob);\n }, 'image\/jpeg', quality \/ 100);\n };\n img.onerror = () => reject(new Error('G\u00f6rsel y\u00fcklenemedi'));\n img.src = src;\n });\n}\n\nfunction sanitizeName(name) {\n return name.replace(\/\\.[^.]+$\/, '').replace(\/[^a-z0-9_\\-]\/gi, '_');\n}\n\nasync function processImages() {\n clearResults();\n const mode = document.getElementById('fitMode').value;\n const quality = parseInt(qRange.value);\n const selectedSizes = SIZES.filter((_, i) => document.getElementById(`chk${i}`).checked);\n const total = files.length * selectedSizes.length;\n let done = 0;\n\n setStatus('\u0130\u015fleniyor...', 'working');\n document.getElementById('processBtn').disabled = true;\n\n const grouped = {}; \/\/ size label -> results[]\n selectedSizes.forEach(s => grouped[s.label] = []);\n\n for (const file of files) {\n for (const size of selectedSizes) {\n try {\n const blob = await resizeImage(file, size.w, size.h, mode, quality);\n const baseName = sanitizeName(file.name);\n const filename = `${size.w}x${size.h}_${baseName}.jpg`;\n const url = URL.createObjectURL(blob);\n const entry = { size: size.label, filename, blob, url };\n results.push(entry);\n grouped[size.label].push(entry);\n done++;\n setStatus(`\u0130\u015fleniyor... ${done}\/${total}`, 'working');\n } catch(e) {\n console.error(e);\n }\n }\n }\n\n renderResults(grouped, selectedSizes);\n setStatus(`\u2713 ${done} g\u00f6rsel haz\u0131r.`, 'done');\n document.getElementById('processBtn').disabled = false;\n}\n\nfunction renderResults(grouped, selectedSizes) {\n const container = document.getElementById('results');\n container.innerHTML = '';\n\n if (results.length > 1) {\n const dlAll = document.createElement('button');\n dlAll.className = 'dl-all-btn';\n dlAll.textContent = 'T\u00fcm\u00fcn\u00fc \u0130ndir';\n dlAll.onclick = downloadAll;\n container.appendChild(dlAll);\n }\n\n selectedSizes.forEach(size => {\n const items = grouped[size.label];\n if (!items || items.length === 0) return;\n\n const group = document.createElement('div');\n group.className = 'result-group';\n group.innerHTML = `<div class=\"result-group-title\">${size.label} \u00b7 ${size.desc} \u2014 ${items.length} dosya<\/div>`;\n const itemsDiv = document.createElement('div');\n itemsDiv.className = 'result-items';\n\n items.forEach(r => {\n const div = document.createElement('div');\n div.className = 'result-item';\n const sizeKB = Math.round(r.blob.size \/ 1024);\n div.innerHTML = `\n <img decoding=\"async\" class=\"result-thumb\" src=\"${r.url}\">\n <div class=\"result-info\">\n <div class=\"result-name\">${r.filename}<\/div>\n <div class=\"result-size-text\">${sizeKB} KB<\/div>\n <\/div>\n <a class=\"dl-btn\" href=\"${r.url}\" download=\"${r.filename}\">\u2193 \u0130ndir<\/a>\n `;\n itemsDiv.appendChild(div);\n });\n\n group.appendChild(itemsDiv);\n container.appendChild(group);\n });\n}\n\nasync function downloadAll() {\n \/\/ Sequential download with small delay\n for (let i = 0; i < results.length; i++) {\n const r = results[i];\n const a = document.createElement('a');\n a.href = r.url;\n a.download = r.filename;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n await new Promise(res => setTimeout(res, 120));\n }\n}\n<\/script>\n<\/body>\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>G\u00f6rsel Boyutland\u0131r\u0131c\u0131 G\u00f6rsel Boyutland\u0131r\u0131c\u0131 \u229e G\u00f6rsel Se\u00e7 veya s\u00fcr\u00fckle b\u0131rak \u2014 JPG, PNG, WEBP, GIF desteklenir T\u00fcm\u00fcn\u00fc Se\u00e7 T\u00fcm\u00fcn\u00fc Kald\u0131r Kalite 90 Mod K\u0131rp (Cover)S\u0131\u011fd\u0131r (Contain)Uzat (Stretch) Boyutland\u0131r<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1990","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kominikee.com\/en\/wp-json\/wp\/v2\/pages\/1990","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kominikee.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kominikee.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kominikee.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kominikee.com\/en\/wp-json\/wp\/v2\/comments?post=1990"}],"version-history":[{"count":7,"href":"https:\/\/kominikee.com\/en\/wp-json\/wp\/v2\/pages\/1990\/revisions"}],"predecessor-version":[{"id":1997,"href":"https:\/\/kominikee.com\/en\/wp-json\/wp\/v2\/pages\/1990\/revisions\/1997"}],"wp:attachment":[{"href":"https:\/\/kominikee.com\/en\/wp-json\/wp\/v2\/media?parent=1990"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\n\n\n\n\nG\u00f6rsel Boyutland\u0131r\u0131c\u0131<\/title>\n<style>\n * { box-sizing: border-box; margin: 0; padding: 0; }\n body {\n font-family: 'Courier New', monospace;\n background: #0f0f0f;\n color: #e0e0e0;\n min-height: 100vh;\n padding: 24px;\n }\n h1 {\n font-size: 1rem;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: #888;\n margin-bottom: 24px;\n border-bottom: 1px solid #222;\n padding-bottom: 12px;\n }\n h1 span { color: #f0f0f0; }\n\n .upload-area {\n border: 2px dashed #333;\n border-radius: 6px;\n padding: 28px;\n text-align: center;\n cursor: pointer;\n transition: border-color 0.2s, background 0.2s;\n margin-bottom: 28px;\n background: #141414;\n }\n .upload-area:hover, .upload-area.drag-over {\n border-color: #666;\n background: #1a1a1a;\n }\n .upload-area input { display: none; }\n .upload-area p { color: #555; font-size: 0.85rem; margin-top: 6px; }\n .upload-area .icon { font-size: 2rem; margin-bottom: 8px; }\n .upload-btn {\n display: inline-block;\n background: #222;\n border: 1px solid #444;\n color: #ccc;\n padding: 8px 20px;\n border-radius: 4px;\n cursor: pointer;\n font-family: inherit;\n font-size: 0.85rem;\n transition: background 0.15s;\n }\n .upload-btn:hover { background: #2a2a2a; }\n\n .previews {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 20px;\n }\n .preview-thumb {\n position: relative;\n width: 72px;\n height: 72px;\n border-radius: 4px;\n overflow: hidden;\n border: 1px solid #2a2a2a;\n }\n .preview-thumb img { width: 100%; height: 100%; object-fit: cover; }\n .preview-thumb .remove {\n position: absolute;\n top: 2px; right: 2px;\n background: rgba(0,0,0,0.7);\n color: #f00;\n border: none;\n border-radius: 2px;\n width: 16px; height: 16px;\n font-size: 10px;\n cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n line-height: 1;\n }\n .preview-count {\n color: #555;\n font-size: 0.8rem;\n margin-bottom: 20px;\n }\n\n .sizes-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 16px;\n margin-bottom: 28px;\n }\n\n .size-card {\n background: #141414;\n border: 1px solid #222;\n border-radius: 6px;\n padding: 18px;\n transition: border-color 0.2s;\n }\n .size-card.selected { border-color: #444; }\n .size-card-header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 12px;\n }\n .size-card-header input[type=\"checkbox\"] {\n width: 16px; height: 16px;\n accent-color: #aaa;\n cursor: pointer;\n }\n .size-label {\n font-size: 1rem;\n color: #e0e0e0;\n letter-spacing: 0.05em;\n }\n .size-desc {\n font-size: 0.72rem;\n color: #444;\n margin-left: auto;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n }\n .size-preview-bar {\n height: 3px;\n background: #1e1e1e;\n border-radius: 2px;\n margin-bottom: 10px;\n overflow: hidden;\n }\n .size-preview-fill {\n height: 100%;\n background: #383838;\n border-radius: 2px;\n }\n .size-info {\n font-size: 0.72rem;\n color: #444;\n letter-spacing: 0.04em;\n }\n\n .controls {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 28px;\n flex-wrap: wrap;\n }\n .quality-row {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.82rem;\n color: #555;\n }\n .quality-row input[type=\"range\"] {\n width: 100px;\n accent-color: #666;\n }\n .quality-row span { color: #aaa; min-width: 28px; }\n\n .fit-row {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.82rem;\n color: #555;\n }\n .fit-row select {\n background: #1a1a1a;\n border: 1px solid #333;\n color: #ccc;\n padding: 4px 8px;\n border-radius: 4px;\n font-family: inherit;\n font-size: 0.8rem;\n cursor: pointer;\n }\n\n .process-btn {\n background: #1f1f1f;\n border: 1px solid #444;\n color: #ddd;\n padding: 10px 28px;\n border-radius: 4px;\n cursor: pointer;\n font-family: inherit;\n font-size: 0.85rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n transition: background 0.15s, border-color 0.15s;\n }\n .process-btn:hover:not(:disabled) { background: #2a2a2a; border-color: #666; }\n .process-btn:disabled { opacity: 0.3; cursor: not-allowed; }\n\n .results { }\n .result-group { margin-bottom: 24px; }\n .result-group-title {\n font-size: 0.78rem;\n color: #555;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n margin-bottom: 10px;\n border-bottom: 1px solid #1a1a1a;\n padding-bottom: 6px;\n }\n .result-items { display: flex; flex-wrap: wrap; gap: 10px; }\n .result-item {\n background: #141414;\n border: 1px solid #222;\n border-radius: 4px;\n padding: 10px;\n display: flex;\n align-items: center;\n gap: 10px;\n min-width: 220px;\n }\n .result-thumb {\n width: 48px; height: 48px;\n object-fit: cover;\n border-radius: 3px;\n border: 1px solid #1e1e1e;\n flex-shrink: 0;\n }\n .result-info { flex: 1; min-width: 0; }\n .result-name {\n font-size: 0.75rem;\n color: #888;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 3px;\n }\n .result-size-text { font-size: 0.7rem; color: #444; }\n .dl-btn {\n background: #1a1a1a;\n border: 1px solid #333;\n color: #aaa;\n padding: 5px 12px;\n border-radius: 3px;\n cursor: pointer;\n font-family: inherit;\n font-size: 0.75rem;\n text-decoration: none;\n white-space: nowrap;\n transition: background 0.15s;\n }\n .dl-btn:hover { background: #252525; }\n\n .dl-all-btn {\n background: #1e1e1e;\n border: 1px solid #3a3a3a;\n color: #bbb;\n padding: 8px 20px;\n border-radius: 4px;\n cursor: pointer;\n font-family: inherit;\n font-size: 0.82rem;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n transition: background 0.15s;\n margin-bottom: 16px;\n }\n .dl-all-btn:hover { background: #272727; }\n\n .status {\n font-size: 0.8rem;\n color: #555;\n margin-bottom: 12px;\n min-height: 18px;\n }\n .status.working { color: #888; }\n .status.done { color: #6a8a6a; }\n .status.error { color: #8a4a4a; }\n\n .select-all-row {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.8rem;\n color: #555;\n margin-bottom: 16px;\n }\n .select-all-row button {\n background: none;\n border: 1px solid #2a2a2a;\n color: #555;\n padding: 3px 10px;\n border-radius: 3px;\n cursor: pointer;\n font-family: inherit;\n font-size: 0.75rem;\n transition: color 0.15s, border-color 0.15s;\n }\n .select-all-row button:hover { color: #888; border-color: #444; }\n<\/style>\n<\/head>\n<body>\n\n<h2><span>G\u00f6rsel<\/span> Boyutland\u0131r\u0131c\u0131<\/h2>\n\n<div class=\"upload-area\" id=\"uploadArea\">\n <div class=\"icon\">\u229e<\/div>\n <label class=\"upload-btn\" for=\"fileInput\">G\u00f6rsel Se\u00e7<\/label>\n <input type=\"file\" id=\"fileInput\" multiple accept=\"image\/*\">\n <p>veya s\u00fcr\u00fckle b\u0131rak \u2014 JPG, PNG, WEBP, GIF desteklenir<\/p>\n<\/div>\n\n<div class=\"previews\" id=\"previews\"><\/div>\n<div class=\"preview-count\" id=\"previewCount\"><\/div>\n\n<div class=\"select-all-row\">\n <button onclick=\"selectAll(true)\">T\u00fcm\u00fcn\u00fc Se\u00e7<\/button>\n <button onclick=\"selectAll(false)\">T\u00fcm\u00fcn\u00fc Kald\u0131r<\/button>\n<\/div>\n\n<div class=\"sizes-grid\" id=\"sizesGrid\"><\/div>\n\n<div class=\"controls\">\n <div class=\"quality-row\">\n <label for=\"qualityRange\">Kalite<\/label>\n <input type=\"range\" id=\"qualityRange\" min=\"50\" max=\"100\" value=\"90\">\n <span id=\"qualityVal\">90<\/span>\n <\/div>\n <div class=\"fit-row\">\n <label for=\"fitMode\">Mod<\/label>\n <select id=\"fitMode\">\n <option value=\"cover\">K\u0131rp (Cover)<\/option>\n <option value=\"contain\">S\u0131\u011fd\u0131r (Contain)<\/option>\n <option value=\"stretch\">Uzat (Stretch)<\/option>\n <\/select>\n <\/div>\n <button class=\"process-btn\" id=\"processBtn\" onclick=\"processImages()\" disabled>Boyutland\u0131r<\/button>\n<\/div>\n\n<div class=\"status\" id=\"status\"><\/div>\n<div id=\"results\"><\/div>\n\n<canvas id=\"canvas\" style=\"display:none\"><\/canvas>\n\n<script>\nconst SIZES = [\n { w: 1400, h: 560, label: '1400\u00d7560', desc: 'Banner' },\n { w: 1280, h: 800, label: '1280\u00d7800', desc: 'Wide' },\n { w: 440, h: 280, label: '440\u00d7280', desc: 'Card' },\n { w: 128, h: 128, label: '128\u00d7128', desc: 'Thumb' },\n];\n\nlet files = [];\nlet results = []; \/\/ {size, filename, blob, url}\n\n\/\/ --- Size cards ---\nfunction buildSizeCards() {\n const grid = document.getElementById('sizesGrid');\n const maxW = Math.max(...SIZES.map(s => s.w));\n SIZES.forEach((s, i) => {\n const fill = Math.round((s.w \/ maxW) * 100);\n const card = document.createElement('div');\n card.className = 'size-card selected';\n card.innerHTML = `\n <div class=\"size-card-header\">\n <input type=\"checkbox\" id=\"chk${i}\" checked onchange=\"updateBtn()\">\n <label for=\"chk${i}\" class=\"size-label\">${s.label}<\/label>\n <span class=\"size-desc\">${s.desc}<\/span>\n <\/div>\n <div class=\"size-preview-bar\"><div class=\"size-preview-fill\" style=\"width:${fill}%\"><\/div><\/div>\n <div class=\"size-info\">${s.w} \u00d7 ${s.h} px \u00b7 Oran ${(s.w\/s.h).toFixed(2)}:1<\/div>\n `;\n card.querySelector('input').addEventListener('change', function() {\n card.classList.toggle('selected', this.checked);\n updateBtn();\n });\n grid.appendChild(card);\n });\n}\nbuildSizeCards();\n\n\/\/ --- Upload ---\nconst uploadArea = document.getElementById('uploadArea');\nconst fileInput = document.getElementById('fileInput');\n\nfileInput.addEventListener('change', e => addFiles(e.target.files));\nuploadArea.addEventListener('dragover', e => { e.preventDefault(); uploadArea.classList.add('drag-over'); });\nuploadArea.addEventListener('dragleave', () => uploadArea.classList.remove('drag-over'));\nuploadArea.addEventListener('drop', e => {\n e.preventDefault();\n uploadArea.classList.remove('drag-over');\n addFiles(e.dataTransfer.files);\n});\n\nfunction addFiles(newFiles) {\n Array.from(newFiles).forEach(f => {\n if (f.type.startsWith('image\/')) files.push(f);\n });\n renderPreviews();\n updateBtn();\n clearResults();\n}\n\nfunction renderPreviews() {\n const container = document.getElementById('previews');\n const count = document.getElementById('previewCount');\n container.innerHTML = '';\n files.forEach((f, i) => {\n const url = URL.createObjectURL(f);\n const div = document.createElement('div');\n div.className = 'preview-thumb';\n div.innerHTML = `<img decoding=\"async\" src=\"${url}\"><button class=\"remove\" onclick=\"removeFile(${i})\">\u2715<\/button>`;\n container.appendChild(div);\n });\n count.textContent = files.length > 0 ? `${files.length} g\u00f6rsel y\u00fcklendi` : '';\n}\n\nfunction removeFile(i) {\n files.splice(i, 1);\n renderPreviews();\n updateBtn();\n clearResults();\n}\n\nfunction updateBtn() {\n const anySize = SIZES.some((_, i) => document.getElementById(`chk${i}`).checked);\n document.getElementById('processBtn').disabled = files.length === 0 || !anySize;\n}\n\nfunction selectAll(val) {\n SIZES.forEach((_, i) => {\n const chk = document.getElementById(`chk${i}`);\n chk.checked = val;\n chk.closest('.size-card').classList.toggle('selected', val);\n });\n updateBtn();\n}\n\n\/\/ --- Quality ---\nconst qRange = document.getElementById('qualityRange');\nconst qVal = document.getElementById('qualityVal');\nqRange.addEventListener('input', () => qVal.textContent = qRange.value);\n\n\/\/ --- Process ---\nfunction setStatus(msg, cls) {\n const el = document.getElementById('status');\n el.textContent = msg;\n el.className = 'status ' + (cls || '');\n}\n\nfunction clearResults() {\n results.forEach(r => URL.revokeObjectURL(r.url));\n results = [];\n document.getElementById('results').innerHTML = '';\n setStatus('');\n}\n\nasync function resizeImage(file, w, h, mode, quality) {\n return new Promise((resolve, reject) => {\n const img = new Image();\n const src = URL.createObjectURL(file);\n img.onload = () => {\n URL.revokeObjectURL(src);\n const canvas = document.getElementById('canvas');\n canvas.width = w;\n canvas.height = h;\n const ctx = canvas.getContext('2d');\n ctx.fillStyle = '#ffffff';\n ctx.fillRect(0, 0, w, h);\n\n if (mode === 'stretch') {\n ctx.drawImage(img, 0, 0, w, h);\n } else if (mode === 'contain') {\n const ratio = Math.min(w \/ img.width, h \/ img.height);\n const nw = img.width * ratio;\n const nh = img.height * ratio;\n const ox = (w - nw) \/ 2;\n const oy = (h - nh) \/ 2;\n ctx.drawImage(img, ox, oy, nw, nh);\n } else { \/\/ cover\n const ratio = Math.max(w \/ img.width, h \/ img.height);\n const nw = img.width * ratio;\n const nh = img.height * ratio;\n const ox = (w - nw) \/ 2;\n const oy = (h - nh) \/ 2;\n ctx.drawImage(img, ox, oy, nw, nh);\n }\n\n canvas.toBlob(blob => {\n if (!blob) { reject(new Error('Blob olu\u015fturulamad\u0131')); return; }\n resolve(blob);\n }, 'image\/jpeg', quality \/ 100);\n };\n img.onerror = () => reject(new Error('G\u00f6rsel y\u00fcklenemedi'));\n img.src = src;\n });\n}\n\nfunction sanitizeName(name) {\n return name.replace(\/\\.[^.]+$\/, '').replace(\/[^a-z0-9_\\-]\/gi, '_');\n}\n\nasync function processImages() {\n clearResults();\n const mode = document.getElementById('fitMode').value;\n const quality = parseInt(qRange.value);\n const selectedSizes = SIZES.filter((_, i) => document.getElementById(`chk${i}`).checked);\n const total = files.length * selectedSizes.length;\n let done = 0;\n\n setStatus('\u0130\u015fleniyor...', 'working');\n document.getElementById('processBtn').disabled = true;\n\n const grouped = {}; \/\/ size label -> results[]\n selectedSizes.forEach(s => grouped[s.label] = []);\n\n for (const file of files) {\n for (const size of selectedSizes) {\n try {\n const blob = await resizeImage(file, size.w, size.h, mode, quality);\n const baseName = sanitizeName(file.name);\n const filename = `${size.w}x${size.h}_${baseName}.jpg`;\n const url = URL.createObjectURL(blob);\n const entry = { size: size.label, filename, blob, url };\n results.push(entry);\n grouped[size.label].push(entry);\n done++;\n setStatus(`\u0130\u015fleniyor... ${done}\/${total}`, 'working');\n } catch(e) {\n console.error(e);\n }\n }\n }\n\n renderResults(grouped, selectedSizes);\n setStatus(`\u2713 ${done} g\u00f6rsel haz\u0131r.`, 'done');\n document.getElementById('processBtn').disabled = false;\n}\n\nfunction renderResults(grouped, selectedSizes) {\n const container = document.getElementById('results');\n container.innerHTML = '';\n\n if (results.length > 1) {\n const dlAll = document.createElement('button');\n dlAll.className = 'dl-all-btn';\n dlAll.textContent = 'T\u00fcm\u00fcn\u00fc \u0130ndir';\n dlAll.onclick = downloadAll;\n container.appendChild(dlAll);\n }\n\n selectedSizes.forEach(size => {\n const items = grouped[size.label];\n if (!items || items.length === 0) return;\n\n const group = document.createElement('div');\n group.className = 'result-group';\n group.innerHTML = `<div class=\"result-group-title\">${size.label} \u00b7 ${size.desc} \u2014 ${items.length} dosya<\/div>`;\n const itemsDiv = document.createElement('div');\n itemsDiv.className = 'result-items';\n\n items.forEach(r => {\n const div = document.createElement('div');\n div.className = 'result-item';\n const sizeKB = Math.round(r.blob.size \/ 1024);\n div.innerHTML = `\n <img decoding=\"async\" class=\"result-thumb\" src=\"${r.url}\">\n <div class=\"result-info\">\n <div class=\"result-name\">${r.filename}<\/div>\n <div class=\"result-size-text\">${sizeKB} KB<\/div>\n <\/div>\n <a class=\"dl-btn\" href=\"${r.url}\" download=\"${r.filename}\">\u2193 \u0130ndir<\/a>\n `;\n itemsDiv.appendChild(div);\n });\n\n group.appendChild(itemsDiv);\n container.appendChild(group);\n });\n}\n\nasync function downloadAll() {\n \/\/ Sequential download with small delay\n for (let i = 0; i < results.length; i++) {\n const r = results[i];\n const a = document.createElement('a');\n a.href = r.url;\n a.download = r.filename;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n await new Promise(res => setTimeout(res, 120));\n }\n}\n<\/script>\n<\/body>\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>G\u00f6rsel Boyutland\u0131r\u0131c\u0131 G\u00f6rsel Boyutland\u0131r\u0131c\u0131 \u229e G\u00f6rsel Se\u00e7 veya s\u00fcr\u00fckle b\u0131rak \u2014 JPG, PNG, WEBP, GIF desteklenir T\u00fcm\u00fcn\u00fc Se\u00e7 T\u00fcm\u00fcn\u00fc Kald\u0131r Kalite 90 Mod K\u0131rp (Cover)S\u0131\u011fd\u0131r (Contain)Uzat (Stretch) Boyutland\u0131r<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1990","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kominikee.com\/en\/wp-json\/wp\/v2\/pages\/1990","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kominikee.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kominikee.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kominikee.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kominikee.com\/en\/wp-json\/wp\/v2\/comments?post=1990"}],"version-history":[{"count":7,"href":"https:\/\/kominikee.com\/en\/wp-json\/wp\/v2\/pages\/1990\/revisions"}],"predecessor-version":[{"id":1997,"href":"https:\/\/kominikee.com\/en\/wp-json\/wp\/v2\/pages\/1990\/revisions\/1997"}],"wp:attachment":[{"href":"https:\/\/kominikee.com\/en\/wp-json\/wp\/v2\/media?parent=1990"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}