{"id":827,"date":"2025-12-31T07:00:02","date_gmt":"2025-12-31T07:00:02","guid":{"rendered":"https:\/\/ecvnews.in\/?page_id=827"},"modified":"2026-01-09T05:52:38","modified_gmt":"2026-01-09T05:52:38","slug":"news-image-maker","status":"publish","type":"page","link":"https:\/\/ecvnews.in\/?page_id=827","title":{"rendered":"Single Image News Maker"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>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&#038;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\/* 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 {\ntext-align: center;\nmargin-bottom: 12px;\ncolor: #0a58ca;\n}\n\n.news-controls label {\nfont-size: 13px;\nfont-weight: 600;\ndisplay: block;\nmargin-top: 14px;\n}\n\n.news-controls input,\n.news-controls textarea,\n.news-controls button {\nwidth: 100%;\nmargin-top: 6px;\npadding: 10px;\nborder-radius: 8px;\nborder: 1px solid #ddd;\nfont-size: 14px;\n}\n\n.news-controls textarea {\nresize: vertical;\nheight: 100px;\n}\n\n\/* STYLE ROWS *\/\n.news-style-row {\ndisplay: grid;\ngrid-template-columns: 1fr 1fr;\ngap: 8px;\nmargin-top: 6px;\n}\n\n\/* COLOR PICKER *\/\n.news-color-picker {\ndisplay: flex;\ngap: 6px;\nalign-items: center;\n}\n\n.news-color-picker input[type=\"color\"] {\nwidth: 42px;\nheight: 42px;\npadding: 0;\nborder-radius: 8px;\ncursor: pointer;\nborder: none;\n}\n\n.news-color-picker input[type=\"text\"] {\nflex: 1;\ntext-transform: uppercase;\n}\n\n\/* TOGGLE BUTTONS *\/\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\/* DOWNLOAD *\/\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 {\nmax-width: 650px;\nwidth: 100%;\nbackground: #fff;\nbox-shadow: 0 10px 28px rgba(0,0,0,.1);\npadding-bottom: 12px;\n}\n\n#title {\nbackground-color: #333;\npadding: 10px 5px 10px;\nfont-size: 22px;\ncolor: #fff;\nfont-weight: 600;\n}\n\n#mainImage {\nwidth: 100%;\nmax-height: 180px;\nobject-fit: cover;\n}\n\n#text {\nmargin-top: -2px;\nbackground-color: #fef7bf;\npadding: 0 8px;\nfont-size: 16px;\nline-height: 1.6;\ncolor: #333;\n}\n\n#thumbImage {\nposition: relative;\nz-index: 1;\nwidth: 100px;\nmargin-top: -30px;\ndisplay: block;\n}\n\n\/* MOBILE *\/\n@media (max-width: 768px) {\n.news-container { grid-template-columns: 1fr; }\n}\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"news-container\">\n\n<!-- PREVIEW -->\n<div class=\"news-preview-wrap\">\n<div id=\"preview\">\n<div id=\"title\">Your News Title Here<\/div>\n<img id=\"mainImage\" crossorigin=\"anonymous\"\nsrc=\"http:\/\/ecvnews.in\/wp-content\/uploads\/2026\/01\/images.png\">\n<img id=\"thumbImage\" crossorigin=\"anonymous\"\nsrc=\"http:\/\/ecvnews.in\/wp-content\/uploads\/2026\/01\/bb.png\">\n<p id=\"text\">This is your news content.<\/p>\n<\/div>\n<\/div>\n\n<!-- CONTROLS -->\n<div class=\"news-controls\">\n<h3>News Editor<\/h3>\n\n<label>Main Image<\/label>\n<input type=\"file\" accept=\"image\/*\" onchange=\"loadImage(event,'mainImage')\">\n\n<label>Title<\/label>\n<input type=\"text\" oninput=\"updateText('title',this.value)\">\n\n<div class=\"news-color-picker\">\n<input type=\"color\" value=\"#0a58ca\" oninput=\"setColor('title',this)\">\n<input type=\"text\" value=\"#0A58CA\" oninput=\"setColorHex('title',this)\">\n<\/div>\n\n<input type=\"number\" min=\"14\" max=\"40\" value=\"22\"\noninput=\"styleText('title','fontSize',this.value+'px')\">\n\n<div class=\"news-style-row\">\n<button class=\"news-toggle-btn\" onclick=\"toggleStyle(this,'title','bold')\">Bold<\/button>\n<button class=\"news-toggle-btn\" onclick=\"toggleStyle(this,'title','italic')\">Italic<\/button>\n<\/div>\n\n<label>Content<\/label>\n<textarea oninput=\"updateText('text',this.value)\"><\/textarea>\n\n<div class=\"news-color-picker\">\n<input type=\"color\" value=\"#333333\" oninput=\"setColor('text',this)\">\n<input type=\"text\" value=\"#333333\" oninput=\"setColorHex('text',this)\">\n<\/div>\n\n<input type=\"number\" min=\"12\" max=\"28\" value=\"16\"\noninput=\"styleText('text','fontSize',this.value+'px')\">\n\n<div class=\"news-style-row\">\n<button class=\"news-toggle-btn\" onclick=\"toggleStyle(this,'text','bold')\">Bold<\/button>\n<button class=\"news-toggle-btn\" onclick=\"toggleStyle(this,'text','italic')\">Italic<\/button>\n<\/div>\n\n<button class=\"news-download-btn\" onclick=\"downloadImage()\">Download as Image<\/button>\n<\/div>\n\n<\/div>\n\n<script>\nfunction loadImage(e, id) {\nif (!e.target.files || !e.target.files[0]) return;\nconst reader = new FileReader();\nreader.onload = () => document.getElementById(id).src = reader.result;\nreader.readAsDataURL(e.target.files[0]);\n}\n\nfunction updateText(id, value) {\nconst el = document.getElementById(id);\nel.innerText = value.trim() === \"\" ? \"\\u00A0\" : value;\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') el.style.fontWeight = btn.classList.contains('active') ? '700' : '400';\nif (type === 'italic') el.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\"), { scale: 2, useCORS: true })\n.then(canvas => {\nconst link = document.createElement(\"a\");\nlink.download = \"news-image.png\";\nlink.href = canvas.toDataURL(\"image\/png\");\nlink.click();\n});\n}\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>News Image Generator Your News Title Here This is your news content. News Editor Main Image Title Bold Italic 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-827","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/ecvnews.in\/index.php?rest_route=\/wp\/v2\/pages\/827","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=827"}],"version-history":[{"count":8,"href":"https:\/\/ecvnews.in\/index.php?rest_route=\/wp\/v2\/pages\/827\/revisions"}],"predecessor-version":[{"id":883,"href":"https:\/\/ecvnews.in\/index.php?rest_route=\/wp\/v2\/pages\/827\/revisions\/883"}],"wp:attachment":[{"href":"https:\/\/ecvnews.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=827"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}