FROM CACHE - jp_header
解決済

ブログ記事の画像キャプションを表示したい

SHOKO06
観光客
12 0 1

 

ブログ記事詳細(【 {{ article.content }} 】 で出力される内容)の画像キャプションを表示させたいです。

1 件の受理された解決策

NIIGAKI_HYUGA
Shopify Partner
54 23 15

成功

@SHOKO06 様

初めまして。新垣です。

 

下記コードを{{ article.content }}が存在するファイル、または、そのファイルが取り込んでいるJSファイルに記述してください。

document.addEventListener('DOMContentLoaded', function() { // ページ読み込み時
    const images = document.querySelectorAll('img[alt]'); // alt属性を持つすべての画像を取得

    images.forEach(image => {
      const altText = image.getAttribute('alt');
      if (altText) { // alt属性が存在する場合
        const p = document.createElement('p');
        p.textContent = altText; // pタグにalt属性のテキストを挿入
                p.className = 'article-img_alt'; // classを追加
        image.insertAdjacentElement('afterend', p); // 画像の直後にpタグを挿入
      }
    });
  });

 

以上、ご参考になりましたら幸いです。

Freelance Solution Engineer | 新垣
JavaScript Liquid Theme, React Remix App
投稿は参考になりましたか?「いいね!」でお教えください。
解決しない場合、個別に対応も可能ですのでプロフィールからお気軽にメッセージください

元の投稿で解決策を見る

3件の返信3

NIIGAKI_HYUGA
Shopify Partner
54 23 15

成功

@SHOKO06 様

初めまして。新垣です。

 

下記コードを{{ article.content }}が存在するファイル、または、そのファイルが取り込んでいるJSファイルに記述してください。

document.addEventListener('DOMContentLoaded', function() { // ページ読み込み時
    const images = document.querySelectorAll('img[alt]'); // alt属性を持つすべての画像を取得

    images.forEach(image => {
      const altText = image.getAttribute('alt');
      if (altText) { // alt属性が存在する場合
        const p = document.createElement('p');
        p.textContent = altText; // pタグにalt属性のテキストを挿入
                p.className = 'article-img_alt'; // classを追加
        image.insertAdjacentElement('afterend', p); // 画像の直後にpタグを挿入
      }
    });
  });

 

以上、ご参考になりましたら幸いです。

Freelance Solution Engineer | 新垣
JavaScript Liquid Theme, React Remix App
投稿は参考になりましたか?「いいね!」でお教えください。
解決しない場合、個別に対応も可能ですのでプロフィールからお気軽にメッセージください
SHOKO06
観光客
12 0 1

ありがとうございます!

早速試してみます。

SHOKO06
観光客
12 0 1

無事、こちらで実装できました!ありがとうございました。