フォーラム掲示板について

以下の目的、注意点などご確認いただき、ご使用ください。

目的
Connect-CMSのユーザやConnect-CMSに興味のある方同士で自由に意見交換できる場を提供する目的で、コミュニティ掲示板として提供しています。
投稿方法
このサイトにユーザー登録することで、投稿することができます。
投稿内容
投稿内容は公開されます。
Connect-CMSに無関係な内容が記載されたと判断した場合、削除することがあります。
バグ情報
バグ(不具合)はGithub のIssues(https://github.com/opensource-workshop/connect-cms/issues)に記載していただくと、開発者に伝わりやすくなります。
また、セキュリティなど重大な事象の場合は、お問い合わせページよりお知らせください。優先的に調査いたします。
また、貢献ガイド(https://connect-cms.jp/abount/contributions)も参照をお願いします。
ユーザ登録
当サイトへのユーザ登録は以下のお問い合わせフォームよりお願いいたします。
https://connect-cms.jp/contact

フォーラムでのサポート範囲

当フォーラムでは、Connect-CMSのトラブルなどの相談も記載いただけますが、作業を肩代わりするものではありません。
作業の依頼は、株式会社オープンソース・ワークショップの調査メニューなどをご検討ください。
https://opensource-workshop.jp/service/rescue

フォーラム掲示板

Re: ブログ記事の画像の大きさ調整

2021年4月7日 22時48分 [公星]

 
GitHubでソースコードを読んだら正確に分かるのかもしれませんが、
結果からの推測を述べてみます(PHPを読めない私の雑談/戯言レベル)。

------ ------ ------

まず、「<A>横画像で写した画像サイズを300X169 pxにする」の後、
WYSIWYGの[<>]からソースコードを見ると、下の図のようになりました。

htmlのimg要素のサイズ属性で大きさを指定しています。

この数値を変えて画像を変形させても元の数値にすれば画質は変わらないことから、
仕組みとしては、元の画像ファイル自体には手をつけず、
ブラウザ上で強制的に画像の表示サイズを指定している(のだと思います)。
 

【注】この画像ファイルが「 /file/20 」であることに注目ください 

----

そして、「<C>編集機能を使い、縦画像に変更、
<D><E>画像サイズが、300X169 pxよりかなり大きくなってしまう
」を
再現した後、ファイル名を見てみると「 /file/21 」になっています

-- --

管理画面に行き、「アップロードファイル管理」を開くと、
20番目に自分でアップロードしたjpgファイルがあり、
21番目に「imagetools0.jpg」ができています。

---

以上より、
「『画像の挿入・編集』で画像サイズ(横・縦)を変更する仕組み」と
「『画像の編集』アイコンからクロップや向きを変える仕組み」は
画像に対する扱いが別物なのではないかと考えます。
(後者は元の「file/20」をコピーして加工し、「file/21」として保存し置き換える?)

そのため、<A>→<C>において、
「300×169の大きさが継承されないのは、加工の仕組みが違うから」と推測します。
 
---

ちなみに、クロップや向きを変えるなどの機能が付いた「画像の編集」でリサイズすると、
画像そのものを300×169に変形できました。
([適用]ボタンを押すと、新しい名前の画像として保存される。ただし、処理は戻せない)

 

(更新:2021年4月7日 23時35分)
スレッドの記事一覧

(ブログ記事の画像の編集機能は素晴らしいです。)

ブログ記事の画像の大きさ調整が正常に機能しなかったです。
編集機能を使い、横画像を縦画像に変更すると、画像サイズが巨大になってしまいました。
(編集時のURL https://nouen.wakuwaku.cyou/plugin/blogs/edit/9/33/41#frame-33 


<A>
横画像で写した画像サイズを300X169 pxにする

<B>
横画像は、その小さなサイズになり、OK

<C>
編集機能を使い、縦画像に変更

<D><E>
画像サイズが、300X169 pxよりかなり大きくなってしまう


<A>


<B>



<C>

<D>



<E>

Re: ブログ記事の画像の大きさ調整
2021-04-07 [公星]

 
GitHubでソースコードを読んだら正確に分かるのかもしれませんが、
結果からの推測を述べてみます(PHPを読めない私の雑談/戯言レベル)。

------ ------ ------

まず、「<A>横画像で写した画像サイズを300X169 pxにする」の後、
WYSIWYGの[<>]からソースコードを見ると、下の図のようになりました。

htmlのimg要素のサイズ属性で大きさを指定しています。

この数値を変えて画像を変形させても元の数値にすれば画質は変わらないことから、
仕組みとしては、元の画像ファイル自体には手をつけず、
ブラウザ上で強制的に画像の表示サイズを指定している(のだと思います)。
 

【注】この画像ファイルが「 /file/20 」であることに注目ください 

----

そして、「<C>編集機能を使い、縦画像に変更、
<D><E>画像サイズが、300X169 pxよりかなり大きくなってしまう
」を
再現した後、ファイル名を見てみると「 /file/21 」になっています

-- --

管理画面に行き、「アップロードファイル管理」を開くと、
20番目に自分でアップロードしたjpgファイルがあり、
21番目に「imagetools0.jpg」ができています。

---

以上より、
「『画像の挿入・編集』で画像サイズ(横・縦)を変更する仕組み」と
「『画像の編集』アイコンからクロップや向きを変える仕組み」は
画像に対する扱いが別物なのではないかと考えます。
(後者は元の「file/20」をコピーして加工し、「file/21」として保存し置き換える?)

そのため、<A>→<C>において、
「300×169の大きさが継承されないのは、加工の仕組みが違うから」と推測します。
 
---

ちなみに、クロップや向きを変えるなどの機能が付いた「画像の編集」でリサイズすると、
画像そのものを300×169に変形できました。
([適用]ボタンを押すと、新しい名前の画像として保存される。ただし、処理は戻せない)

 

公星様、ありがとうございます。
ご説明していただいた通りに行いましたら、縦型にして、リサイズできました。