muragonインフォメーション

muragonからのお知らせ

【PC版】関連記事リストの記事画像表示を修正しました

いつもmuragonをご利用いただきありがとうございます。


PC版の関連記事リストについて、記事画像の縦横比が維持されない不具合を修正いたしました。


不具合が発生していた箇所

  • 記事ページの関連記事リスト


【不具合時の表示】

不具合が発生していた条件

関連記事の記事画像は一定のサイズより大きい場合、縮小とトリミングを行った上で表示しておりました。
しかし、既定のサイズよりも小さい画像の場合、トリミング等が処理されていなかったため、画像エリアに合わせて縦横比が維持されず表示されておりました。

不具合修正後の表示条件

既定のサイズよりも小さい画像の場合、画像の中央部分を中心として縦横比を維持したまま、縦横のより短い辺を基準としはみ出る部分をカットして表示しております。


【不具合修正後の表示】

テーマのHTML設定方法 (テーマを編集されている方のみ)

テーマを独自にカスタマイズされている方へのご案内です。
※テーマを編集(カスタム)されていない方は変更は不要です。


relation-list-image-inner のdiv要素に対して、以下のdata属性の追加が必要となります。

data-imgliquid

修正前の関連記事HTML

 <div class="entry-footer-module relation-wrapper">
<p class="relation-title">関連記事</p>
<div class="relation-list">
<!--{loop:post.relationPosts}-->
<div class="relation-list-item">
<a href="{post.relationPost.url}">
<div class="relation-list-image">
<div class="relation-list-image-inner">
<img src="{post.relationPost.imageUrl}">
</div>
</div>
<div class="relation-list-text">{post.relationPost.title}</div>
</a>
</div>
<!--{/loop:post.relationPosts}-->
</div>
</div>
<!--{/if:post.hasRelationPosts}-->


修正後の関連記事HTML

 <div class="entry-footer-module relation-wrapper">
<p class="relation-title">関連記事</p>
<div class="relation-list">
<!--{loop:post.relationPosts}-->
<div class="relation-list-item">
<a href="{post.relationPost.url}">
<div class="relation-list-image">
<div class="relation-list-image-inner" data-imgliquid><!-- data-imgliquid属性を追加 -->
<img src="{post.relationPost.imageUrl}">
</div>
</div>
<div class="relation-list-text">{post.relationPost.title}</div>
</a>
</div>
<!--{/loop:post.relationPosts}-->
</div>
</div>
<!--{/if:post.hasRelationPosts}-->


ご不便、ご迷惑をおかけしましたこと深くお詫び申し上げます。


今後ともmuragonをよろしくお願いいたします。


×

非ログインユーザーとして返信する

あと 2000文字

※は必須項目です。