Question

使用wordpress我从帖子中抓取第一张图片附件。这很好用：

    <?php
        global $post;
  $args = array( 
    'post_parent' => $post->ID, 
    'post_type' => 'attachment', 
    'post_mime_type' => 'image', 
    'orderby' => 'menu_order', 
    'order' => 'ASC', 
    'numberposts' => 2 );
   $images = get_posts($args);
   if ( $images ) {
    $i = 0;
    while($i <= 1){
        $image = wp_get_attachment_url( $images[$i]->ID );
    echo "<img src='$image' />";            
      $i++;     
    }
  }
 ?>

我也在尝试处理这些图像，这些图像与timthumb一起根据浏览器大小调整图像大小。我只能在两个图像中的一个上工作。我希望它能够记录并调整大小两次，但脚本没有在循环中运行。有人可以帮忙吗？这就是我正在使用的完整剪辑：

    <?php
        global $post;
  $args = array( 
    'post_parent' => $post->ID, 
    'post_type' => 'attachment', 
    'post_mime_type' => 'image', 
    'orderby' => 'menu_order', 
    'order' => 'ASC', 
    'numberposts' => 2 );
   $images = get_posts($args);
   if ( $images ) {
    $i = 0;
    $z = 1;
    while($i <= 1){
        $image = wp_get_attachment_url( $images[$i]->ID );
    echo "<img src='$image' class='image_$z' />";   
        ?>
    <script type="text/javascript">
    var image = "<?php echo $image ; ?>";
    var under700_<? echo $z ?> = "/wp-content/themes/Loupe/scripts/timthumb.php?src=<? echo $image ?>&w=340";
     var under900_<? echo $z ?> = "/wp-content/themes/Loupe/scripts/timthumb.php?src=<? echo $image ?>&w=440";

     function imageresize() { 
       var contentwidth = $('#two_up').width();  
         if ((contentwidth) < '700'){   
             console.log('under 700_<? echo $z ?>' + under700_<? echo $z ?>);   
             $('img .image_<? echo $z ?>').attr('src', under700_<? echo $z ?>);
             } else if ((contentwidth) < '900') {
            // console.log('under 900');             
             $('img .image_<? echo $z ?>').attr('src', under900_<? echo $z ?>);
             }
              else {
              image;
             }
     }
        </script>
    <?php
      $i++;
      $z++;
    }
  }
 ?>

Answer 1

使用json_encode（）它创建一个PHP变量的javascript对象（或数组或组合）并使其成为

Answer 2

我假设$images是一个数组;如果没有，请调整此解决方案以适应。

使用Javascript：

var images = <? echo json_encode($images); ?>;
for( x=0; x<images.length-1; x++)
{
    someFunction(images[x]);
}

我建议在你的css中设置特定的高度/宽度，然后使用jquery在页面加载时替换图像。

作为替代方案，尝试在php中完成整个处理。您将节省用户加载时间，而且非常容易。 http://www.imagemagick.org/script/index.php

Answer 3

我猜你要做的是这样的事情：

<?php
global $post;
$args = array( 
  'post_parent' => $post->ID, 
  'post_type' => 'attachment', 
  'post_mime_type' => 'image', 
  'orderby' => 'menu_order', 
  'order' => 'ASC', 
  'numberposts' => 2 
);
$images = get_posts($args);
if ( $images ) {
    $i = 0;
    ?>
    <script type="text/javascript">

        function imageresize(imgElement, srcString) {
            var under700 = "/wp-content/themes/Loupe/scripts/timthumb.php?src=" + srcString + "&w=340";
            var under900 = "/wp-content/themes/Loupe/scripts/timthumb.php?src=" + srcString + "&w=440";
            var contentwidth = $('#two_up').width();


            if ((contentwidth) < '700'){   
                console.log('under 700' + under700);   
                $(imgElement).attr('src', under700);

                imgElement.onload = ''; //stop the onload event from happening again
            } else if ((contentwidth) < '900') {
                // console.log('under 900');             
                $(imgElement).attr('src', under900);

                imgElement.onload = ''; //stop the onload event from happening again
            }
            else {
                image; //don't know what to make of this (maybe you do)
            }
        }
    </script>
    <?php
    while($i < count($images)){
        $image = wp_get_attachment_url( $images[$i]->ID );
        echo "<img src='$image' class='image' onload='imageresize(this, \"$image\")' />";   
        $i++;
    }
}
?>

但是，正如@Toast之前所建议的那样：我会在PHP中执行此操作，并阻止用户重新加载页面上的所有图像。因为这是通过上面的代码有效完成的。

如果您有要调整大小的源图像文件的路径，则可以使用getimagesize来获取图像大小，并相应地调整图像的src uri。

我使用javascript执行此操作的唯一猜测是，您使用DHTML / CSS框模型来帮助您计算图像的容器宽度（#two_up）。我强烈反对这一点，但仍然上面的代码应该有效！ ;）

在php循环中包含javascript函数

3 个答案: