image re-size in Ghost blog
- 안내말 입니다.
- 개인적으로 남기는 글입니다. 아래의 경우를 미리 공지합니다.
- 높임말은 없는 경우가 있습니다.
- 영어, 일본어, 베트남어를 공부하고 있습니다. 경우에 따라서 사용됩니다.
- 보기 거북하다면 뒤로가기 해주세요.
이야기 시작-
-광고-
ExpressVPN가입하고 무료 이용일 받으세요!
지금 추천인 링크를 통해 가입하면 추가 30일 무료 사용 혜택을 받을 수 있어요! 🎉
혜택을 놓치지 말고 지금 바로 시작해보세요! 🚀
-광고-
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
ipTIME 유무선 공유기, AX8004M(WHITE), 1세트
내용
고스트 블로그에 이미지를 넣으면 사이즈를 변경할 수 없게 됩니다. 따라서 어떻게 하면 될까 생각에 markdown으로 변경하는 방법을 찾고 그것을 조금 쉽게 하는 방법을 기록으로 남겨봅니다.
- 우선 이미지를 고스트블로그에 업로드 합니다. 업로드 의미는 포스트에 이미지 넣으면됩니다.
- 넣은 이미지의 주소를 알아내야합니다.
- 2번에서 얻은 이미지 주소는 대략
https://sub.도메인.com/content/images/2025/02/업로드 파일명.jpg이렇게 됩니다. 그것을 아래의 형태로 가공합니다.
마크다운형태로 변경합니다.
그리고 직접 넣으면 위 가공은 width 600으로 잡은 것입니다.
조금더 쉽게 javascript
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ghost 이미지 URL 생성기</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
input {
width: 300px;
padding: 10px;
margin: 10px;
}
button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
margin: 5px;
}
button:hover {
background-color: #0056b3;
}
#output {
margin-top: 20px;
font-size: 18px;
color: #333;
word-break: break-all;
}
</style>
</head>
<body>
<h2>Ghost 이미지 URL 생성기</h2>
<p>이미지 URL을 입력하세요:</p>
<input type="text" id="imageUrl" placeholder="이미지 URL 입력">
<br>
<button onclick="generateUrl()">URL 생성</button>
<button onclick="copyToClipboard()">복사</button>
<button onclick="resetInput()">리셋</button>
<p id="output"></p>
<textarea id="clipboard" style="position: absolute; left: -9999px;"></textarea>
<script>
function generateUrl() {
let imageUrl = document.getElementById("imageUrl").value.trim();
if (!imageUrl) {
document.getElementById("output").innerText = "이미지 URL을 입력하세요.";
return;
}
const baseToRemove = "https://서브도메인주소/content/images/";
if (imageUrl.startsWith(baseToRemove)) {
imageUrl = imageUrl.replace(baseToRemove, "");
}
const url = ``;
document.getElementById("output").innerText = url;
}
function copyToClipboard() {
const outputText = document.getElementById("output").innerText;
if (!outputText) return;
const clipboard = document.getElementById("clipboard");
clipboard.value = outputText;
clipboard.select();
clipboard.setSelectionRange(0, 99999);
document.execCommand("copy");
alert("URL이 복사되었습니다!");
}
function resetInput() {
document.getElementById("imageUrl").value = "";
document.getElementById("output").innerText = "";
}
</script>
</body>
</html>56번행에 보면 서브도메인 주소 부분에 사용자의 고스트블로그 도메인주소를 넣으면됩니다.
위 소스코드를 html로 저장하시고 서버에 올려서 사용하셔도 되고 로컬에서 사용하셔도 무방합니다.
이상입니다.
