VS Code用WordPress Post拡張機能を修正してみる その11

Visual Studio Code
スポンサーリンク

今回はVS Code用のWordPress Post拡張機能のバグ修正について紹介したいと思います。

スポンサーリンク

VSIXファイルのダウンロード

最初に今回の修正後のファイルの案内をしておきます。

今回の修正でバージョンを「0.0.6-l」となっています。

これを利用してみたい方は下記のURLからVSIXファイルをダウンロードして、VS Codeにインストールしてみてください。

Release v0.0.6-l · scratchpadjp/vscode-wordpress-post
This is unofficial version of WordPress Post extension for VS Code. The following features are added to the original version of WordPress Post 0.0.5. Customize code block behavior Add width/height...
スポンサーリンク

発見した不具合

WordPress Post拡張機能を修正をし始めたときのモチベーションの一つが、imgタグにサイズ属性をつけたいと言うことでした。

この問題に対しては以前に対処しました。

VS Code用WordPress Post拡張機能を修正してみる その2
今回もVS Code用の拡張機能であるWordPress Post拡張機能の修正したことを紹介します。元々のWordPress Post拡張機能は画像の埋め込みに対応しているものの、サイズの指定や縮小には対応していません。今回の修正では画像の最大サイズを指定できるようにしたことで、必要に応じて画像を縮小させることができるようになりました。

このときは

「wordpress-post.image.addSizeAttributes」はHTMLのimgタグにwidth属性とheight属性をつけるかどうかの設定で、デフォルトは「false(つけない)」です。
width属性とheight属性がないとHTMLの表示時にレイアウトがずれることがあるので、この設定はオン「(true)」にするのがオススメです。

という設定項目を追加して、このwordpress-post.image.addSizeAttributesがTrueの時にはimgタグにサイズ属性をつけるように拡張機能のコードを修正しました。

正確に言うと、修正したつもりでした。

しかし、このコードにバグがあり、サイズ属性をつける処理をすり抜けるパスが存在していました。

具体的には

      // generate thumbnail image if needed.
      if ( context.imageResize() ) {
        if ( (orgImgWidth !== displayImgWidth) || (orgImgHeight !== displayImgHeight) ) {
          const thumbnail = サムネイル画像データ;
          ・・・
          (サムネイル画像の最適化処理)
          ・・・
          /* upload thumbnail to wordpress */
          const imgItem = await uploadImage(context, thumbnailSlug, thumbnail);
          srcAttr = context.replaceAttachedImageUrl(imgItem["source_url"]);

          ch(imgs[i]).attr("width", displayImgWidth.toString());    ※1
          ch(imgs[i]).attr("height", displayImgHeight.toString());  ※1
        }
      } else {
        if ( context.imageAddSizeAttributes() ) {
          ch(imgs[i]).attr("width", orgImgWidth.toString());        ※2
          ch(imgs[i]).attr("height", orgImgHeight.toString());      ※2
        }
      }

の部分です。

このコードでは、拡張機能の設定で画像のリサイズが有効である場合(冒頭のif分でTrueの場合)で、かつ、リサイズが必要な場合(2番目のif分でTrue)は、※1の部分でサイズ属性を付与しています。

またこのif分がFalseの場合は、※2の部分でサイズ属性を付与しています。

しかし、2番目のif分がFalseの場合は何も処理をしなくて、この部分の処理をスルーしてしまい、サイズ属性が付与されることがありません。

つまりどうなるかというと「拡張機能の設定で画像のリサイズを有効にしていた場合に、リサイズが不要なサイズの画像に対してはサイズ属性が付かない」という動作になります。

修正

原因がわかれば、修正は簡単です。

抜けがないようにコードを修正します。

      // generate thumbnail image if needed.
      if ( context.imageResize() ) {
        if ( (orgImgWidth !== displayImgWidth) || (orgImgHeight !== displayImgHeight) ) {
          const thumbnail = サムネイル画像データ;
          ・・・
          (サムネイル画像の最適化処理)
          ・・・
          /* upload thumbnail to wordpress */
          const imgItem = await uploadImage(context, thumbnailSlug, thumbnail);
          srcAttr = context.replaceAttachedImageUrl(imgItem["source_url"]);
        }
        if ( context.imageAddSizeAttributes() ) {
          ch(imgs[i]).attr("width", displayImgWidth.toString());
          ch(imgs[i]).attr("height", displayImgHeight.toString());
        }
      } else {
        if ( context.imageAddSizeAttributes() ) {
          ch(imgs[i]).attr("width", orgImgWidth.toString());
          ch(imgs[i]).attr("height", orgImgHeight.toString());
        }
      }

これで大丈夫なはずです。

いなコードを見直すと、サイズ属性を付与する部分はif文の外の追い出して一本化すべきような気がしてきました・・・

これで不具合修正完了です。

このサブミットは次になります。

Fix an issue that size attribute is not given · crz33/vscode-wordpress-post@80c7ced
Contribute to crz33/vscode-wordpress-post development by creating an account on GitHub.

まとめ

今回はWordPress Post拡張機能の画像に関する不具合を修正してみました。

imgタグへの画像属性追加は私が追加した機能だったのですが、考慮不足の点があり、ちゃんと動かないケースがありました。

WordPress Post拡張機能もいろいろ修正しすぎてしまったので、そろそろコードを整理したくなってきました。

コメント

タイトルとURLをコピーしました