Two Column News Image Generator<\/title>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/html2canvas@1.4.1\/dist\/html2canvas.min.js\"><\/script>\n\n<style>\n* { box-sizing: border-box; }\n\nbody {\nmargin: 0;\nfont-family: Inter, Arial, sans-serif;\nbackground: #f5f6fa;\n}\n\n\/* MAIN LAYOUT *\/\n.news-container {\ndisplay: grid;\ngrid-template-columns: 360px 1fr;\ngap: 20px;\nmax-width: 1200px;\nmargin: auto;\n}\n\n\/* CONTROLS *\/\n.news-controls {\nbackground: #fff;\npadding: 18px;\nborder-radius: 12px;\nbox-shadow: 0 8px 24px rgba(0,0,0,.08);\n}\n\n.news-controls h3 {\nmargin: 14px 0 6px;\ncolor: #0a58ca;\n}\n\n.news-controls label {\nfont-size: 13px;\nfont-weight: 600;\ndisplay: block;\nmargin-top: 10px;\n}\n\n.news-controls input,\n.news-controls textarea,\n.news-controls button {\nwidth: 100%;\nmargin-top: 6px;\npadding: 9px;\nborder-radius: 8px;\nborder: 1px solid #ddd;\nfont-size: 14px;\n}\n\n.news-controls textarea {\nresize: vertical;\nheight: 70px;\n}\n\n.news-style-row {\ndisplay: grid;\ngrid-template-columns: 1fr 1fr;\ngap: 8px;\nmargin-top: 6px;\n}\n\n.news-toggle-btn {\ncursor: pointer;\nfont-weight: 600;\nbackground: #f1f3f6;\n}\n\n.news-toggle-btn.active {\nbackground: #0a58ca;\ncolor: #fff;\nborder-color: #0a58ca;\n}\n\n.news-color-picker {\ndisplay: flex;\ngap: 6px;\nalign-items: center;\nmargin-top: 6px;\n}\n\n.news-color-picker input[type=\"color\"] {\nwidth: 42px;\nheight: 42px;\nborder-radius: 8px;\nborder: none;\ncursor: pointer;\n}\n\n.news-color-picker input[type=\"text\"] {\nflex: 1;\ntext-transform: uppercase;\n}\n\n.news-download-btn {\nmargin-top: 18px;\nbackground: linear-gradient(135deg,#0a58ca,#0053a0);\ncolor: #fff;\nborder: none;\nfont-weight: 600;\ncursor: pointer;\n}\n\n\/* PREVIEW *\/\n.news-preview-wrap {\ndisplay: flex;\njustify-content: center;\n}\n\n#preview {\nwidth: 100%;\nmax-width: 800px;\nbackground: #fff;\nbox-shadow: 0 10px 28px rgba(0,0,0,.1);\npadding-bottom: 8px;\n}\n\n\/* TITLE *\/\n#mainTitle {\nbackground: #333;\ncolor: #fff;\npadding: 10px;\nfont-size: 22px;\nfont-weight: 600;\ntext-align: center;\n}\n\n\/* TWO COLUMNS (ALWAYS TWO \u2013 MOBILE TOO) *\/\n.news-grid {\ndisplay: grid;\ngrid-template-columns: 1fr 1fr;\ngap: 8px;\npadding: 8px;\n}\n\n\/* ONLY main news images *\/\n.news-main-img {\nwidth: 100%;\nheight: 160px;\nobject-fit: cover;\n}\n\n\/* ONLY bb.png *\/\n.news-badge-img {\nposition: absolute;\nz-index: 10;\nmargin-top: -22px;\nwidth: 65px; \/* resize freely *\/\nheight: auto;\ndisplay: block;\n}\n\n.news-text {\ntext-align: justify;\nbackground: #fef7bf;\npadding: 8px;\nfont-size: 15px;\nline-height: 1.6;\ncolor: #333;\n}\n\n\/* MOBILE: still two columns *\/\n@media (max-width: 768px) {\n.news-container {\ngrid-template-columns: 1fr;\n}\n}\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"news-container\">\n\n\n<div class=\"news-preview-wrap\">\n<div id=\"preview\">\n\n<div id=\"mainTitle\">Your News Title<\/div>\n\n<div class=\"news-grid\">\n<div class=\"news-box\">\n<img id=\"imageLeft\" class=\"news-main-img\" crossorigin=\"anonymous\"\nsrc=\"https:\/\/via.placeholder.com\/400x200\">\n\n\n<img decoding=\"async\" src=\"http:\/\/ecvnews.in\/wp-content\/uploads\/2025\/12\/bb.png\"\nclass=\"news-badge-img\"\nalt=\"\">\n\n<p id=\"textLeft\" class=\"news-text\">Left news content<\/p>\n<\/div>\n\n<div class=\"news-box\">\n<img id=\"imageRight\" class=\"news-main-img\" crossorigin=\"anonymous\"\nsrc=\"https:\/\/via.placeholder.com\/400x200\">\n\n\n<img decoding=\"async\" src=\"http:\/\/ecvnews.in\/wp-content\/uploads\/2025\/12\/bb.png\"\nclass=\"news-badge-img\"\nalt=\"\">\n\n<p id=\"textRight\" class=\"news-text\">Right news content<\/p>\n<\/div>\n<\/div>\n\n<\/div>\n\n<\/div>\n<\/div>\n\n\n<div class=\"news-controls\">\n\n<h3>Main Title<\/h3>\n<input type=\"text\" oninput=\"updateText('mainTitle',this.value)\">\n\n<div class=\"news-color-picker\">\n<input type=\"color\" value=\"#ffffff\" oninput=\"setColor('mainTitle',this)\">\n<input type=\"text\" value=\"#FFFFFF\" oninput=\"setColorHex('mainTitle',this)\">\n<\/div>\n\n<input type=\"number\" min=\"16\" max=\"40\" value=\"22\"\noninput=\"styleText('mainTitle','fontSize',this.value+'px')\">\n\n<div class=\"news-style-row\">\n<button class=\"news-toggle-btn\" onclick=\"toggleStyle(this,'mainTitle','bold')\">Bold<\/button>\n<button class=\"news-toggle-btn\" onclick=\"toggleStyle(this,'mainTitle','italic')\">Italic<\/button>\n<\/div>\n\n<hr>\n\n<h3>Left Column<\/h3>\n<label>Image<\/label>\n<input type=\"file\" accept=\"image\/*\" onchange=\"loadImage(event,'imageLeft')\">\n\n<label>Content<\/label>\n<textarea oninput=\"updateText('textLeft',this.value)\"><\/textarea>\n\n<div class=\"news-color-picker\">\n<input type=\"color\" value=\"#333333\" oninput=\"setColor('textLeft',this)\">\n<input type=\"text\" value=\"#333333\" oninput=\"setColorHex('textLeft',this)\">\n<\/div>\n\n<input type=\"number\" min=\"12\" max=\"28\" value=\"15\"\noninput=\"styleText('textLeft','fontSize',this.value+'px')\">\n\n<div class=\"news-style-row\">\n<button class=\"news-toggle-btn\" onclick=\"toggleStyle(this,'textLeft','bold')\">Bold<\/button>\n<button class=\"news-toggle-btn\" onclick=\"toggleStyle(this,'textLeft','italic')\">Italic<\/button>\n<\/div>\n\n<hr>\n\n<h3>Right Column<\/h3>\n<label>Image<\/label>\n<input type=\"file\" accept=\"image\/*\" onchange=\"loadImage(event,'imageRight')\">\n\n<label>Content<\/label>\n<textarea oninput=\"updateText('textRight',this.value)\"><\/textarea>\n\n<div class=\"news-color-picker\">\n<input type=\"color\" value=\"#333333\" oninput=\"setColor('textRight',this)\">\n<input type=\"text\" value=\"#333333\" oninput=\"setColorHex('textRight',this)\">\n<\/div>\n\n<input type=\"number\" min=\"12\" max=\"28\" value=\"15\"\noninput=\"styleText('textRight','fontSize',this.value+'px')\">\n\n<div class=\"news-style-row\">\n<button class=\"news-toggle-btn\" onclick=\"toggleStyle(this,'textRight','bold')\">Bold<\/button>\n<button class=\"news-toggle-btn\" onclick=\"toggleStyle(this,'textRight','italic')\">Italic<\/button>\n<\/div>\n\n<button class=\"news-download-btn\" onclick=\"downloadImage()\">Download as Image<\/button>\n\n<\/div>\n\n<\/div>\n\n<script>\nfunction loadImage(e, id) {\nif (!e.target.files[0]) return;\nconst r = new FileReader();\nr.onload = () => document.getElementById(id).src = r.result;\nr.readAsDataURL(e.target.files[0]);\n}\n\nfunction updateText(id, value) {\ndocument.getElementById(id).innerText = value || \"\\u00A0\";\n}\n\nfunction styleText(id, prop, value) {\ndocument.getElementById(id).style[prop] = value;\n}\n\nfunction toggleStyle(btn, id, type) {\nbtn.classList.toggle('active');\nconst el = document.getElementById(id);\nif (type === 'bold')\nel.style.fontWeight = btn.classList.contains('active') ? '700' : '400';\nif (type === 'italic')\nel.style.fontStyle = btn.classList.contains('active') ? 'italic' : 'normal';\n}\n\nfunction setColor(id, input) {\ndocument.getElementById(id).style.color = input.value;\ninput.nextElementSibling.value = input.value.toUpperCase();\n}\n\nfunction setColorHex(id, input) {\nif (\/^#([0-9A-F]{3}){1,2}$\/i.test(input.value)) {\ndocument.getElementById(id).style.color = input.value;\ninput.previousElementSibling.value = input.value;\n}\n}\n\nfunction downloadImage() {\nhtml2canvas(document.getElementById(\"preview\"), {\nscale: 2,\nuseCORS: true\n}).then(canvas => {\nconst a = document.createElement(\"a\");\na.download = \"news-two-column.png\";\na.href = canvas.toDataURL(\"image\/png\");\na.click();\n});\n}\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Two Column News Image Generator Your News Title Left news content Right news content Main Title Bold Italic Left Column Image Content Bold Italic Right Column Image Content Bold Italic Download as Image<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-831","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/ecvnews.in\/index.php?rest_route=\/wp\/v2\/pages\/831","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ecvnews.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ecvnews.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ecvnews.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ecvnews.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=831"}],"version-history":[{"count":21,"href":"https:\/\/ecvnews.in\/index.php?rest_route=\/wp\/v2\/pages\/831\/revisions"}],"predecessor-version":[{"id":882,"href":"https:\/\/ecvnews.in\/index.php?rest_route=\/wp\/v2\/pages\/831\/revisions\/882"}],"wp:attachment":[{"href":"https:\/\/ecvnews.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":831,"date":"2026-01-02T04:55:36","date_gmt":"2026-01-02T04:55:36","guid":{"rendered":"https:\/\/ecvnews.in\/?page_id=831"},"modified":"2026-01-09T05:52:19","modified_gmt":"2026-01-09T05:52:19","slug":"double-image","status":"publish","type":"page","link":"https:\/\/ecvnews.in\/?page_id=831","title":{"rendered":"Double Image News Maker"},"content":{"rendered":"\n\n\n\n\nTwo Column News Image Generator<\/title>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/html2canvas@1.4.1\/dist\/html2canvas.min.js\"><\/script>\n\n<style>\n* { box-sizing: border-box; }\n\nbody {\nmargin: 0;\nfont-family: Inter, Arial, sans-serif;\nbackground: #f5f6fa;\n}\n\n\/* MAIN LAYOUT *\/\n.news-container {\ndisplay: grid;\ngrid-template-columns: 360px 1fr;\ngap: 20px;\nmax-width: 1200px;\nmargin: auto;\n}\n\n\/* CONTROLS *\/\n.news-controls {\nbackground: #fff;\npadding: 18px;\nborder-radius: 12px;\nbox-shadow: 0 8px 24px rgba(0,0,0,.08);\n}\n\n.news-controls h3 {\nmargin: 14px 0 6px;\ncolor: #0a58ca;\n}\n\n.news-controls label {\nfont-size: 13px;\nfont-weight: 600;\ndisplay: block;\nmargin-top: 10px;\n}\n\n.news-controls input,\n.news-controls textarea,\n.news-controls button {\nwidth: 100%;\nmargin-top: 6px;\npadding: 9px;\nborder-radius: 8px;\nborder: 1px solid #ddd;\nfont-size: 14px;\n}\n\n.news-controls textarea {\nresize: vertical;\nheight: 70px;\n}\n\n.news-style-row {\ndisplay: grid;\ngrid-template-columns: 1fr 1fr;\ngap: 8px;\nmargin-top: 6px;\n}\n\n.news-toggle-btn {\ncursor: pointer;\nfont-weight: 600;\nbackground: #f1f3f6;\n}\n\n.news-toggle-btn.active {\nbackground: #0a58ca;\ncolor: #fff;\nborder-color: #0a58ca;\n}\n\n.news-color-picker {\ndisplay: flex;\ngap: 6px;\nalign-items: center;\nmargin-top: 6px;\n}\n\n.news-color-picker input[type=\"color\"] {\nwidth: 42px;\nheight: 42px;\nborder-radius: 8px;\nborder: none;\ncursor: pointer;\n}\n\n.news-color-picker input[type=\"text\"] {\nflex: 1;\ntext-transform: uppercase;\n}\n\n.news-download-btn {\nmargin-top: 18px;\nbackground: linear-gradient(135deg,#0a58ca,#0053a0);\ncolor: #fff;\nborder: none;\nfont-weight: 600;\ncursor: pointer;\n}\n\n\/* PREVIEW *\/\n.news-preview-wrap {\ndisplay: flex;\njustify-content: center;\n}\n\n#preview {\nwidth: 100%;\nmax-width: 800px;\nbackground: #fff;\nbox-shadow: 0 10px 28px rgba(0,0,0,.1);\npadding-bottom: 8px;\n}\n\n\/* TITLE *\/\n#mainTitle {\nbackground: #333;\ncolor: #fff;\npadding: 10px;\nfont-size: 22px;\nfont-weight: 600;\ntext-align: center;\n}\n\n\/* TWO COLUMNS (ALWAYS TWO \u2013 MOBILE TOO) *\/\n.news-grid {\ndisplay: grid;\ngrid-template-columns: 1fr 1fr;\ngap: 8px;\npadding: 8px;\n}\n\n\/* ONLY main news images *\/\n.news-main-img {\nwidth: 100%;\nheight: 160px;\nobject-fit: cover;\n}\n\n\/* ONLY bb.png *\/\n.news-badge-img {\nposition: absolute;\nz-index: 10;\nmargin-top: -22px;\nwidth: 65px; \/* resize freely *\/\nheight: auto;\ndisplay: block;\n}\n\n.news-text {\ntext-align: justify;\nbackground: #fef7bf;\npadding: 8px;\nfont-size: 15px;\nline-height: 1.6;\ncolor: #333;\n}\n\n\/* MOBILE: still two columns *\/\n@media (max-width: 768px) {\n.news-container {\ngrid-template-columns: 1fr;\n}\n}\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"news-container\">\n\n\n<div class=\"news-preview-wrap\">\n<div id=\"preview\">\n\n<div id=\"mainTitle\">Your News Title<\/div>\n\n<div class=\"news-grid\">\n<div class=\"news-box\">\n<img id=\"imageLeft\" class=\"news-main-img\" crossorigin=\"anonymous\"\nsrc=\"https:\/\/via.placeholder.com\/400x200\">\n\n\n<img decoding=\"async\" src=\"http:\/\/ecvnews.in\/wp-content\/uploads\/2025\/12\/bb.png\"\nclass=\"news-badge-img\"\nalt=\"\">\n\n<p id=\"textLeft\" class=\"news-text\">Left news content<\/p>\n<\/div>\n\n<div class=\"news-box\">\n<img id=\"imageRight\" class=\"news-main-img\" crossorigin=\"anonymous\"\nsrc=\"https:\/\/via.placeholder.com\/400x200\">\n\n\n<img decoding=\"async\" src=\"http:\/\/ecvnews.in\/wp-content\/uploads\/2025\/12\/bb.png\"\nclass=\"news-badge-img\"\nalt=\"\">\n\n<p id=\"textRight\" class=\"news-text\">Right news content<\/p>\n<\/div>\n<\/div>\n\n<\/div>\n\n<\/div>\n<\/div>\n\n\n<div class=\"news-controls\">\n\n<h3>Main Title<\/h3>\n<input type=\"text\" oninput=\"updateText('mainTitle',this.value)\">\n\n<div class=\"news-color-picker\">\n<input type=\"color\" value=\"#ffffff\" oninput=\"setColor('mainTitle',this)\">\n<input type=\"text\" value=\"#FFFFFF\" oninput=\"setColorHex('mainTitle',this)\">\n<\/div>\n\n<input type=\"number\" min=\"16\" max=\"40\" value=\"22\"\noninput=\"styleText('mainTitle','fontSize',this.value+'px')\">\n\n<div class=\"news-style-row\">\n<button class=\"news-toggle-btn\" onclick=\"toggleStyle(this,'mainTitle','bold')\">Bold<\/button>\n<button class=\"news-toggle-btn\" onclick=\"toggleStyle(this,'mainTitle','italic')\">Italic<\/button>\n<\/div>\n\n<hr>\n\n<h3>Left Column<\/h3>\n<label>Image<\/label>\n<input type=\"file\" accept=\"image\/*\" onchange=\"loadImage(event,'imageLeft')\">\n\n<label>Content<\/label>\n<textarea oninput=\"updateText('textLeft',this.value)\"><\/textarea>\n\n<div class=\"news-color-picker\">\n<input type=\"color\" value=\"#333333\" oninput=\"setColor('textLeft',this)\">\n<input type=\"text\" value=\"#333333\" oninput=\"setColorHex('textLeft',this)\">\n<\/div>\n\n<input type=\"number\" min=\"12\" max=\"28\" value=\"15\"\noninput=\"styleText('textLeft','fontSize',this.value+'px')\">\n\n<div class=\"news-style-row\">\n<button class=\"news-toggle-btn\" onclick=\"toggleStyle(this,'textLeft','bold')\">Bold<\/button>\n<button class=\"news-toggle-btn\" onclick=\"toggleStyle(this,'textLeft','italic')\">Italic<\/button>\n<\/div>\n\n<hr>\n\n<h3>Right Column<\/h3>\n<label>Image<\/label>\n<input type=\"file\" accept=\"image\/*\" onchange=\"loadImage(event,'imageRight')\">\n\n<label>Content<\/label>\n<textarea oninput=\"updateText('textRight',this.value)\"><\/textarea>\n\n<div class=\"news-color-picker\">\n<input type=\"color\" value=\"#333333\" oninput=\"setColor('textRight',this)\">\n<input type=\"text\" value=\"#333333\" oninput=\"setColorHex('textRight',this)\">\n<\/div>\n\n<input type=\"number\" min=\"12\" max=\"28\" value=\"15\"\noninput=\"styleText('textRight','fontSize',this.value+'px')\">\n\n<div class=\"news-style-row\">\n<button class=\"news-toggle-btn\" onclick=\"toggleStyle(this,'textRight','bold')\">Bold<\/button>\n<button class=\"news-toggle-btn\" onclick=\"toggleStyle(this,'textRight','italic')\">Italic<\/button>\n<\/div>\n\n<button class=\"news-download-btn\" onclick=\"downloadImage()\">Download as Image<\/button>\n\n<\/div>\n\n<\/div>\n\n<script>\nfunction loadImage(e, id) {\nif (!e.target.files[0]) return;\nconst r = new FileReader();\nr.onload = () => document.getElementById(id).src = r.result;\nr.readAsDataURL(e.target.files[0]);\n}\n\nfunction updateText(id, value) {\ndocument.getElementById(id).innerText = value || \"\\u00A0\";\n}\n\nfunction styleText(id, prop, value) {\ndocument.getElementById(id).style[prop] = value;\n}\n\nfunction toggleStyle(btn, id, type) {\nbtn.classList.toggle('active');\nconst el = document.getElementById(id);\nif (type === 'bold')\nel.style.fontWeight = btn.classList.contains('active') ? '700' : '400';\nif (type === 'italic')\nel.style.fontStyle = btn.classList.contains('active') ? 'italic' : 'normal';\n}\n\nfunction setColor(id, input) {\ndocument.getElementById(id).style.color = input.value;\ninput.nextElementSibling.value = input.value.toUpperCase();\n}\n\nfunction setColorHex(id, input) {\nif (\/^#([0-9A-F]{3}){1,2}$\/i.test(input.value)) {\ndocument.getElementById(id).style.color = input.value;\ninput.previousElementSibling.value = input.value;\n}\n}\n\nfunction downloadImage() {\nhtml2canvas(document.getElementById(\"preview\"), {\nscale: 2,\nuseCORS: true\n}).then(canvas => {\nconst a = document.createElement(\"a\");\na.download = \"news-two-column.png\";\na.href = canvas.toDataURL(\"image\/png\");\na.click();\n});\n}\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Two Column News Image Generator Your News Title Left news content Right news content Main Title Bold Italic Left Column Image Content Bold Italic Right Column Image Content Bold Italic Download as Image<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-831","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/ecvnews.in\/index.php?rest_route=\/wp\/v2\/pages\/831","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ecvnews.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ecvnews.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ecvnews.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ecvnews.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=831"}],"version-history":[{"count":21,"href":"https:\/\/ecvnews.in\/index.php?rest_route=\/wp\/v2\/pages\/831\/revisions"}],"predecessor-version":[{"id":882,"href":"https:\/\/ecvnews.in\/index.php?rest_route=\/wp\/v2\/pages\/831\/revisions\/882"}],"wp:attachment":[{"href":"https:\/\/ecvnews.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}