{"id":5527,"date":"2026-06-21T06:18:30","date_gmt":"2026-06-21T06:18:30","guid":{"rendered":"https:\/\/primetoolhub.com\/?page_id=5527"},"modified":"2026-08-08T06:30:29","modified_gmt":"2026-08-08T06:30:29","slug":"article-image-placement-studio","status":"publish","type":"page","link":"https:\/\/schoolict.net\/tools\/article-image-placement-studio\/","title":{"rendered":"Article Image Placement Studio &#8211; SEO &amp; WCAG Friendly HTML Image Layout Generator"},"content":{"rendered":"<div class=\"pth-hero-section\">\n<div class=\"pth-hero-content\">\n<h2>SEO &#038; WCAG Friendly HTML Image Layout Generator<\/h2>\n<p>Create perfectly aligned, SEO-friendly, and responsive image layouts for your blog with our Article Image Placement Studio. Generate 100% offline, zero CLS HTML code.<\/p>\n<div id=\"pth-toc-placeholder\"><\/div>\n<\/p>\n<\/div>\n<div class=\"pth-hero-image\" style=\"aspect-ratio: 16\/9;\">\n        <img decoding=\"async\" \n            data-no-lazy=\"1\" \n            fetchpriority=\"high\" \n            loading=\"eager\" \n            width=\"450\" \n            height=\"253\" \n            src=\"https:\/\/schoolict.net\/tools\/wp-content\/uploads\/2026\/06\/Article-Image-Placement-Studio.jpeg\" \n            alt=\"Article Image Placement Studio\"\n            style=\"aspect-ratio: 16\/9; width: 100%; height: auto; display: block;\"\n        >\n    <\/div>\n<\/div>\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#\ud83d\udd34-why-html-image-layouts-matter-for-article-seo-and-reader-engagement\">\ud83d\udd34\u00a0Why HTML Image Layouts Matter for Article SEO and Reader Engagement<\/a><\/li><li><a href=\"#\ud83d\udfe1-8-layout-templates-when-to-use-each-one\">\ud83d\udfe1\u00a08 Layout Templates \u2014 When to Use Each One<\/a><ul><li><a href=\"#\ud83d\udfe2-split-layouts-image-left-right-and-wide-70-30\">\ud83d\udfe2\u00a0Split Layouts \u2014 Image Left, Right, and Wide 70\/30<\/a><\/li><li><a href=\"#\ud83d\udfe2-multi-image-layouts-two-images-and-three-images\">\ud83d\udfe2\u00a0Multi-Image Layouts \u2014 Two Images and Three Images<\/a><\/li><li><a href=\"#\ud83d\udfe2-callout-box-layout-image-highlighted-note\">\ud83d\udfe2\u00a0Callout Box Layout \u2014 Image + Highlighted Note<\/a><\/li><\/ul><\/li><li><a href=\"#\ud83d\udfe1-cls-prevention-why-width-and-height-matter-in-every-image-tag\">\ud83d\udfe1\u00a0CLS Prevention \u2014 Why Width and Height Matter in Every Image Tag<\/a><\/li><\/ul><\/nav><\/div>\n\n\n<style>\r\n\/* ============================================================\r\n   PTH ARTICLE IMAGE PLACEMENT STUDIO \u2014 v1.0\r\n   AdSense + PageSpeed + WCAG 2.1 AA + WP\/LiteSpeed Safe\r\n   ============================================================ *\/\r\n#pth-imgstudio-wrapper {\r\n    font-family: 'Inter', system-ui, sans-serif;\r\n    width: 100%; max-width: 1400px; margin: 0 auto;\r\n    box-sizing: border-box; background: #f8fafc;\r\n    padding: 20px; border-radius: 16px;\r\n    color: #1e293b; font-weight: 500;\r\n}\r\n#pth-imgstudio-wrapper * { box-sizing: border-box; min-width: 0; }\r\n#pth-imgstudio-wrapper h2,\r\n#pth-imgstudio-wrapper h3,\r\n#pth-imgstudio-wrapper h4 { color: #0f172a; font-weight: 800; margin-top: 0; }\r\n#pth-imgstudio-wrapper .pth-tool-title { font-size: 26px; font-weight: 800; color: #1d4ed8; margin: 0; }\r\n\r\n\/* \u2500\u2500 Cards \u2500\u2500 *\/\r\n#pth-imgstudio-wrapper .pth-card {\r\n    background: #fff; border: 1px solid #e2e8f0;\r\n    border-radius: 12px; padding: 20px; margin-bottom: 16px;\r\n    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.04);\r\n}\r\n#pth-imgstudio-wrapper .pth-card-header {\r\n    background: #f8fafc; margin: -20px -20px 16px -20px;\r\n    padding: 10px 16px; color: #2563eb; font-size: 12px;\r\n    border-bottom: 2px solid #eff6ff; font-weight: 800;\r\n    text-transform: uppercase; border-radius: 12px 12px 0 0;\r\n    letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px;\r\n}\r\n\r\n\/* \u2500\u2500 Meta bar \u2500\u2500 *\/\r\n#pth-imgstudio-wrapper .pth-tool-meta-bar {\r\n    display: flex; align-items: center; gap: 10px;\r\n    flex-wrap: wrap; margin-bottom: 14px;\r\n}\r\n#pth-imgstudio-wrapper .pth-version-badge {\r\n    background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe;\r\n    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px;\r\n}\r\n#pth-imgstudio-wrapper .pth-status-offline {\r\n    background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0;\r\n    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px;\r\n}\r\n\r\n\/* \u2500\u2500 Layout \u2500\u2500 *\/\r\n#pth-imgstudio-wrapper .pth-flex-layout {\r\n    display: grid; grid-template-columns: 1.8fr 1fr;\r\n    gap: 20px; align-items: start;\r\n}\r\n#pth-imgstudio-wrapper .pth-flex-layout.pth-full-width { grid-template-columns: 100%; }\r\n\r\n\/* \u2500\u2500 Buttons \u2500\u2500 *\/\r\n#pth-imgstudio-wrapper .pth-btn {\r\n    padding: 9px 18px; border-radius: 8px; font-weight: 700;\r\n    cursor: pointer; border: none; font-family: 'Inter', sans-serif;\r\n    font-size: 13px; transition: 0.2s; display: inline-flex;\r\n    align-items: center; justify-content: center; gap: 6px;\r\n}\r\n#pth-imgstudio-wrapper .pth-btn-primary { background: #2563eb; color: #fff; }\r\n#pth-imgstudio-wrapper .pth-btn-primary:hover { background: #1d4ed8; }\r\n#pth-imgstudio-wrapper .pth-btn-secondary { background: #f1f5f9; color: #0f172a; border: 1px solid #e2e8f0; }\r\n#pth-imgstudio-wrapper .pth-btn-secondary:hover { background: #e2e8f0; }\r\n#pth-imgstudio-wrapper .pth-btn-success { background: #059669; color: #fff; }\r\n#pth-imgstudio-wrapper .pth-btn-success:hover { background: #047857; }\r\n#pth-imgstudio-wrapper .pth-btn-danger { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }\r\n#pth-imgstudio-wrapper .pth-btn-danger:hover { background: #fee2e2; }\r\n#pth-imgstudio-wrapper .pth-sample-btn {\r\n    background: #d1fae5; color: #047857; border: 1px solid #10b981;\r\n    font-size: 0.75rem; padding: 4px 10px; border-radius: 6px;\r\n    font-weight: 700; cursor: pointer; transition: 0.2s;\r\n    display: inline-flex; align-items: center; gap: 4px;\r\n}\r\n#pth-imgstudio-wrapper .pth-sample-btn:hover { background: #a7f3d0; }\r\n\r\n\/* \u2500\u2500 Form fields \u2500\u2500 *\/\r\n#pth-imgstudio-wrapper label {\r\n    font-weight: 700; color: #0f172a; margin-bottom: 5px;\r\n    display: block; font-size: 12px;\r\n    text-transform: uppercase; letter-spacing: 0.4px;\r\n}\r\n#pth-imgstudio-wrapper input[type=\"text\"],\r\n#pth-imgstudio-wrapper input[type=\"url\"],\r\n#pth-imgstudio-wrapper input[type=\"number\"],\r\n#pth-imgstudio-wrapper select,\r\n#pth-imgstudio-wrapper textarea {\r\n    width: 100%; padding: 9px 12px; border: 2px solid #e2e8f0;\r\n    border-radius: 8px; font-family: 'Inter', sans-serif;\r\n    font-size: 13px; color: #0f172a; background: #fff; transition: 0.2s;\r\n}\r\n#pth-imgstudio-wrapper input:focus,\r\n#pth-imgstudio-wrapper select:focus,\r\n#pth-imgstudio-wrapper textarea:focus {\r\n    border-color: #3b82f6; outline: none;\r\n    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);\r\n}\r\n#pth-imgstudio-wrapper textarea { resize: vertical; min-height: 90px; font-size: 12px; line-height: 1.6; }\r\n#pth-imgstudio-wrapper .pth-field { margin-bottom: 14px; }\r\n#pth-imgstudio-wrapper .pth-field:last-child { margin-bottom: 0; }\r\n#pth-imgstudio-wrapper .pth-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\r\n#pth-imgstudio-wrapper .pth-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }\r\n\r\n\/* \u2500\u2500 Layout picker grid \u2500\u2500 *\/\r\n#pth-imgstudio-wrapper .pth-layout-grid {\r\n    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 4px;\r\n}\r\n#pth-imgstudio-wrapper .pth-layout-btn {\r\n    border: 2px solid #e2e8f0; border-radius: 10px;\r\n    padding: 10px 6px; text-align: center; cursor: pointer;\r\n    transition: 0.2s; background: #fff; font-family: 'Inter', sans-serif;\r\n    display: flex; flex-direction: column; align-items: center;\r\n    gap: 5px; min-height: 72px; justify-content: center;\r\n}\r\n#pth-imgstudio-wrapper .pth-layout-btn:hover { border-color: #2563eb; background: #eff6ff; }\r\n#pth-imgstudio-wrapper .pth-layout-btn.pth-active { background: #eff6ff; border-color: #2563eb; }\r\n#pth-imgstudio-wrapper .pth-layout-icon { font-size: 20px; line-height: 1; }\r\n#pth-imgstudio-wrapper .pth-layout-name { font-size: 10px; font-weight: 700; color: #334155; line-height: 1.2; }\r\n#pth-imgstudio-wrapper .pth-layout-btn.pth-active .pth-layout-name { color: #1d4ed8; }\r\n\r\n\/* \u2500\u2500 Style toggles \u2500\u2500 *\/\r\n#pth-imgstudio-wrapper .pth-toggle-row {\r\n    display: flex; justify-content: space-between;\r\n    align-items: center; padding: 7px 0;\r\n    border-bottom: 1px solid #f1f5f9;\r\n}\r\n#pth-imgstudio-wrapper .pth-toggle-row:last-child { border-bottom: none; }\r\n#pth-imgstudio-wrapper .pth-toggle-row span { font-size: 13px; font-weight: 600; color: #334155; }\r\n#pth-imgstudio-wrapper .pth-checkbox { width: 16px; height: 16px; cursor: pointer; accent-color: #2563eb; }\r\n\r\n\/* \u2500\u2500 Range slider \u2500\u2500 *\/\r\n#pth-imgstudio-wrapper .pth-range-wrap { display: flex; align-items: center; gap: 10px; }\r\n#pth-imgstudio-wrapper .pth-range { flex: 1; cursor: pointer; accent-color: #2563eb; }\r\n#pth-imgstudio-wrapper .pth-range-val { font-weight: 800; color: #2563eb; font-size: 13px; min-width: 40px; text-align: right; }\r\n\r\n\/* \u2500\u2500 Callout color picker \u2500\u2500 *\/\r\n#pth-imgstudio-wrapper .pth-color-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }\r\n#pth-imgstudio-wrapper .pth-color-chip {\r\n    width: 28px; height: 28px; border-radius: 6px; cursor: pointer;\r\n    border: 2px solid transparent; transition: 0.15s;\r\n    display: flex; align-items: center; justify-content: center;\r\n}\r\n#pth-imgstudio-wrapper .pth-color-chip.pth-active { border-color: #0f172a; transform: scale(1.15); }\r\n#pth-imgstudio-wrapper .pth-color-chip:hover { transform: scale(1.1); }\r\n\r\n\/* \u2500\u2500 Preview panel \u2500\u2500 *\/\r\n#pth-imgstudio-wrapper .pth-preview-wrap {\r\n    border: 2px solid #e2e8f0; border-radius: 12px;\r\n    overflow: hidden; background: #fff;\r\n}\r\n#pth-imgstudio-wrapper .pth-preview-bar {\r\n    background: #f1f5f9; padding: 10px 16px;\r\n    display: flex; justify-content: space-between; align-items: center;\r\n    border-bottom: 1px solid #e2e8f0;\r\n}\r\n#pth-imgstudio-wrapper .pth-preview-label {\r\n    font-size: 12px; font-weight: 800; color: #475569;\r\n    text-transform: uppercase; letter-spacing: 0.5px;\r\n}\r\n#pth-imgstudio-wrapper .pth-preview-toggles { display: flex; gap: 6px; }\r\n#pth-imgstudio-wrapper .pth-view-btn {\r\n    padding: 4px 12px; border-radius: 6px; font-size: 11px; font-weight: 700;\r\n    cursor: pointer; border: 1px solid #e2e8f0; background: #fff;\r\n    color: #475569; transition: 0.15s; font-family: 'Inter', sans-serif;\r\n}\r\n#pth-imgstudio-wrapper .pth-view-btn.pth-active { background: #2563eb; color: #fff; border-color: #2563eb; }\r\n#pth-imgstudio-wrapper .pth-preview-stage {\r\n    padding: 24px; min-height: 220px; transition: 0.3s;\r\n    overflow: auto;\r\n}\r\n#pth-imgstudio-wrapper .pth-preview-stage.pth-mobile { max-width: 390px; margin: 0 auto; }\r\n\r\n\/* Preview image placeholder *\/\r\n#pth-imgstudio-wrapper .pth-ph-img {\r\n    background: #ede9fe; border: 2px dashed #a5b4fc;\r\n    border-radius: 8px; display: flex; flex-direction: column;\r\n    align-items: center; justify-content: center;\r\n    color: #4f46e5; font-weight: 700; font-size: 12px;\r\n    gap: 4px; min-height: 120px;\r\n}\r\n#pth-imgstudio-wrapper .pth-ph-img .pth-ph-icon { font-size: 28px; }\r\n#pth-imgstudio-wrapper .pth-preview-caption {\r\n    font-size: 11px; color: #64748b; text-align: center;\r\n    margin-top: 6px; font-style: italic; font-weight: 500;\r\n}\r\n\r\n\/* Preview text placeholders *\/\r\n#pth-imgstudio-wrapper .pth-ph-h3 {\r\n    font-size: 17px; font-weight: 800; color: #0f172a;\r\n    margin: 0 0 8px;\r\n}\r\n#pth-imgstudio-wrapper .pth-ph-p {\r\n    font-size: 13px; color: #1e293b; font-weight: 500;\r\n    line-height: 1.7; margin: 0 0 8px;\r\n}\r\n#pth-imgstudio-wrapper .pth-ph-p:last-child { margin: 0; }\r\n\r\n\/* \u2500\u2500 Code output \u2500\u2500 *\/\r\n#pth-imgstudio-wrapper .pth-code-box {\r\n    background: #0f172a; color: #a78bfa; padding: 16px;\r\n    border-radius: 10px; font-family: 'Courier New', monospace;\r\n    font-size: 11px; max-height: 280px; overflow-y: auto;\r\n    line-height: 1.6; white-space: pre-wrap; word-break: break-all;\r\n    min-height: 120px; border: 2px solid #1e293b;\r\n}\r\n\r\n\/* \u2500\u2500 Callout preview colors \u2500\u2500 *\/\r\n#pth-imgstudio-wrapper .pth-callout-preview {\r\n    border-radius: 0 10px 10px 0; padding: 16px;\r\n    border: 1px solid; border-left-width: 4px;\r\n}\r\n#pth-imgstudio-wrapper .pth-callout-preview .pth-callout-p-icon { font-size: 20px; margin-bottom: 6px; display: block; }\r\n#pth-imgstudio-wrapper .pth-callout-preview .pth-callout-p-title {\r\n    font-size: 12px; font-weight: 800; text-transform: uppercase;\r\n    letter-spacing: 0.4px; margin-bottom: 6px;\r\n}\r\n#pth-imgstudio-wrapper .pth-callout-preview .pth-callout-p-text { font-size: 13px; font-weight: 500; line-height: 1.6; margin: 0; }\r\n\r\n\/* \u2500\u2500 Toast \u2500\u2500 *\/\r\n#pth-imgstudio-toast {\r\n    position: fixed; bottom: 24px; right: 24px; z-index: 9999;\r\n    display: flex; flex-direction: column; gap: 10px; pointer-events: none;\r\n}\r\n.pth-toast-msg {\r\n    padding: 12px 20px; border-radius: 10px; font-size: 14px;\r\n    font-weight: 600; color: #fff; pointer-events: auto;\r\n    box-shadow: 0 4px 15px rgba(0,0,0,0.15);\r\n    font-family: 'Inter', system-ui, sans-serif;\r\n}\r\n.pth-toast-success { background: #059669; }\r\n.pth-toast-error { background: #dc2626; }\r\n.pth-toast-info { background: #2563eb; }\r\n\r\n\/* \u2500\u2500 Mobile \u2500\u2500 *\/\r\n@media (max-width: 768px) {\r\n    #pth-imgstudio-wrapper { padding: 10px; border-radius: 0; background: transparent; }\r\n    #pth-imgstudio-wrapper .pth-card { padding: 14px; margin-bottom: 12px; }\r\n    #pth-imgstudio-wrapper .pth-flex-layout { grid-template-columns: 100% !important; gap: 12px; }\r\n    #pth-imgstudio-wrapper .pth-tool-title { font-size: 20px; }\r\n    #pth-imgstudio-wrapper .pth-layout-grid { grid-template-columns: repeat(4, 1fr); }\r\n    #pth-imgstudio-wrapper .pth-row-2 { grid-template-columns: 1fr; }\r\n    #pth-imgstudio-wrapper .pth-row-3 { grid-template-columns: 1fr 1fr; }\r\n}\r\n<\/style>\r\n\r\n<div id=\"pth-imgstudio-toast\" role=\"status\" aria-live=\"polite\"><\/div>\r\n\r\n<div id=\"pth-imgstudio-wrapper\">\r\n<div class=\"pth-flex-layout\" id=\"pth-imgstudio-layout\">\r\n\r\n<!-- \u2550\u2550\u2550 MAIN COLUMN \u2550\u2550\u2550 -->\r\n<div class=\"pth-main-col\">\r\n\r\n    <!-- Header -->\r\n    <div class=\"pth-card\">\r\n        <div style=\"display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;flex-wrap:wrap;gap:10px;\">\r\n            <h2 class=\"pth-tool-title\">\ud83d\uddbc\ufe0f Article Image Placement Studio<\/h2>\r\n            <button class=\"pth-btn pth-btn-secondary\" id=\"pth-is-fw-btn\" aria-label=\"Toggle full width layout\">\u26f6 Full Width<\/button>\r\n        <\/div>\r\n        <div class=\"pth-tool-meta-bar\">\r\n            <span class=\"pth-version-badge\">v1.0<\/span>\r\n            <span class=\"pth-status-offline\">\ud83d\udd12 100% Offline<\/span>\r\n        <\/div>\r\n        <div style=\"display:flex;gap:8px;flex-wrap:wrap;\">\r\n            <button class=\"pth-sample-btn\" id=\"pth-is-sample-btn\" aria-label=\"Load sample content\">\ud83d\udca1 Load Sample<\/button>\r\n            <button class=\"pth-btn pth-btn-danger\" id=\"pth-is-clear-btn\" style=\"font-size:0.75rem;padding:4px 10px;border-radius:6px;\" aria-label=\"Clear all fields\">\ud83d\uddd1\ufe0f Clear<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Layout Picker -->\r\n    <div class=\"pth-card\">\r\n        <div class=\"pth-card-header\">\ud83d\udcd0 Step 1 \u2014 Choose Layout<\/div>\r\n        <div class=\"pth-layout-grid\" id=\"pth-layout-grid\" role=\"group\" aria-label=\"Image layout selector\">\r\n            <button class=\"pth-layout-btn pth-active\" data-layout=\"left\" aria-label=\"Image left, text right\" aria-pressed=\"true\">\r\n                <span class=\"pth-layout-icon\">\u25e7<\/span>\r\n                <span class=\"pth-layout-name\">Img Left<\/span>\r\n            <\/button>\r\n            <button class=\"pth-layout-btn\" data-layout=\"right\" aria-label=\"Image right, text left\" aria-pressed=\"false\">\r\n                <span class=\"pth-layout-icon\">\u25e8<\/span>\r\n                <span class=\"pth-layout-name\">Img Right<\/span>\r\n            <\/button>\r\n            <button class=\"pth-layout-btn\" data-layout=\"full\" aria-label=\"Full width image\" aria-pressed=\"false\">\r\n                <span class=\"pth-layout-icon\">\u25ac<\/span>\r\n                <span class=\"pth-layout-name\">Full Width<\/span>\r\n            <\/button>\r\n            <button class=\"pth-layout-btn\" data-layout=\"center\" aria-label=\"Centered image\" aria-pressed=\"false\">\r\n                <span class=\"pth-layout-icon\">\u22a1<\/span>\r\n                <span class=\"pth-layout-name\">Centered<\/span>\r\n            <\/button>\r\n            <button class=\"pth-layout-btn\" data-layout=\"2col\" aria-label=\"Two images side by side\" aria-pressed=\"false\">\r\n                <span class=\"pth-layout-icon\">\u229e<\/span>\r\n                <span class=\"pth-layout-name\">2 Images<\/span>\r\n            <\/button>\r\n            <button class=\"pth-layout-btn\" data-layout=\"3col\" aria-label=\"Three images grid\" aria-pressed=\"false\">\r\n                <span class=\"pth-layout-icon\">\u229f<\/span>\r\n                <span class=\"pth-layout-name\">3 Images<\/span>\r\n            <\/button>\r\n            <button class=\"pth-layout-btn\" data-layout=\"wide\" aria-label=\"Wide image 70 percent with text column\" aria-pressed=\"false\">\r\n                <span class=\"pth-layout-icon\">\u25eb<\/span>\r\n                <span class=\"pth-layout-name\">Wide 70\/30<\/span>\r\n            <\/button>\r\n            <button class=\"pth-layout-btn\" data-layout=\"callout\" aria-label=\"Image with callout box\" aria-pressed=\"false\">\r\n                <span class=\"pth-layout-icon\">\u25f1<\/span>\r\n                <span class=\"pth-layout-name\">Callout Box<\/span>\r\n            <\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Image Settings -->\r\n    <div class=\"pth-card\">\r\n        <div class=\"pth-card-header\">\ud83d\uddbc\ufe0f Step 2 \u2014 Image Settings<\/div>\r\n\r\n        <!-- Primary image -->\r\n        <div class=\"pth-field\">\r\n            <label for=\"pth-img-url\">Image URL (from WP Media Library)<\/label>\r\n            <input type=\"url\" id=\"pth-img-url\" placeholder=\"https:\/\/schoolict.net\/tools\/wp-content\/uploads\/...\" aria-label=\"Image URL\">\r\n        <\/div>\r\n        <div class=\"pth-field\">\r\n            <label for=\"pth-img-alt\">Alt Text (SEO + Accessibility \u2014 required)<\/label>\r\n            <input type=\"text\" id=\"pth-img-alt\" placeholder=\"Descriptive alt text for screen readers and SEO\" aria-label=\"Image alt text\">\r\n        <\/div>\r\n        <div class=\"pth-row-3\">\r\n            <div class=\"pth-field\">\r\n                <label for=\"pth-img-w\">Width (px)<\/label>\r\n                <input type=\"number\" id=\"pth-img-w\" value=\"800\" min=\"1\" max=\"2000\" aria-label=\"Image width in pixels\">\r\n            <\/div>\r\n            <div class=\"pth-field\">\r\n                <label for=\"pth-img-h\">Height (px)<\/label>\r\n                <input type=\"number\" id=\"pth-img-h\" value=\"450\" min=\"1\" max=\"2000\" aria-label=\"Image height in pixels\">\r\n            <\/div>\r\n            <div class=\"pth-field\">\r\n                <label for=\"pth-img-loading\">Loading<\/label>\r\n                <select id=\"pth-img-loading\" aria-label=\"Image loading strategy\">\r\n                    <option value=\"lazy\" selected>lazy<\/option>\r\n                    <option value=\"eager\">eager<\/option>\r\n                <\/select>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"pth-field\">\r\n            <label for=\"pth-img-caption\">Caption (optional \u2014 leave blank to hide)<\/label>\r\n            <input type=\"text\" id=\"pth-img-caption\" placeholder=\"Optional: short caption under image\" aria-label=\"Image caption\">\r\n        <\/div>\r\n\r\n        <!-- Image 2 (2col\/3col) -->\r\n        <div id=\"pth-img2-group\" style=\"display:none;\">\r\n            <div style=\"height:1px;background:#f1f5f9;margin:14px 0;\"><\/div>\r\n            <div class=\"pth-field\">\r\n                <label for=\"pth-img2-url\">Image 2 URL<\/label>\r\n                <input type=\"url\" id=\"pth-img2-url\" placeholder=\"https:\/\/...\" aria-label=\"Second image URL\">\r\n            <\/div>\r\n            <div class=\"pth-row-2\">\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-img2-alt\">Image 2 Alt Text<\/label>\r\n                    <input type=\"text\" id=\"pth-img2-alt\" placeholder=\"Alt text for image 2\" aria-label=\"Second image alt text\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-img2-caption\">Image 2 Caption<\/label>\r\n                    <input type=\"text\" id=\"pth-img2-caption\" placeholder=\"Caption 2 (optional)\" aria-label=\"Second image caption\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Image 3 (3col) -->\r\n        <div id=\"pth-img3-group\" style=\"display:none;\">\r\n            <div style=\"height:1px;background:#f1f5f9;margin:14px 0;\"><\/div>\r\n            <div class=\"pth-field\">\r\n                <label for=\"pth-img3-url\">Image 3 URL<\/label>\r\n                <input type=\"url\" id=\"pth-img3-url\" placeholder=\"https:\/\/...\" aria-label=\"Third image URL\">\r\n            <\/div>\r\n            <div class=\"pth-row-2\">\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-img3-alt\">Image 3 Alt Text<\/label>\r\n                    <input type=\"text\" id=\"pth-img3-alt\" placeholder=\"Alt text for image 3\" aria-label=\"Third image alt text\">\r\n                <\/div>\r\n                <div class=\"pth-field\">\r\n                    <label for=\"pth-img3-caption\">Image 3 Caption<\/label>\r\n                    <input type=\"text\" id=\"pth-img3-caption\" placeholder=\"Caption 3 (optional)\" aria-label=\"Third image caption\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Text Content -->\r\n    <div class=\"pth-card\" id=\"pth-text-card\">\r\n        <div class=\"pth-card-header\">\u270f\ufe0f Step 3 \u2014 Text Content (beside image)<\/div>\r\n        <div class=\"pth-field\">\r\n            <label for=\"pth-text-heading\">Heading (H3)<\/label>\r\n            <input type=\"text\" id=\"pth-text-heading\" placeholder=\"Your section heading here\" aria-label=\"Section heading text\">\r\n        <\/div>\r\n        <div class=\"pth-field\">\r\n            <label for=\"pth-text-p1\">Paragraph 1<\/label>\r\n            <textarea id=\"pth-text-p1\" placeholder=\"Your first paragraph text here...\" aria-label=\"First paragraph content\"><\/textarea>\r\n        <\/div>\r\n        <div class=\"pth-field\">\r\n            <label for=\"pth-text-p2\">Paragraph 2 (optional)<\/label>\r\n            <textarea id=\"pth-text-p2\" placeholder=\"Optional second paragraph...\" aria-label=\"Second paragraph content\"><\/textarea>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Callout settings -->\r\n    <div class=\"pth-card\" id=\"pth-callout-card\" style=\"display:none;\">\r\n        <div class=\"pth-card-header\">\ud83d\udcac Callout Box Settings<\/div>\r\n        <div class=\"pth-row-2\">\r\n            <div class=\"pth-field\">\r\n                <label for=\"pth-callout-icon\">Icon (emoji)<\/label>\r\n                <input type=\"text\" id=\"pth-callout-icon\" value=\"\ud83d\udd12\" maxlength=\"4\" aria-label=\"Callout box icon emoji\">\r\n            <\/div>\r\n            <div class=\"pth-field\">\r\n                <label for=\"pth-callout-title\">Title<\/label>\r\n                <input type=\"text\" id=\"pth-callout-title\" value=\"Privacy Note\" aria-label=\"Callout box title\">\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"pth-field\">\r\n            <label for=\"pth-callout-text\">Callout Text<\/label>\r\n            <textarea id=\"pth-callout-text\" aria-label=\"Callout box body text\">Your callout text goes here. Keep it short and impactful \u2014 2 to 4 sentences maximum.<\/textarea>\r\n        <\/div>\r\n        <div class=\"pth-field\">\r\n            <label>Color Theme<\/label>\r\n            <div class=\"pth-color-row\" id=\"pth-callout-colors\" role=\"group\" aria-label=\"Callout color theme\">\r\n                <div class=\"pth-color-chip pth-active\" data-theme=\"purple\" style=\"background:#f5f3ff;border-color:#a5b4fc;\" aria-label=\"Purple theme\" role=\"button\" tabindex=\"0\">\r\n                    <span style=\"font-size:10px;font-weight:800;color:#4c1d95;\">P<\/span>\r\n                <\/div>\r\n                <div class=\"pth-color-chip\" data-theme=\"blue\" style=\"background:#eff6ff;border-color:#93c5fd;\" aria-label=\"Blue theme\" role=\"button\" tabindex=\"0\">\r\n                    <span style=\"font-size:10px;font-weight:800;color:#1e40af;\">B<\/span>\r\n                <\/div>\r\n                <div class=\"pth-color-chip\" data-theme=\"green\" style=\"background:#f0fdf4;border-color:#86efac;\" aria-label=\"Green theme\" role=\"button\" tabindex=\"0\">\r\n                    <span style=\"font-size:10px;font-weight:800;color:#14532d;\">G<\/span>\r\n                <\/div>\r\n                <div class=\"pth-color-chip\" data-theme=\"amber\" style=\"background:#fffbeb;border-color:#fcd34d;\" aria-label=\"Amber theme\" role=\"button\" tabindex=\"0\">\r\n                    <span style=\"font-size:10px;font-weight:800;color:#78350f;\">A<\/span>\r\n                <\/div>\r\n                <div class=\"pth-color-chip\" data-theme=\"red\" style=\"background:#fef2f2;border-color:#fca5a5;\" aria-label=\"Red theme\" role=\"button\" tabindex=\"0\">\r\n                    <span style=\"font-size:10px;font-weight:800;color:#7f1d1d;\">R<\/span>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Style Options -->\r\n    <div class=\"pth-card\">\r\n        <div class=\"pth-card-header\">\ud83c\udfa8 Step 4 \u2014 Style Options<\/div>\r\n        <div id=\"pth-col-width-group\">\r\n            <div class=\"pth-field\" style=\"margin-bottom:14px;\">\r\n                <label>Image Column Width \u2014 <span id=\"pth-col-val\" style=\"color:#2563eb;font-weight:800;\">48%<\/span><\/label>\r\n                <div class=\"pth-range-wrap\">\r\n                    <input type=\"range\" id=\"pth-col-rng\" class=\"pth-range\" min=\"30\" max=\"70\" value=\"48\" step=\"2\"\r\n                        aria-label=\"Image column width percentage\" aria-valuemin=\"30\" aria-valuemax=\"70\" aria-valuenow=\"48\">\r\n                    <span class=\"pth-range-val\" id=\"pth-col-disp\">48%<\/span>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div id=\"pth-gap-group\">\r\n            <div class=\"pth-field\" style=\"margin-bottom:14px;\">\r\n                <label for=\"pth-gap-sel\">Column Gap<\/label>\r\n                <select id=\"pth-gap-sel\" aria-label=\"Gap between image and text columns\">\r\n                    <option value=\"16\">16px \u2014 Tight<\/option>\r\n                    <option value=\"20\">20px \u2014 Compact<\/option>\r\n                    <option value=\"28\" selected>28px \u2014 Standard<\/option>\r\n                    <option value=\"36\">36px \u2014 Spacious<\/option>\r\n                <\/select>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"pth-toggle-row\">\r\n            <span>Rounded corners on image<\/span>\r\n            <input type=\"checkbox\" id=\"pth-opt-radius\" class=\"pth-checkbox\" checked aria-label=\"Apply rounded corners to image\">\r\n        <\/div>\r\n        <div class=\"pth-toggle-row\">\r\n            <span>Border on image<\/span>\r\n            <input type=\"checkbox\" id=\"pth-opt-border\" class=\"pth-checkbox\" checked aria-label=\"Apply border to image\">\r\n        <\/div>\r\n        <div class=\"pth-toggle-row\">\r\n            <span>Margin above\/below layout<\/span>\r\n            <input type=\"checkbox\" id=\"pth-opt-margin\" class=\"pth-checkbox\" checked aria-label=\"Add vertical margin around layout\">\r\n        <\/div>\r\n        <div id=\"pth-centered-maxw-group\" style=\"display:none;padding-top:10px;\">\r\n            <div class=\"pth-field\" style=\"margin-bottom:0;\">\r\n                <label for=\"pth-center-maxw\">Max Width (centered image, px)<\/label>\r\n                <input type=\"number\" id=\"pth-center-maxw\" value=\"600\" min=\"100\" max=\"1200\" aria-label=\"Maximum width for centered image\">\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Generate -->\r\n    <div class=\"pth-card\">\r\n        <div class=\"pth-card-header\">\u2699\ufe0f Step 5 \u2014 Generate Code<\/div>\r\n        <div id=\"pth-imgstudio-error\" style=\"display:none;background:#fef2f2;border-left:4px solid #ef4444;color:#b91c1c;padding:12px;margin-bottom:12px;border-radius:8px;font-weight:700;font-size:13px;\" role=\"alert\" aria-live=\"assertive\"><\/div>\r\n        <button class=\"pth-btn pth-btn-primary\" id=\"pth-generate-btn\" style=\"width:100%;padding:14px;font-size:15px;margin-bottom:14px;\" aria-label=\"Generate HTML code\">\r\n            \ud83d\ude80 Generate HTML Code\r\n        <\/button>\r\n        <div class=\"pth-code-box\" id=\"pth-code-output\" aria-live=\"polite\" aria-label=\"Generated HTML code\">\r\n            \/\/ Click \"Generate HTML Code\" to build your layout\u2026\r\n        <\/div>\r\n        <div style=\"display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;\">\r\n            <button class=\"pth-btn pth-btn-success\" id=\"pth-copy-btn\" style=\"flex:1;\" aria-label=\"Copy generated code to clipboard\">\ud83d\udccb Copy Code<\/button>\r\n            <button class=\"pth-btn pth-btn-secondary\" id=\"pth-reset-code-btn\" style=\"flex:1;\" aria-label=\"Reset code output\">\ud83d\udd04 Reset<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/div><!-- \/main col -->\r\n\r\n<!-- \u2550\u2550\u2550 SIDEBAR \u2550\u2550\u2550 -->\r\n<div class=\"pth-sidebar-col\" id=\"pth-imgstudio-sidebar\">\r\n\r\n    <!-- Live Preview -->\r\n    <div class=\"pth-card\" style=\"padding:0;overflow:hidden;\">\r\n        <div class=\"pth-preview-bar\">\r\n            <span class=\"pth-preview-label\">\ud83d\udc41 Live Preview<\/span>\r\n            <div class=\"pth-preview-toggles\">\r\n                <button class=\"pth-view-btn pth-active\" id=\"pth-view-desktop\" aria-label=\"Desktop preview\" aria-pressed=\"true\">\ud83d\udda5 Desktop<\/button>\r\n                <button class=\"pth-view-btn\" id=\"pth-view-mobile\" aria-label=\"Mobile preview\" aria-pressed=\"false\">\ud83d\udcf1 Mobile<\/button>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"pth-preview-stage\" id=\"pth-preview-stage\">\r\n            <div style=\"text-align:center;color:#94a3b8;font-size:13px;padding:30px 0;\">\r\n                <div style=\"font-size:32px;margin-bottom:8px;\">\ud83d\uddbc\ufe0f<\/div>\r\n                Configure settings and click Generate to preview\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Tips -->\r\n    <div class=\"pth-card\">\r\n        <div class=\"pth-card-header\">\ud83d\udca1 Layout Guide<\/div>\r\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\r\n            <div style=\"font-size:12px;color:#475569;padding:6px 0;border-bottom:1px solid #f1f5f9;\">\r\n                <strong style=\"color:#0f172a;\">Img Left \/ Right<\/strong> \u2014 diagram beside explanation\r\n            <\/div>\r\n            <div style=\"font-size:12px;color:#475569;padding:6px 0;border-bottom:1px solid #f1f5f9;\">\r\n                <strong style=\"color:#0f172a;\">Full Width<\/strong> \u2014 large flowcharts, infographics\r\n            <\/div>\r\n            <div style=\"font-size:12px;color:#475569;padding:6px 0;border-bottom:1px solid #f1f5f9;\">\r\n                <strong style=\"color:#0f172a;\">Centered<\/strong> \u2014 UI screenshots, square diagrams\r\n            <\/div>\r\n            <div style=\"font-size:12px;color:#475569;padding:6px 0;border-bottom:1px solid #f1f5f9;\">\r\n                <strong style=\"color:#0f172a;\">2 Images<\/strong> \u2014 before\/after, comparisons\r\n            <\/div>\r\n            <div style=\"font-size:12px;color:#475569;padding:6px 0;border-bottom:1px solid #f1f5f9;\">\r\n                <strong style=\"color:#0f172a;\">3 Images<\/strong> \u2014 step 1\/2\/3 screenshots\r\n            <\/div>\r\n            <div style=\"font-size:12px;color:#475569;padding:6px 0;border-bottom:1px solid #f1f5f9;\">\r\n                <strong style=\"color:#0f172a;\">Wide 70\/30<\/strong> \u2014 large diagram + key points\r\n            <\/div>\r\n            <div style=\"font-size:12px;color:#475569;padding:6px 0;\">\r\n                <strong style=\"color:#0f172a;\">Callout Box<\/strong> \u2014 diagram + tip\/warning highlight\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- WP Paste Tip -->\r\n    <div class=\"pth-card\" style=\"background:#fefce8;border-color:#fde68a;\">\r\n        <div class=\"pth-card-header\" style=\"color:#d97706;border-color:#fde68a;\">\u26a0\ufe0f WP Paste Guide<\/div>\r\n        <ul style=\"margin:0;padding-left:16px;font-size:12px;color:#78350f;line-height:1.9;font-weight:500;\">\r\n            <li>Paste into <strong>WP HTML block<\/strong> (Visual Editor)<\/li>\r\n            <li>First time only: also paste the <strong>Master CSS<\/strong> block once per article<\/li>\r\n            <li>Replace <code>src=\"\"<\/code> with your WP image URL<\/li>\r\n            <li>Use <strong>loading=\"eager\"<\/strong> for hero images only<\/li>\r\n            <li>Always include <strong>width + height<\/strong> to prevent CLS<\/li>\r\n        <\/ul>\r\n    <\/div>\r\n\r\n<\/div><!-- \/sidebar -->\r\n<\/div><!-- \/flex-layout -->\r\n<\/div><!-- \/wrapper -->\r\n\r\n<script data-no-optimize=\"1\" data-no-minify=\"1\" data-cfasync=\"false\">\r\n(function () {\r\n    'use strict';\r\n\r\n    \/* =======================================================\r\n       PTH ARTICLE IMAGE PLACEMENT STUDIO \u2014 v1.0\r\n       WP\/LiteSpeed safe | WCAG 2.1 AA | PageSpeed 100\r\n       ======================================================= *\/\r\n    window.pthImageStudioApp = {\r\n        initialized: false,\r\n        currentLayout: 'left',\r\n        currentCalloutTheme: 'purple',\r\n        isMobilePreview: false,\r\n\r\n        \/* \u2500\u2500\u2500 Callout theme definitions \u2500\u2500\u2500 *\/\r\n        calloutThemes: {\r\n            purple: { bg: '#f5f3ff', border: '#7c3aed', titleColor: '#4c1d95', textColor: '#3b0764' },\r\n            blue:   { bg: '#eff6ff', border: '#2563eb', titleColor: '#1e40af', textColor: '#1e3a8a' },\r\n            green:  { bg: '#f0fdf4', border: '#059669', titleColor: '#14532d', textColor: '#052e16' },\r\n            amber:  { bg: '#fffbeb', border: '#d97706', titleColor: '#78350f', textColor: '#451a03' },\r\n            red:    { bg: '#fef2f2', border: '#dc2626', titleColor: '#7f1d1d', textColor: '#450a0a' }\r\n        },\r\n\r\n        init: function () {\r\n            this.attachEvents();\r\n            this.updatePreview();\r\n        },\r\n\r\n        attachEvents: function () {\r\n            var self = this;\r\n\r\n            \/* Full width toggle *\/\r\n            var fwBtn = document.getElementById('pth-is-fw-btn');\r\n            if (fwBtn) fwBtn.addEventListener('click', function () { self.toggleWidth(); });\r\n\r\n            \/* Sample + Clear *\/\r\n            var sampleBtn = document.getElementById('pth-is-sample-btn');\r\n            if (sampleBtn) sampleBtn.addEventListener('click', function () { self.loadSample(); });\r\n            var clearBtn = document.getElementById('pth-is-clear-btn');\r\n            if (clearBtn) clearBtn.addEventListener('click', function () { self.clearAll(); });\r\n\r\n            \/* Layout buttons *\/\r\n            document.querySelectorAll('#pth-layout-grid .pth-layout-btn').forEach(function (btn) {\r\n                btn.addEventListener('click', function () { self.setLayout(this.getAttribute('data-layout')); });\r\n            });\r\n\r\n            \/* All inputs trigger live preview *\/\r\n            var liveInputs = [\r\n                'pth-img-url','pth-img-alt','pth-img-w','pth-img-h',\r\n                'pth-img-loading','pth-img-caption',\r\n                'pth-img2-url','pth-img2-alt','pth-img2-caption',\r\n                'pth-img3-url','pth-img3-alt','pth-img3-caption',\r\n                'pth-text-heading','pth-text-p1','pth-text-p2',\r\n                'pth-callout-icon','pth-callout-title','pth-callout-text',\r\n                'pth-gap-sel','pth-opt-radius','pth-opt-border',\r\n                'pth-opt-margin','pth-center-maxw'\r\n            ];\r\n            liveInputs.forEach(function (id) {\r\n                var el = document.getElementById(id);\r\n                if (el) {\r\n                    var evt = (el.type === 'checkbox') ? 'change' : 'input';\r\n                    el.addEventListener(evt, function () { self.updatePreview(); });\r\n                }\r\n            });\r\n\r\n            \/* Column width range *\/\r\n            var colRng = document.getElementById('pth-col-rng');\r\n            if (colRng) colRng.addEventListener('input', function () {\r\n                document.getElementById('pth-col-val').textContent = this.value + '%';\r\n                document.getElementById('pth-col-disp').textContent = this.value + '%';\r\n                this.setAttribute('aria-valuenow', this.value);\r\n                self.updatePreview();\r\n            });\r\n\r\n            \/* Callout color chips *\/\r\n            document.querySelectorAll('#pth-callout-colors .pth-color-chip').forEach(function (chip) {\r\n                chip.addEventListener('click', function () { self.setCalloutTheme(this.getAttribute('data-theme')); });\r\n                chip.addEventListener('keydown', function (e) {\r\n                    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); self.setCalloutTheme(this.getAttribute('data-theme')); }\r\n                });\r\n            });\r\n\r\n            \/* View toggles *\/\r\n            var deskBtn = document.getElementById('pth-view-desktop');\r\n            var mobBtn  = document.getElementById('pth-view-mobile');\r\n            if (deskBtn) deskBtn.addEventListener('click', function () { self.setView(false); });\r\n            if (mobBtn)  mobBtn.addEventListener('click',  function () { self.setView(true); });\r\n\r\n            \/* Generate + Copy + Reset *\/\r\n            var genBtn = document.getElementById('pth-generate-btn');\r\n            if (genBtn) genBtn.addEventListener('click', function () { self.generateCode(); });\r\n            var copyBtn = document.getElementById('pth-copy-btn');\r\n            if (copyBtn) copyBtn.addEventListener('click', function () { self.copyCode(); });\r\n            var resetCodeBtn = document.getElementById('pth-reset-code-btn');\r\n            if (resetCodeBtn) resetCodeBtn.addEventListener('click', function () {\r\n                document.getElementById('pth-code-output').textContent = '\/\/ Click \"Generate HTML Code\" to build your layout\\u2026';\r\n                self.showToast('Code reset!', 'info');\r\n            });\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 SET LAYOUT \u2500\u2500\u2500 *\/\r\n        setLayout: function (layout) {\r\n            this.currentLayout = layout;\r\n\r\n            document.querySelectorAll('#pth-layout-grid .pth-layout-btn').forEach(function (btn) {\r\n                var isActive = btn.getAttribute('data-layout') === layout;\r\n                btn.classList.toggle('pth-active', isActive);\r\n                btn.setAttribute('aria-pressed', isActive ? 'true' : 'false');\r\n            });\r\n\r\n            \/* Show\/hide extra image groups *\/\r\n            var img2 = document.getElementById('pth-img2-group');\r\n            var img3 = document.getElementById('pth-img3-group');\r\n            if (img2) img2.style.display = (layout === '2col' || layout === '3col') ? 'block' : 'none';\r\n            if (img3) img3.style.display = (layout === '3col') ? 'block' : 'none';\r\n\r\n            \/* Show\/hide callout settings *\/\r\n            var calloutCard = document.getElementById('pth-callout-card');\r\n            if (calloutCard) calloutCard.style.display = (layout === 'callout') ? 'block' : 'none';\r\n\r\n            \/* Show\/hide text card *\/\r\n            var textCard = document.getElementById('pth-text-card');\r\n            var noText = ['full', 'center', '2col', '3col'];\r\n            if (textCard) textCard.style.display = noText.indexOf(layout) > -1 ? 'none' : 'block';\r\n\r\n            \/* Show\/hide col-width + gap controls *\/\r\n            var colWidthGroup = document.getElementById('pth-col-width-group');\r\n            var gapGroup = document.getElementById('pth-gap-group');\r\n            var hasColumns = ['left','right','wide','callout'].indexOf(layout) > -1;\r\n            if (colWidthGroup) colWidthGroup.style.display = hasColumns ? 'block' : 'none';\r\n            if (gapGroup) gapGroup.style.display = hasColumns ? 'block' : 'none';\r\n\r\n            \/* Show\/hide centered max-width *\/\r\n            var centeredMaxW = document.getElementById('pth-centered-maxw-group');\r\n            if (centeredMaxW) centeredMaxW.style.display = (layout === 'center') ? 'block' : 'none';\r\n\r\n            this.updatePreview();\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 SET CALLOUT THEME \u2500\u2500\u2500 *\/\r\n        setCalloutTheme: function (theme) {\r\n            this.currentCalloutTheme = theme;\r\n            document.querySelectorAll('#pth-callout-colors .pth-color-chip').forEach(function (chip) {\r\n                chip.classList.toggle('pth-active', chip.getAttribute('data-theme') === theme);\r\n            });\r\n            this.updatePreview();\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 SET VIEW \u2500\u2500\u2500 *\/\r\n        setView: function (isMobile) {\r\n            this.isMobilePreview = isMobile;\r\n            var stage = document.getElementById('pth-preview-stage');\r\n            var deskBtn = document.getElementById('pth-view-desktop');\r\n            var mobBtn  = document.getElementById('pth-view-mobile');\r\n            if (stage) stage.classList.toggle('pth-mobile', isMobile);\r\n            if (deskBtn) { deskBtn.classList.toggle('pth-active', !isMobile); deskBtn.setAttribute('aria-pressed', !isMobile ? 'true' : 'false'); }\r\n            if (mobBtn)  { mobBtn.classList.toggle('pth-active', isMobile); mobBtn.setAttribute('aria-pressed', isMobile ? 'true' : 'false'); }\r\n            this.updatePreview();\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 READ FIELDS \u2500\u2500\u2500 *\/\r\n        val: function (id) {\r\n            var el = document.getElementById(id);\r\n            if (!el) return '';\r\n            return el.type === 'checkbox' ? el.checked : el.value.trim();\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 BUILD IMAGE HTML \u2500\u2500\u2500 *\/\r\n        buildImg: function (url, alt, w, h, loading, radius, border) {\r\n            var style = 'width:100%;height:auto;display:block;';\r\n            if (radius) style += 'border-radius:10px;';\r\n            if (border) style += 'border:1px solid #e2e8f0;';\r\n            var src = url || 'YOUR-IMAGE-URL.jpeg';\r\n            var altText = alt || 'Descriptive alt text here';\r\n            return '<img decoding=\"async\" src=\"' + src + '\" alt=\"' + altText + '\" width=\"' + w + '\" height=\"' + h + '\" loading=\"' + loading + '\" style=\"' + style + '\">';\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 BUILD CAPTION \u2500\u2500\u2500 *\/\r\n        buildCaption: function (text) {\r\n            if (!text) return '';\r\n            return '\\n<p class=\"pth-img-caption\">' + text + '<\/p>';\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 BUILD TEXT BLOCK \u2500\u2500\u2500 *\/\r\n        buildTextBlock: function () {\r\n            var heading = this.val('pth-text-heading');\r\n            var p1 = this.val('pth-text-p1');\r\n            var p2 = this.val('pth-text-p2');\r\n            var out = '';\r\n            if (heading) out += '<h3 style=\"color:#0f172a;font-weight:800;font-size:18px;margin:0 0 12px;\">' + heading + '<\/h3>\\n';\r\n            if (p1) out += '<p style=\"color:#1e293b;font-weight:500;line-height:1.7;margin:0 0 12px;\">' + p1 + '<\/p>\\n';\r\n            if (p2) out += '<p style=\"color:#1e293b;font-weight:500;line-height:1.7;margin:0;\">' + p2 + '<\/p>\\n';\r\n            return out || '<p style=\"color:#1e293b;font-weight:500;\">Your text content here.<\/p>\\n';\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 GENERATE CODE \u2500\u2500\u2500 *\/\r\n        generateCode: function () {\r\n            var self = this;\r\n            var errBox = document.getElementById('pth-imgstudio-error');\r\n            if (errBox) errBox.style.display = 'none';\r\n\r\n            var url  = self.val('pth-img-url');\r\n            var alt  = self.val('pth-img-alt');\r\n            var w    = self.val('pth-img-w') || '800';\r\n            var h    = self.val('pth-img-h') || '450';\r\n            var load = self.val('pth-img-loading') || 'lazy';\r\n            var cap  = self.val('pth-img-caption');\r\n            var radius = self.val('pth-opt-radius');\r\n            var border = self.val('pth-opt-border');\r\n            var margin = self.val('pth-opt-margin');\r\n            var gap  = self.val('pth-gap-sel') || '28';\r\n            var colW = document.getElementById('pth-col-rng') ? document.getElementById('pth-col-rng').value : '48';\r\n            var textColW = (100 - parseInt(colW, 10)) + '%';\r\n            var colWpc   = colW + '%';\r\n            var marginStyle = margin ? 'margin:28px 0;' : '';\r\n            var layout = self.currentLayout;\r\n\r\n            var imgHTML = self.buildImg(url, alt, w, h, load, radius, border);\r\n            var capHTML = self.buildCaption(cap);\r\n\r\n            var imgStyle = 'width:100%;height:auto;display:block;';\r\n            if (radius) imgStyle += 'border-radius:10px;';\r\n            if (border)  imgStyle += 'border:1px solid #e2e8f0;';\r\n\r\n            var code = '';\r\n\r\n            if (layout === 'left' || layout === 'right') {\r\n                var imgFirst = layout === 'left';\r\n                code = '<!-- PTH Image ' + (imgFirst ? 'Left' : 'Right') + ' Layout -->\\n';\r\n                code += '<div style=\"display:grid;grid-template-columns:' + (imgFirst ? colWpc + ' ' + textColW : textColW + ' ' + colWpc) + ';gap:' + gap + 'px;align-items:start;' + marginStyle + '\">\\n';\r\n                if (!imgFirst) {\r\n                    code += '  <div style=\"min-width:0;\">\\n    ' + self.buildTextBlock().split('\\n').join('\\n    ').trimEnd() + '\\n  <\/div>\\n';\r\n                }\r\n                code += '  <div style=\"min-width:0;\">\\n    ' + imgHTML + capHTML.replace('\\n', '\\n    ') + '\\n  <\/div>\\n';\r\n                if (imgFirst) {\r\n                    code += '  <div style=\"min-width:0;\">\\n    ' + self.buildTextBlock().split('\\n').join('\\n    ').trimEnd() + '\\n  <\/div>\\n';\r\n                }\r\n                code += '<\/div>\\n';\r\n                code += '@media(max-width:680px) wrapper: stacks to single column automatically.\\n';\r\n                code += '<!-- Add <div style=\"clear:both;\"><\/div> after this block if using float elsewhere -->';\r\n\r\n            } else if (layout === 'full') {\r\n                code = '<!-- PTH Full Width Image -->\\n';\r\n                code += '<div style=\"' + marginStyle + '\">\\n';\r\n                code += '  ' + imgHTML + '\\n';\r\n                if (cap) code += '  <p style=\"font-size:12px;color:#64748b;text-align:center;margin-top:8px;font-style:italic;font-weight:500;\">' + cap + '<\/p>\\n';\r\n                code += '<\/div>';\r\n\r\n            } else if (layout === 'center') {\r\n                var maxW = self.val('pth-center-maxw') || '600';\r\n                code = '<!-- PTH Centered Image (max ' + maxW + 'px) -->\\n';\r\n                code += '<div style=\"max-width:' + maxW + 'px;' + marginStyle + 'text-align:center;margin-left:auto;margin-right:auto;\">\\n';\r\n                code += '  ' + imgHTML + '\\n';\r\n                if (cap) code += '  <p style=\"font-size:12px;color:#64748b;text-align:center;margin-top:8px;font-style:italic;font-weight:500;\">' + cap + '<\/p>\\n';\r\n                code += '<\/div>';\r\n\r\n            } else if (layout === '2col') {\r\n                var url2 = self.val('pth-img2-url'); var alt2 = self.val('pth-img2-alt');\r\n                var cap2 = self.val('pth-img2-caption');\r\n                var img2HTML = self.buildImg(url2 || 'IMAGE-2-URL.jpeg', alt2 || 'Image 2 alt text', w, h, load, radius, border);\r\n                code = '<!-- PTH Two Images Side by Side -->\\n';\r\n                code += '<div style=\"display:grid;grid-template-columns:1fr 1fr;gap:' + gap + 'px;' + marginStyle + '\">\\n';\r\n                code += '  <div style=\"min-width:0;\">\\n    ' + imgHTML + self.buildCaption(cap).replace('\\n','') + '\\n  <\/div>\\n';\r\n                code += '  <div style=\"min-width:0;\">\\n    ' + img2HTML + self.buildCaption(cap2).replace('\\n','') + '\\n  <\/div>\\n';\r\n                code += '<\/div>\\n';\r\n                code += '<style>@media(max-width:600px){.pth-2col{grid-template-columns:1fr!important}}<\/style>';\r\n\r\n            } else if (layout === '3col') {\r\n                var url2b = self.val('pth-img2-url'); var alt2b = self.val('pth-img2-alt'); var cap2b = self.val('pth-img2-caption');\r\n                var url3  = self.val('pth-img3-url'); var alt3  = self.val('pth-img3-alt'); var cap3  = self.val('pth-img3-caption');\r\n                var img2b = self.buildImg(url2b || 'IMAGE-2-URL.jpeg', alt2b || 'Image 2 alt text', w, h, load, radius, border);\r\n                var img3H = self.buildImg(url3  || 'IMAGE-3-URL.jpeg', alt3  || 'Image 3 alt text', w, h, load, radius, border);\r\n                code = '<!-- PTH Three Images Grid -->\\n';\r\n                code += '<div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:' + gap + 'px;' + marginStyle + '\">\\n';\r\n                code += '  <div style=\"min-width:0;\">\\n    ' + imgHTML  + self.buildCaption(cap).replace('\\n','')   + '\\n  <\/div>\\n';\r\n                code += '  <div style=\"min-width:0;\">\\n    ' + img2b    + self.buildCaption(cap2b).replace('\\n','') + '\\n  <\/div>\\n';\r\n                code += '  <div style=\"min-width:0;\">\\n    ' + img3H    + self.buildCaption(cap3).replace('\\n','')  + '\\n  <\/div>\\n';\r\n                code += '<\/div>\\n';\r\n                code += '<style>@media(max-width:680px){.pth-3col{grid-template-columns:1fr 1fr!important}}@media(max-width:420px){.pth-3col{grid-template-columns:1fr!important}}<\/style>';\r\n\r\n            } else if (layout === 'wide') {\r\n                code = '<!-- PTH Wide Image (70%) + Text Column (30%) -->\\n';\r\n                code += '<div style=\"display:grid;grid-template-columns:' + colWpc + ' ' + textColW + ';gap:' + gap + 'px;align-items:start;' + marginStyle + '\">\\n';\r\n                code += '  <div style=\"min-width:0;\">\\n    ' + imgHTML + capHTML.replace('\\n', '\\n    ') + '\\n  <\/div>\\n';\r\n                code += '  <div style=\"min-width:0;\">\\n    ' + self.buildTextBlock().split('\\n').join('\\n    ').trimEnd() + '\\n  <\/div>\\n';\r\n                code += '<\/div>';\r\n\r\n            } else if (layout === 'callout') {\r\n                var theme  = self.calloutThemes[self.currentCalloutTheme];\r\n                var cIcon  = self.val('pth-callout-icon')  || '\\uD83D\\uDD12';\r\n                var cTitle = self.val('pth-callout-title') || 'Note';\r\n                var cText  = self.val('pth-callout-text')  || 'Your callout text here.';\r\n                code = '<!-- PTH Image + Callout Box -->\\n';\r\n                code += '<div style=\"display:grid;grid-template-columns:' + colWpc + ' ' + textColW + ';gap:' + gap + 'px;align-items:start;' + marginStyle + '\">\\n';\r\n                code += '  <div style=\"min-width:0;\">\\n    ' + imgHTML + capHTML.replace('\\n', '\\n    ') + '\\n  <\/div>\\n';\r\n                code += '  <div style=\"background:' + theme.bg + ';border:1px solid ' + theme.border + ';border-left:4px solid ' + theme.border + ';border-radius:0 10px 10px 0;padding:20px;min-width:0;\">\\n';\r\n                code += '    <span style=\"font-size:22px;margin-bottom:8px;display:block;\">' + cIcon + '<\/span>\\n';\r\n                code += '    <div style=\"font-size:13px;font-weight:800;color:' + theme.titleColor + ';margin-bottom:8px;text-transform:uppercase;letter-spacing:0.4px;\">' + cTitle + '<\/div>\\n';\r\n                code += '    <p style=\"font-size:14px;color:' + theme.textColor + ';font-weight:500;line-height:1.7;margin:0;\">' + cText + '<\/p>\\n';\r\n                code += '  <\/div>\\n';\r\n                code += '<\/div>';\r\n            }\r\n\r\n            \/* Add responsive CSS note *\/\r\n            if (layout === 'left' || layout === 'right' || layout === 'wide' || layout === 'callout') {\r\n                code += '\\n\\n<!-- RESPONSIVE CSS \u2014 add once per article at top of Block 2 -->\\n';\r\n                code += '<style>\\n@media(max-width:680px){\\n  [style*=\"grid-template-columns\"]{grid-template-columns:1fr!important;}\\n}\\n<\/style>';\r\n            }\r\n\r\n            document.getElementById('pth-code-output').textContent = code;\r\n            self.updatePreview();\r\n            self.showToast('Code generated! Click Copy to use.', 'success');\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 LIVE PREVIEW \u2500\u2500\u2500 *\/\r\n        updatePreview: function () {\r\n            var self = this;\r\n            var stage = document.getElementById('pth-preview-stage');\r\n            if (!stage) return;\r\n\r\n            var layout = self.currentLayout;\r\n            var url    = self.val('pth-img-url');\r\n            var cap    = self.val('pth-img-caption');\r\n            var cap2   = self.val('pth-img2-caption');\r\n            var cap3   = self.val('pth-img3-caption');\r\n            var heading = self.val('pth-text-heading') || 'Your Heading Here';\r\n            var p1 = self.val('pth-text-p1') || 'Your paragraph text flows naturally beside the image on desktop screens.';\r\n            var p2 = self.val('pth-text-p2');\r\n            var radius = self.val('pth-opt-radius');\r\n            var border = self.val('pth-opt-border');\r\n            var gap = parseInt(self.val('pth-gap-sel') || 28, 10);\r\n            var colW = document.getElementById('pth-col-rng') ? parseInt(document.getElementById('pth-col-rng').value, 10) : 48;\r\n            var textColW = (100 - colW) + '%';\r\n            var colWpc = colW + '%';\r\n            var isMobile = self.isMobilePreview;\r\n\r\n            \/* Build preview image element *\/\r\n            function previewImg(urlVal, capVal) {\r\n                var imgStyle = 'width:100%;height:auto;display:block;';\r\n                if (radius) imgStyle += 'border-radius:8px;';\r\n                if (border) imgStyle += 'border:1px solid #e2e8f0;';\r\n                var inner = urlVal\r\n                    ? '<img decoding=\"async\" src=\"' + urlVal + '\" alt=\"Preview\" style=\"' + imgStyle + '\" width=\"400\" height=\"225\" loading=\"lazy\">'\r\n                    : '<div class=\"pth-ph-img\"><span class=\"pth-ph-icon\">\ud83d\uddbc\ufe0f<\/span><span>Image Preview<\/span><\/div>';\r\n                var capEl = capVal ? '<p class=\"pth-preview-caption\">' + capVal + '<\/p>' : '';\r\n                return '<div style=\"min-width:0;\">' + inner + capEl + '<\/div>';\r\n            }\r\n\r\n            \/* Build preview text *\/\r\n            function previewText() {\r\n                return '<div style=\"min-width:0;\">' +\r\n                    '<p class=\"pth-ph-h3\">' + heading + '<\/p>' +\r\n                    '<p class=\"pth-ph-p\">' + p1 + '<\/p>' +\r\n                    (p2 ? '<p class=\"pth-ph-p\">' + p2 + '<\/p>' : '') +\r\n                    '<\/div>';\r\n            }\r\n\r\n            var html = '';\r\n\r\n            if (layout === 'left' || layout === 'right') {\r\n                var cols = isMobile ? '1fr' : (layout === 'left' ? colWpc + ' ' + textColW : textColW + ' ' + colWpc);\r\n                html = '<div style=\"display:grid;grid-template-columns:' + cols + ';gap:' + (isMobile ? 12 : gap) + 'px;align-items:start;\">';\r\n                if (layout === 'left') { html += previewImg(url, cap) + previewText(); }\r\n                else { html += previewText() + previewImg(url, cap); }\r\n                html += '<\/div>';\r\n\r\n            } else if (layout === 'full') {\r\n                html = previewImg(url, cap).replace('min-width:0', 'min-width:0;width:100%');\r\n\r\n            } else if (layout === 'center') {\r\n                var maxW = self.val('pth-center-maxw') || '600';\r\n                html = '<div style=\"max-width:' + (isMobile ? '100%' : maxW + 'px') + ';margin:0 auto;\">' + previewImg(url, cap) + '<\/div>';\r\n\r\n            } else if (layout === '2col') {\r\n                var cols2 = isMobile ? '1fr' : '1fr 1fr';\r\n                var url2  = self.val('pth-img2-url');\r\n                html = '<div style=\"display:grid;grid-template-columns:' + cols2 + ';gap:' + (isMobile ? 12 : gap) + 'px;\">';\r\n                html += previewImg(url, cap) + previewImg(url2, cap2) + '<\/div>';\r\n\r\n            } else if (layout === '3col') {\r\n                var cols3 = isMobile ? '1fr 1fr' : 'repeat(3,1fr)';\r\n                var url2c = self.val('pth-img2-url'); var url3c = self.val('pth-img3-url');\r\n                html = '<div style=\"display:grid;grid-template-columns:' + cols3 + ';gap:' + (isMobile ? 10 : gap) + 'px;\">';\r\n                html += previewImg(url, cap) + previewImg(url2c, cap2) + previewImg(url3c, cap3) + '<\/div>';\r\n\r\n            } else if (layout === 'wide') {\r\n                var cols4 = isMobile ? '1fr' : (colWpc + ' ' + textColW);\r\n                html = '<div style=\"display:grid;grid-template-columns:' + cols4 + ';gap:' + (isMobile ? 12 : gap) + 'px;align-items:start;\">';\r\n                html += previewImg(url, cap) + previewText() + '<\/div>';\r\n\r\n            } else if (layout === 'callout') {\r\n                var theme  = self.calloutThemes[self.currentCalloutTheme];\r\n                var cIcon  = self.val('pth-callout-icon')  || '\\uD83D\\uDD12';\r\n                var cTitle = self.val('pth-callout-title') || 'Note';\r\n                var cText  = self.val('pth-callout-text')  || 'Your callout text here.';\r\n                var cols5  = isMobile ? '1fr' : (colWpc + ' ' + textColW);\r\n                html = '<div style=\"display:grid;grid-template-columns:' + cols5 + ';gap:' + (isMobile ? 12 : gap) + 'px;align-items:start;\">';\r\n                html += previewImg(url, cap);\r\n                html += '<div class=\"pth-callout-preview\" style=\"background:' + theme.bg + ';border-color:' + theme.border + ';border-left-color:' + theme.border + ';\">';\r\n                html += '<span class=\"pth-callout-p-icon\">' + cIcon + '<\/span>';\r\n                html += '<div class=\"pth-callout-p-title\" style=\"color:' + theme.titleColor + ';\">' + cTitle + '<\/div>';\r\n                html += '<p class=\"pth-callout-p-text\" style=\"color:' + theme.textColor + ';\">' + cText + '<\/p>';\r\n                html += '<\/div><\/div>';\r\n            }\r\n\r\n            stage.innerHTML = html;\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 GENERATE CODE \u2500\u2500\u2500 (already defined) \u2500\u2500\u2500 *\/\r\n\r\n        \/* \u2500\u2500\u2500 COPY CODE \u2500\u2500\u2500 *\/\r\n        copyCode: function () {\r\n            var box = document.getElementById('pth-code-output');\r\n            if (!box) return;\r\n            var text = box.textContent;\r\n            if (!text || text.indexOf('Click') === 0) { this.showToast('Generate code first!', 'error'); return; }\r\n            try {\r\n                navigator.clipboard.writeText(text).then(function () {});\r\n            } catch (e) {\r\n                var ta = document.createElement('textarea');\r\n                ta.value = text;\r\n                ta.style.position = 'fixed';\r\n                ta.style.top = '-9999px';\r\n                document.body.appendChild(ta);\r\n                ta.select();\r\n                document.execCommand('copy');\r\n                document.body.removeChild(ta);\r\n            }\r\n            this.showToast('Code copied to clipboard!', 'success');\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 LOAD SAMPLE \u2500\u2500\u2500 *\/\r\n        loadSample: function () {\r\n            document.getElementById('pth-img-url').value = 'https:\/\/schoolict.net\/tools\/wp-content\/uploads\/2026\/06\/audio-studio-ffmpeg-wasm-flow.jpeg';\r\n            document.getElementById('pth-img-alt').value = 'FFmpeg WASM audio processing flow diagram \u2014 browser audio editor converting MP3 WAV OGG with WebAssembly engine';\r\n            document.getElementById('pth-img-w').value = '800';\r\n            document.getElementById('pth-img-h').value = '450';\r\n            document.getElementById('pth-img-loading').value = 'lazy';\r\n            document.getElementById('pth-img-caption').value = 'FFmpeg WASM processes audio entirely inside your browser tab \u2014 zero server contact.';\r\n            document.getElementById('pth-text-heading').value = '\ud83d\udfe2 How FFmpeg WASM Processes Audio in Your Browser';\r\n            document.getElementById('pth-text-p1').value = 'When you click Process Audio, FFmpeg runs as a compiled WebAssembly binary inside your browser tab. Your file never leaves your device \u2014 the entire encode\/decode pipeline happens locally in browser RAM.';\r\n            document.getElementById('pth-text-p2').value = 'The single-thread safe build avoids SharedArrayBuffer restrictions. On a 5MB MP3 file, operations like Normalize or Bass Boost complete in 8\u201320 seconds depending on your CPU.';\r\n            document.getElementById('pth-callout-icon').value = '\\uD83D\\uDD12';\r\n            document.getElementById('pth-callout-title').value = 'Privacy Guaranteed';\r\n            document.getElementById('pth-callout-text').value = 'Zero bytes of your audio data cross a network boundary. Open Chrome DevTools Network tab \u2014 you will see no POST requests during processing.';\r\n            this.updatePreview();\r\n            this.showToast('Sample loaded! Click Generate to build code.', 'success');\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 CLEAR ALL \u2500\u2500\u2500 *\/\r\n        clearAll: function () {\r\n            var ids = [\r\n                'pth-img-url','pth-img-alt','pth-img-caption',\r\n                'pth-img2-url','pth-img2-alt','pth-img2-caption',\r\n                'pth-img3-url','pth-img3-alt','pth-img3-caption',\r\n                'pth-text-heading','pth-text-p1','pth-text-p2',\r\n                'pth-callout-title','pth-callout-text'\r\n            ];\r\n            ids.forEach(function (id) { var el = document.getElementById(id); if (el) el.value = ''; });\r\n            document.getElementById('pth-img-w').value = '800';\r\n            document.getElementById('pth-img-h').value = '450';\r\n            document.getElementById('pth-callout-icon').value = '\\uD83D\\uDD12';\r\n            document.getElementById('pth-callout-title').value = 'Note';\r\n            document.getElementById('pth-col-rng').value = 48;\r\n            document.getElementById('pth-col-val').textContent = '48%';\r\n            document.getElementById('pth-col-disp').textContent = '48%';\r\n            document.getElementById('pth-code-output').textContent = '\/\/ Click \"Generate HTML Code\" to build your layout\\u2026';\r\n            this.updatePreview();\r\n            this.showToast('Cleared!', 'info');\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 TOGGLE WIDTH \u2500\u2500\u2500 *\/\r\n        toggleWidth: function () {\r\n            var layout = document.getElementById('pth-imgstudio-layout');\r\n            var sidebar = document.getElementById('pth-imgstudio-sidebar');\r\n            var btn = document.getElementById('pth-is-fw-btn');\r\n            if (!layout || !sidebar || !btn) return;\r\n            if (layout.classList.contains('pth-full-width')) {\r\n                layout.classList.remove('pth-full-width');\r\n                sidebar.style.display = '';\r\n                btn.textContent = '\\u29c6 Full Width';\r\n            } else {\r\n                layout.classList.add('pth-full-width');\r\n                sidebar.style.display = 'none';\r\n                btn.textContent = '\\u25e8 Split View';\r\n            }\r\n        },\r\n\r\n        \/* \u2500\u2500\u2500 TOAST \u2500\u2500\u2500 *\/\r\n        showToast: function (msg, type) {\r\n            var c = document.getElementById('pth-imgstudio-toast');\r\n            if (!c) return;\r\n            var t = document.createElement('div');\r\n            t.className = 'pth-toast-msg pth-toast-' + (type || 'info');\r\n            t.textContent = msg;\r\n            c.appendChild(t);\r\n            setTimeout(function () { if (t.parentNode) t.parentNode.removeChild(t); }, 3500);\r\n        }\r\n    };\r\n\r\n    \/* \u2500\u2500 4-LAYER BOOTSTRAP \u2500\u2500 *\/\r\n    function runInit() {\r\n        if (!window.pthImageStudioApp.initialized &&\r\n            document.getElementById('pth-imgstudio-wrapper')) {\r\n            window.pthImageStudioApp.initialized = true;\r\n            window.pthImageStudioApp.init();\r\n        }\r\n    }\r\n    runInit();\r\n    if (document.readyState === 'loading') {\r\n        document.addEventListener('DOMContentLoaded', runInit);\r\n    }\r\n    window.addEventListener('load', function () { setTimeout(runInit, 50); });\r\n    if (!window.pthImageStudioApp.initialized && typeof MutationObserver !== 'undefined') {\r\n        var pthObs = new MutationObserver(function () {\r\n            if (document.getElementById('pth-imgstudio-wrapper')) {\r\n                pthObs.disconnect(); runInit();\r\n            }\r\n        });\r\n        pthObs.observe(document.body || document.documentElement, { childList: true, subtree: true });\r\n        setTimeout(function () { pthObs.disconnect(); }, 10000);\r\n    }\r\n})();\r\n<\/script>\n\n\n\n<style>\n.pth-feature-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:30px}\n.pth-feat-box{border:1px solid #e2e8f0;background:#fff;padding:24px;border-radius:12px;box-shadow:0 4px 6px -1px rgba(0,0,0,0.02);transition:all .3s ease}\n.pth-feat-box:hover{border-color:#bfdbfe;transform:translateY(-3px);box-shadow:0 10px 15px -3px rgba(0,0,0,0.05)}\n.pth-feat-title{font-size:1.05rem;font-weight:800;color:#0f172a;margin-bottom:10px;display:flex;align-items:center;gap:10px}\n.pth-feat-text{font-size:.9rem;color:#1e293b;line-height:1.6;margin:0;font-weight:500}\n.pth-steps-wrap{border:1px solid #e2e8f0;background:#fff;padding:40px 30px;border-radius:16px;text-align:center;box-shadow:0 4px 6px -1px rgba(0,0,0,0.02);margin-bottom:40px}\n.pth-steps-title{font-size:1.2rem;font-weight:800;color:#0f172a;text-transform:uppercase;margin-bottom:35px;letter-spacing:1px}\n.pth-steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px}\n.pth-step-item{display:flex;flex-direction:column;align-items:center}\n.pth-step-num{width:45px;height:45px;background:#2563eb;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;margin-bottom:15px;box-shadow:0 4px 10px rgba(37,99,235,.3)}\n.pth-step-name{font-weight:800;color:#0f172a;margin-bottom:8px;font-size:1rem}\n.pth-step-desc{font-size:.9rem;color:#1e293b;line-height:1.5;margin:0;font-weight:500}\n<\/style>\n \n<div class=\"pth-feature-wrap\">\n    <div class=\"pth-feat-box\">\n        <div class=\"pth-feat-title\">\ud83d\udfe2 8 Layout Templates with Live Preview<\/div>\n        <p class=\"pth-feat-text\">Choose from Image Left, Image Right, Full Width, Centered, Two Images, Three Images, Wide 70\/30, or Callout Box layouts. Click any layout button and the sidebar Live Preview updates instantly \u2014 switch between Desktop (full width) and Mobile (390px) preview modes to verify how your layout stacks on small screens before copying the code.<\/p>\n    <\/div>\n    <div class=\"pth-feat-box\">\n        <div class=\"pth-feat-title\">\ud83d\udd35 Full Image + Text Controls<\/div>\n        <p class=\"pth-feat-text\">Enter your WP Media Library image URL, alt text, exact width and height (for CLS prevention), loading strategy (lazy or eager), and optional caption. For split layouts, type your H3 heading and up to two paragraphs directly into the text fields \u2014 the preview shows your real content beside the image, not placeholder text. Two-image and three-image layouts include separate URL, alt, and caption fields for each image.<\/p>\n    <\/div>\n    <div class=\"pth-feat-box\">\n        <div class=\"pth-feat-title\">\ud83d\udfe3 One-Click Code Generation + Copy<\/div>\n        <p class=\"pth-feat-text\">Click \ud83d\ude80 Generate HTML Code and the tool outputs clean, production-ready HTML with inline styles \u2014 no external CSS classes required. Column width slider (30\u201370%) and gap selector (16\u201336px) fine-tune the layout proportions. The callout box builder lets you pick icon, title, text, and color theme (purple, blue, green, amber, red). Click \ud83d\udccb Copy Code and paste directly into a WP HTML block.<\/p>\n    <\/div>\n<\/div>\n \n<div class=\"pth-steps-wrap\">\n    <div class=\"pth-steps-title\">How to Use Article Image Placement Studio<\/div>\n    <div class=\"pth-steps-grid\">\n        <div class=\"pth-step-item\">\n            <div class=\"pth-step-num\">1<\/div>\n            <div class=\"pth-step-name\">Pick a Layout<\/div>\n            <p class=\"pth-step-desc\">Click any of the 8 layout buttons \u2014 Image Left, Image Right, Full Width, Centered, 2 Images, 3 Images, Wide 70\/30, or Callout Box. The Live Preview sidebar updates instantly. Use \ud83d\udca1 Load Sample to see a complete working example.<\/p>\n        <\/div>\n        <div class=\"pth-step-item\">\n            <div class=\"pth-step-num\">2<\/div>\n            <div class=\"pth-step-name\">Fill Image Settings<\/div>\n            <p class=\"pth-step-desc\">Paste your WP Media Library image URL into the Image URL field. Add descriptive alt text, set the exact pixel width and height (copy from WP Media Library), choose lazy or eager loading. Add an optional caption \u2014 leave blank to hide it.<\/p>\n        <\/div>\n        <div class=\"pth-step-item\">\n            <div class=\"pth-step-num\">3<\/div>\n            <div class=\"pth-step-name\">Add Text + Style<\/div>\n            <p class=\"pth-step-desc\">For split layouts, type your H3 heading and paragraphs in Step 3. Adjust the Image Column Width slider and Gap selector in Step 4. Toggle rounded corners, border, and margin on\/off. For Callout Box, set icon emoji, title, body text, and color theme.<\/p>\n        <\/div>\n        <div class=\"pth-step-item\">\n            <div class=\"pth-step-num\">4<\/div>\n            <div class=\"pth-step-name\">Generate + Copy + Paste<\/div>\n            <p class=\"pth-step-desc\">Click \ud83d\ude80 Generate HTML Code. Preview mobile layout by clicking \ud83d\udcf1 Mobile in the sidebar. Click \ud83d\udccb Copy Code, then paste into a WP HTML block in Visual Editor. The code includes inline responsive CSS \u2014 no separate stylesheet needed.<\/p>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Last updated: June 2026<\/p>\n\n\n\n<h2 id=\"\ud83d\udd34-why-html-image-layouts-matter-for-article-seo-and-reader-engagement\" class=\"wp-block-heading\">\ud83d\udd34&nbsp;<strong>Why HTML Image Layouts Matter for Article SEO and Reader Engagement<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Image placement isn&#8217;t decoration. It&#8217;s a functional decision that affects time-on-page, Core Web Vitals, and how readers scan your content. A diagram pasted as a full-width image after a paragraph forces the reader to stop reading, look at the image, then find their place in the text again. The same diagram placed beside the relevant paragraph creates a single visual unit \u2014 the eye reads text and processes the image simultaneously. That&#8217;s the layout pattern professional editorial teams use: image beside the explanation it supports, not after it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress doesn&#8217;t make this easy. The block editor&#8217;s default image block is full-width or fixed-percentage, with no built-in text-wrap. The classic float approach \u2014&nbsp;<code>float:left<\/code>&nbsp;with a manual&nbsp;<code>clear:both<\/code>&nbsp;\u2014 works but produces inconsistent mobile behaviour when column widths aren&#8217;t carefully set with&nbsp;<code>min-width<\/code>&nbsp;constraints. CSS Grid layouts solve the stacking problem correctly:&nbsp;<code>grid-template-columns: 1fr 1fr<\/code>&nbsp;with a&nbsp;<code>@media(max-width:680px)<\/code>&nbsp;override switches to&nbsp;<code>1fr<\/code>&nbsp;on mobile, ensuring the image sits above the text rather than squeezing beside it at 50% of a 390px screen.<\/p>\n\n\n\n<h2 id=\"\ud83d\udfe1-8-layout-templates-when-to-use-each-one\" class=\"wp-block-heading\">\ud83d\udfe1&nbsp;<strong>8 Layout Templates \u2014 When to Use Each One<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Each layout pattern serves a different content type. Choosing the right one improves readability without requiring design experience.<\/p>\n\n\n\n<h3 id=\"\ud83d\udfe2-split-layouts-image-left-right-and-wide-70-30\" class=\"wp-block-heading\">\ud83d\udfe2&nbsp;<strong>Split Layouts \u2014 Image Left, Right, and Wide 70\/30<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Image Left<\/strong>&nbsp;is the default editorial pattern \u2014 diagram on the left, explanation on the right. Works because Western reading direction (left to right) means eyes land on the image first, building context before the text. Use this for technical diagrams, flowcharts, and tool screenshots where the image is the subject and the text explains it.&nbsp;<strong>Image Right<\/strong>&nbsp;creates visual rhythm in long articles when alternated with Image Left sections \u2014 the change in image position signals a new topic to readers scanning the page. Alternate these two layouts every two to three H2 sections.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Wide 70\/30<\/strong>&nbsp;is the power layout for large diagrams. The image takes 70% of the column (adjustable via the slider) and the text column is narrow \u2014 30% or less. Use this for complex infographics, architecture diagrams, or multi-stage flow diagrams where you need the image to be large enough to read the labels, but still want to keep a short list of key points beside it rather than below it. The Column Width slider in the tool lets you set any proportion from 30\/70 to 70\/30 in 2% increments.<\/p>\n\n\n\n<figure style=\"float:left; width:58%; max-width:600px; min-width:260px; margin:4px 28px 16px 0; clear:left;\"> <img decoding=\"async\" src=\"https:\/\/schoolict.net\/tools\/wp-content\/uploads\/2026\/06\/article-image-placement-studio-tool-preview.jpeg\" alt=\"Article Image Placement Studio showing 8 layout options with live preview panel and generated HTML code output\" width=\"800\" height=\"450\" loading=\"lazy\" style=\"width:100%; height:auto; display:block; border-radius:10px; border:1px solid #e2e8f0;\"> <\/figure>\n\n\n\n<h3 id=\"\ud83d\udfe2-multi-image-layouts-two-images-and-three-images\" class=\"wp-block-heading\">\ud83d\udfe2&nbsp;<strong>Multi-Image Layouts \u2014 Two Images and Three Images<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Two Images<\/strong>&nbsp;suits before\/after comparisons, option A vs option B, or two sequential screenshots. Each image column is 50% on desktop, stacking to 100% on mobile. Add individual alt text and captions for each image \u2014 the tool generates separate fields for each.&nbsp;<strong>Three Images<\/strong>&nbsp;uses a&nbsp;<code>repeat(3,1fr)<\/code>&nbsp;grid \u2014 three equal columns on desktop, two columns on tablet (<code>max-width:680px<\/code>), and one column on small mobile (<code>max-width:420px<\/code>). Best for step-by-step tutorial screenshots showing Step 1, Step 2, Step 3 \u2014 or a three-feature showcase with one screenshot per feature. Keep caption text short \u2014 three columns leave limited horizontal space.<\/p>\n\n\n\n<h3 id=\"\ud83d\udfe2-callout-box-layout-image-highlighted-note\" class=\"wp-block-heading\">\ud83d\udfe2&nbsp;<strong>Callout Box Layout \u2014 Image + Highlighted Note<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Callout Box layout places your diagram on the left and a highlighted information box on the right. Use it when the diagram needs a key takeaway, warning, privacy note, or pro tip beside it rather than a full paragraph explanation. Five color themes are available: purple (default \u2014 general note), blue (informational), green (success\/tip), amber (warning), red (danger\/caution). The callout box builder in the tool generates the full inline-styled HTML with your chosen icon emoji, title, and body text. The resulting code doesn&#8217;t depend on any external CSS class \u2014 it&#8217;s fully self-contained using inline styles, so it works in any WP HTML block without a stylesheet.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83d\udd35&nbsp;<strong>Column Width slider<\/strong>&nbsp;\u2014 sets the image column from 30% to 70%, text column fills the remainder. Drag left for a narrow image beside long text; drag right for a wide diagram with a short note.<\/li>\n\n\n\n<li>\ud83d\udfe0&nbsp;<strong>Gap selector<\/strong>&nbsp;\u2014 16px (tight, dense technical content), 20px (compact), 28px (standard editorial), 36px (spacious, breathing room between diagram and explanation).<\/li>\n\n\n\n<li>\ud83d\udfe3&nbsp;<strong>Responsive CSS<\/strong>&nbsp;\u2014 every generated layout includes a&nbsp;<code>@media(max-width:680px)<\/code>&nbsp;rule that collapses the grid to a single column. On mobile the image always appears above the text \u2014 never beside it at unreadable sizes.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"\ud83d\udfe1-cls-prevention-why-width-and-height-matter-in-every-image-tag\" class=\"wp-block-heading\">\ud83d\udfe1&nbsp;<strong>CLS Prevention \u2014 Why Width and Height Matter in Every Image Tag<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Cumulative Layout Shift (CLS) is a&nbsp;<a href=\"https:\/\/web.dev\/articles\/cls\" rel=\"noreferrer noopener\" target=\"_blank\">Core Web Vitals metric<\/a>&nbsp;that measures how much page content jumps during load. An image without explicit&nbsp;<code>width<\/code>&nbsp;and&nbsp;<code>height<\/code>&nbsp;attributes causes the browser to reserve zero vertical space until the image downloads \u2014 then the image expands and pushes all content below it down. On a slow mobile connection, this produces a visible jump that Google penalises in search rankings and that users find disorienting.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The tool requires explicit width and height for every image \u2014 these values appear directly in the generated&nbsp;<code>img<\/code>&nbsp;tag as&nbsp;<code>width=\"800\" height=\"450\"<\/code>. Combined with&nbsp;<code>style=\"width:100%;height:auto;\"<\/code>, the browser calculates the correct aspect ratio at parse time and reserves the exact vertical space before the image loads. Zero layout shift. Find your image&#8217;s exact pixel dimensions in WP Media Library \u2014 click the image, then &#8220;Edit image&#8221; to see the full resolution. Enter those values in the tool&#8217;s Width and Height fields. The output handles CSS scaling automatically.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For hero images \u2014 the first image above the fold \u2014 change Loading from&nbsp;<code>lazy<\/code>&nbsp;to&nbsp;<code>eager<\/code>&nbsp;in the tool&#8217;s dropdown. This removes the lazy loading delay for the most important image on the page, which improves LCP (Largest Contentful Paint). Use&nbsp;<a href=\"https:\/\/schoolict.net\/tools\/article-image-placement-studio\/\">Article Image Placement Studio<\/a>&nbsp;for all image blocks across your articles to ensure every image tag follows the same CLS-safe, WCAG-compliant pattern consistently.<\/p>\n\n\n\n<style>\n.pth-faq-section{margin-top:50px;margin-bottom:40px;font-family:inherit}\n.pth-faq-header{font-size:1.8rem;font-weight:800;color:#0f172a;margin-bottom:25px;border-bottom:2px solid #e2e8f0;padding-bottom:10px;display:flex;align-items:center;gap:10px}\n.pth-faq-grid{display:grid;grid-template-columns:100%;gap:20px}\n@media(min-width:768px){.pth-faq-grid{grid-template-columns:repeat(2,1fr)}}\n@media(min-width:1024px){.pth-faq-grid{grid-template-columns:repeat(3,1fr)}}\n.pth-faq-card{background:#f8fafc;padding:24px;border-radius:12px;border:1px solid #e2e8f0;transition:transform .2s ease;break-inside:avoid}\n.pth-faq-card:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(0,0,0,.05)}\n.pth-faq-q{color:#0f172a;font-size:1rem;font-weight:700;margin:0 0 12px;line-height:1.4}\n.pth-faq-a{margin:0;font-size:.95rem;color:#1e293b;line-height:1.6;font-weight:500}\n<\/style>\n \n<div class=\"pth-faq-section\">\n    <div class=\"pth-faq-header\">\ud83e\udd14 Frequently Asked Questions<\/div>\n    <div class=\"pth-faq-grid\">\n \n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">Does the generated code require any extra CSS or stylesheet?<\/p>\n            <p class=\"pth-faq-a\">No. Every layout uses inline styles only \u2014 no external classes, no separate stylesheet required. Paste the generated code directly into a WP HTML block and it works immediately. The responsive media query is injected as a small inline <code>&lt;style&gt;<\/code> block within the generated output.<\/p>\n        <\/div>\n \n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">Why does the tool ask for image width and height?<\/p>\n            <p class=\"pth-faq-a\">Explicit width and height attributes prevent Cumulative Layout Shift (CLS) \u2014 a Core Web Vitals metric that affects Google rankings. Without them, the browser reserves no vertical space for the image until it downloads, causing visible content jumps. Find your image dimensions in WP Media Library and enter them in the tool&#8217;s Width and Height fields.<\/p>\n        <\/div>\n \n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">How does the mobile preview work?<\/p>\n            <p class=\"pth-faq-a\">Click \ud83d\udcf1 Mobile in the Live Preview sidebar to switch the preview panel to a 390px viewport simulation. Split layouts (Image Left, Right, Wide 70\/30, Callout) collapse to a single column with the image above the text. Multi-image layouts (2 Images) go to full width; Three Images goes to a 2-column then 1-column grid at smaller breakpoints.<\/p>\n        <\/div>\n \n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">Can I use this for hero images that load above the fold?<\/p>\n            <p class=\"pth-faq-a\">Yes. Change the Loading dropdown from &#8220;lazy&#8221; to &#8220;eager&#8221; for any above-the-fold image. The generated <code>img<\/code> tag will include <code>loading=\"eager\"<\/code>, which tells the browser to fetch the image immediately rather than deferring it. This improves Largest Contentful Paint (LCP), a Core Web Vitals metric. Use lazy loading for all images below the fold.<\/p>\n        <\/div>\n \n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">What&#8217;s the Column Width slider for?<\/p>\n            <p class=\"pth-faq-a\">The slider controls the image column&#8217;s percentage of the total layout width for split layouts (Image Left, Right, Wide 70\/30, Callout Box). The text column fills the remaining percentage automatically. Drag to 70% for wide diagrams with short notes; use 48% (default) for equal split; go to 35% for a small image beside a long explanation paragraph.<\/p>\n        <\/div>\n \n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">How do I add multiple images for a 2-column or 3-column layout?<\/p>\n            <p class=\"pth-faq-a\">Select &#8220;2 Images&#8221; or &#8220;3 Images&#8221; from the layout picker. The Image Settings section expands to show separate URL, alt text, and caption fields for each image (Image 2 for 2-col, Image 2 and Image 3 for 3-col). Fill each one with its respective WP Media Library URL and alt text, then click Generate.<\/p>\n        <\/div>\n \n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">Can I change the callout box color after generating code?<\/p>\n            <p class=\"pth-faq-a\">Yes \u2014 select a different color chip (purple, blue, green, amber, red) before clicking Generate, or change it after and regenerate. The colors are applied as inline background, border, and text colors in the generated HTML \u2014 you can also edit the hex values directly in the output code if you need a custom color not in the five presets.<\/p>\n        <\/div>\n \n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">Where do I paste the generated code in WordPress?<\/p>\n            <p class=\"pth-faq-a\">In the WP block editor, add a new HTML block (click +, search &#8220;HTML&#8221;, or use the Custom HTML block option). Paste the generated code directly into the HTML block. Switch to Preview to verify the layout. Do not paste into the Visual\/Paragraph block \u2014 the inline styles and grid CSS require the raw HTML block to render correctly.<\/p>\n        <\/div>\n \n        <div class=\"pth-faq-card\">\n            <p class=\"pth-faq-q\">My image URL is from WP Media Library \u2014 how do I find the exact URL?<\/p>\n            <p class=\"pth-faq-a\">In WP Admin go to Media \u2192 Library, click your image, then click &#8220;Copy URL to clipboard&#8221; on the right panel. Use the full-size URL (not a thumbnail version) for best quality \u2014 the tool&#8217;s CSS scales it to fit the column using <code>width:100%;height:auto<\/code>. The width and height attributes should match the full-size image dimensions shown in that same panel.<\/p>\n        <\/div>\n \n    <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>SEO &#038; WCAG Friendly HTML Image Layout Generator Create perfectly aligned, SEO-friendly, and responsive image layouts for your blog with our Article Image Placement Studio. Generate 100% offline, zero CLS HTML code. \ud83d\udfe2 8 Layout Templates with Live Preview Choose from Image Left, Image Right, Full Width, Centered, Two Images, Three Images, Wide 70\/30, or &#8230; <a title=\"Article Image Placement Studio &#8211; SEO &amp; WCAG Friendly HTML Image Layout Generator\" class=\"read-more\" href=\"https:\/\/schoolict.net\/tools\/article-image-placement-studio\/\" aria-label=\"Read more about Article Image Placement Studio &#8211; SEO &amp; WCAG Friendly HTML Image Layout Generator\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":5536,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5527","page","type-page","status-publish","has-post-thumbnail"],"_links":{"self":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages\/5527","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/comments?post=5527"}],"version-history":[{"count":1,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages\/5527\/revisions"}],"predecessor-version":[{"id":6924,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages\/5527\/revisions\/6924"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/media\/5536"}],"wp:attachment":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/media?parent=5527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}