サポート » テーマ » サムネイル画像のトリミング基点を変更したい

  • 解決済 chatm

    (@chatm)


    アイキャッチ画像は設定せず、画像を投稿したらその1枚目をサムネイルとして中トップページに表示する方法で一覧を取得しています。その一枚目の画像のトリミングの基点がxyともセンターを中心にトリミングされていますが、その基点をxは中央、yは上に変更したいです。

    wpバージョン5.4.2 php7.3 グーテンベルグエディター 自作のオリジナルテーマです。

    教えて頂けましたら助かります。宜しくお願いいたします。

    funcyion.phpに下記のコードを入れております

    // サムネイル画像 / 投稿画像の1枚目の画像をサムネイルとして出力する。
    function catch_that_image() {
        global $post, $posts;
        $first_img = '';
        ob_start();
        ob_end_clean();
        $output = preg_match( '/<img[^>]+src=[\'"]([^\'"]+)[\'"][^>]+\>/i', $post->post_content, $matches );
    	$first_img = $matches [1];
     
        if(empty($first_img)){ //Defines a default image
            $first_img = "/images/noimage.png";
        }
    return $first_img;
    }
    
    • このトピックはchatmが3年、 9ヶ月前に変更しました。
2件の返信を表示中 - 1 - 2件目 (全2件中)
  • こんにちは

    object-position プロパティ (IE は未対応) で画像のボックスへの配置位置を指定することができます。

    CSS の例:

    img.sample {
    	object-position: 50% 0%;
    }
    トピック投稿者 chatm

    (@chatm)

    ありがとうございます!
    そうでした、レスポンシブなので、画像をcss の object-fit でトリミングしてたのを忘れてました。cssに下記を追記して画像位置を上に、左右を中心にできました。
    教えて頂きましてありがとうございました。

    .fit img{ width: 100%; height: 150px; object-fit: cover; object-position: 50% 0%; }

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「サムネイル画像のトリミング基点を変更したい」には新たに返信することはできません。