2017-03-31 4 views
0

私は、画像サイズが指定されていないwidthおよび/またはheight属性を指定したWordPressプラグインを修正しました。すべての属性を持つ<img>タグを再印刷

current version on GitHubに表示されているように、<img>タグ(L38)のすべての属性を手動で表示します。ユーザーは、カスタム属性を追加した場合、それが私の$attributes変数にリストされていないので、しかし、それは省略なるだろう:簡単なテストファイルを作成

# Before 
<img src="http://example.com/img.png" class="img" data-sample="test"> 
# After 
<img src="http://example.com/img.png" class="img" width="100" height="30"> 

、私はすべての属性を格納するための正規表現を更新することができました<img>タグにあります。はい、私はDOMDocumentの使用を推奨していますが、過去にWordPressの問題が増えています。

preg_match_all('/(?:<img|(?<!^)\G)\h*([-\w]+)="([^"]+)"(?=.*?\/>)/', $content, $images); 

あまりにも多くのコードでこのポストを埋めないために、私は、現在の作業テストファイルon my GitHub Gist hereを持っています。 var_dump($images);を使用して

、これは(私はスペースを節約するために、各列の最後に...を追加しました)私に私のサンプル画像から次のような出力が得られます。

0 => 
     array (size=19) 
     0 => string '<img src="https://placehold.it/250x100/99cc00/000.jpg?text=JPG"' (length=63) 
     1 => string ' alt="JPG"' (length=10) 
     2 => string '<img src="https://placehold.it/250x100.gif?text=GIF"' (length=52) 
     ... 
    1 => 
     array (size=19) 
     0 => string 'src' (length=3) 
     1 => string 'alt' (length=3) 
     2 => string 'src' (length=3) 
     ... 
    2 => 
     array (size=19) 
     0 => string 'https://placehold.it/250x100/99cc00/000.jpg?text=JPG' (length=52) 
     1 => string 'JPG' (length=3) 
     2 => string 'https://placehold.it/250x100.gif?text=GIF' (length=41) 
     ... 

私の目標は、すべてのとイメージタグを再作成することですディメンションの計算後の属性および値私のテストから、私は次のことを試してみたが、それは私が期待していた結果与えられていない。

foreach ($images[1] as $attributes[1] => $value) { 
    echo('< img ' . $value . '="' . 'value' . '" ><br>'); 
} 

答えて

1

あなたのコード:

$content = <<<EOT 
<p>List of sample images.</p> 
<img src="https://placehold.it/250x100/99cc00/000.jpg?text=JPG" alt="JPG" /><br> 
<img src="https://placehold.it/250x100.gif?text=GIF" alt="GIF" /><br> 
<img src="https://placehold.it/250x100/ff6600/000.png?text=PNG" alt="PNG" /><br> 
<img class="no-ext" src="https://placehold.it/350x150?text=No Extension" alt="No Ext" /><br> 
<img src="https://placehold.it/250x100.png" custom-attr="custom1" another-attr="custom2" /><br> 
<img class="svg" src="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" alt="SVG" /><br> 
<img class="webp" src="https://gstatic.com/webp/gallery/1.webp" width="100" alt="webP" /><br> 
EOT; 
# Find all content with <img> tags 
preg_match_all('/(?:<img|(?<!^)\G)\h*([-\w]+)="([^"]+)"(?=.*?\/>)/', $content, $images); 
foreach ($images[1] as $attributes[1] => $value) { 
    echo('< img ' . $value . '="' . 'value' . '" ><br>'); 
} 

ソリューション:

//echo "<pre>"; print_r($images); 
$temp = array(); 
foreach($images[0] as $key=>$img){  
    $pos = strpos($img,'<img'); 
    if($pos === false){ 
     $temp[$key_2][] = $img; 
    }else{ 
     $temp[$key][] = $img; 
     $key_2 = $key; 
    } 
} 
foreach($temp as $k=>$v){ 
    $str[] = implode(' ', $v) . ' />'; 
} 

$finalStr = implode('<br />', $str); 

echo $finalStr; 

Click here to check output

関連する問題