修改WordPress循环以输出帖子中的所有图像，并且图像标签中包含缩略图? [英] Modify WordPress loop to output all images in a post with thumbnails included in the image tag?

问题描述

这个问题需要一些php，一些jquery和一些常规编程逻辑.

在以前的问题的慷慨帮助下在这里，我构建了一个脚本，该脚本扫描WordPress帖子中的图像附件，如果找到附件，则将其移动到列表外部新创建的<ul>中的项目.原因是使图像可供我硬编码到主题中的滑块(RoyalSlider)使用(出于多种原因，我不想使用WP插件版本).

您可以在此处看到我正在使用的网站.

同一脚本在网站的各个部分提供内容-前两个部分的滑块和最后一个部分的客户端徽标.

我现在需要在第二部分的滑块中添加缩略图导航.如您所见，如果您检查了代码，我已经修改了WP循环(在本节的页面模板中)，以便它返回贴在帖子上的任何图像(以及图像本身)的缩略图. /p>

这是我用来执行此操作的代码:

<?php 
    $images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . $post->ID );
    foreach( $images as $imageID => $imagePost )
    echo wp_get_attachment_image($imageID, 'thumbnail', false);
?>

问题在于，该缩略图当前正在与我的jQuery脚本交互，因此这些缩略图将移至列表项，并作为图像包含在滑块中！相反，目标是将每个缩略图包含在其各自图像的<img>标签中，如下所示:

 <img class="rsImg" src="image.jpg" data-rsTmb="small-image.jpg" alt="image description" />

因此，这是问题的逻辑部分:使这些缩略图像缩略图而不是图像一样运行的最佳方法是什么?我怀疑我需要以某种方式在WP页面模板循环中对它们进行标记，然后才能将它们回显"到帖子中，以便其他脚本不会拾取它们?即也许将它们作为一系列变量传递，然后使用我的脚本检查这些变量，如果找到它们，则将它们按顺序分配给图像，从头到尾?这可能吗?还是有更好的方法来解决这个问题?我可以直接从WP循环中以所需的代码片段输出图像和缩略图吗?

除了基本的包含内容之外，我对如何编写PHP的知识几乎为零，因此无法真正尝试一下.

对此的任何帮助都将受到高度赞赏-我理解这个问题是一个艰巨的任务，因为它需要几个领域的专业知识并且非常具体，但是我认为这可能会帮助处于类似情况的其他人，并且我当然会学到很多从知道如何处理/完成这个！

解决方案

代替

echo wp_get_attachment_image($imageID, 'thumbnail', false);

^这将返回HTML img元素.

使用

wp_get_attachment_image_src( $imageID, $size, $icon );

^这将返回一个数组，其中包含图像的Url，Width，Height.

您的情况下的示例:

$images =& get_children( 
               array(
                     'post_type'      => 'attachment',
                     'post_mime_type' => 'image',
                     'post_parent'    => $post->ID,
                     'posts_per_page' => -1
                    )
              );

foreach ( (array) $images as $imageID => $imagePost ) {
   // Getting the full image size and thumbnail
   $thumbnail = wp_get_attachment_image_src( $imageID, 'thumbnail');
   $full = wp_get_attachment_image_src( $imageID, 'full');

   echo '<img class="rsImg" src="'. $full[0] .'" data-rsTmb="'. $thumbnail[0] .'" alt="'. $imagePost->post_content .'" />';

}

This question requires some php, some jquery, and some general programming logic.

With generous help in previous questions here, I have built a script that scans WordPress posts for image attachments and, if it finds any, moves these to list items in a newly created <ul> outside of the post. The reason for this is to make the images available to a slider (RoyalSlider) that I am hard-coding into the theme (I do not want to use the WP plugin version for several reasons).

You can see the site I am working on here.

The same script is feeding several parts of the site - the sliders in the top two sections, and the client logos in the last section.

I now need to add thumbnail navigation to the second section's slider. As you can see if you inspect the code, I have modified the WP loop (in the page template for this section) so that it is returning the thumbnails for any images attached to the post (as well as obviously the images themselves).

This is the code I am using to do this:

<?php 
    $images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . $post->ID );
    foreach( $images as $imageID => $imagePost )
    echo wp_get_attachment_image($imageID, 'thumbnail', false);
?>

The problem is that this currently is interacting with my jQuery script so that these thumbnails get moved to list-items and included in the slider as images! The goal instead is to include each thumbnail within the <img> tag of its respective image, like this:

 <img class="rsImg" src="image.jpg" data-rsTmb="small-image.jpg" alt="image description" />

So here's the logic part of the problem: what's the best way to get these thumbnails to behave like thumbnails, not images? I suspect that I need to somehow tag them in the WP page template loop before they ever get 'echo'd into the post, so that the other script doesn't pick them up? i.e. maybe pass them through as a sequence of variables, then use my script to check for these and if it finds them, assign them to the images in sequence, first to last? Is this possible? Or are there better ways of going about this? Can I maybe output both images and thumbnails in the desired code snippet directly from the WP loop?

I have almost zero knowledge of how to write PHP beyond basic includes, so cannot really experiment with this.

Any help with this is hugely appreciated - I understand this question is a tall order as it requires expertise in several areas and is quite specific, but I think it may help others in similar situations, and I'd certainly learn a lot from know how to approach/accomplish this!

解决方案

Instead of

echo wp_get_attachment_image($imageID, 'thumbnail', false);

^ This returns an HTML img element.

use

wp_get_attachment_image_src( $imageID, $size, $icon );

^ This returns an Array that contains Url, Width, Height of the image.

example in your case:

$images =& get_children( 
               array(
                     'post_type'      => 'attachment',
                     'post_mime_type' => 'image',
                     'post_parent'    => $post->ID,
                     'posts_per_page' => -1
                    )
              );

foreach ( (array) $images as $imageID => $imagePost ) {
   // Getting the full image size and thumbnail
   $thumbnail = wp_get_attachment_image_src( $imageID, 'thumbnail');
   $full = wp_get_attachment_image_src( $imageID, 'full');

   echo '<img class="rsImg" src="'. $full[0] .'" data-rsTmb="'. $thumbnail[0] .'" alt="'. $imagePost->post_content .'" />';

}

这篇关于修改WordPress循环以输出帖子中的所有图像，并且图像标签中包含缩略图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！