0

I am using the jQuery Nivo Slider plugin in Wordpress (but not the Wordpress Plugin of the same name) with custom posts, it works perfectly and is simple as pie, EXCEPT it is adding the site root to the image path. I am pulling in an absolute path for my image 

http://www.site.com/images/image.jpg

but Nivo is prepending the site root to the path, which generates:

www.site.com/http://www.site.com/images/image.jpg

I can't find an option in Nivo's documentation to set it to take an absolute path... any ideas??

Here is my template code: 

            <?php global $post;
                 $myposts = get_posts('post_type=homepageslider&numberposts=4&order=asc');
                 foreach($myposts as $post) :
                 setup_postdata($post);?>


                <a href="<?php the_field('link'); ?>"><img src="<?php the_field('image'); ?>" data-thumb="<?php the_field('image'); ?>" /></a>

            <?php endforeach; ?>

a few comments:

  • print_r shows 'image' is echoing this exact path: http://www.mysite.com/wp-content/uploads/product1.jpg (which is correct)
  • when pulled out of the slide code, that loop generates the 4 images perfectly fine with no broken image icon.
  • I tried using a Nivo Slider WP plugin and it worked fine but gave the same issue: broken path, broken link icon (even though the image was loading).

Below is the rendered HTML from the browser. As you can see, the "current slide" path is fine. The problem is with the content in the nivo-slice divs: it's adding an extra root to them. This is the SAME issue I had when using the plugin without any of my custom posts or fields.

<a class="nivo-imageLink" href="http://www.mysite.com/products/product1/" style="display: none;">
<a class="nivo-imageLink" href="http://www.mysite.com/products/product2/" style="display: none;">
<a class="nivo-imageLink" href="http://www.mysite.com/products/product3/" style="display: none;">
<a class="nivo-imageLink" href="http://www.mysite.com/products/product4/" style="display: block;">
<img class="nivo-main-image" src="http://www.mysite.com/wp-content/uploads/product1.jpg" style="display: inline; height: 377px;">

<div class="nivo-caption"></div>

<div class="nivo-slice" name="0" style="left: 0px; width: 971px; height: 377px; opacity: 1; overflow: hidden;">
    <img style="position:absolute; width:971px; height:auto; display:block !important; top:0; left:-0px;" src="www.mysite.com/http://www.mysite.com/wp-content/uploads/product1.jpg">
</div>

(and the div nivo-slice is repeated [name from 0 - 14] with the different slides)

Here is the error being generated in the console (Repeating every time the slider rotates)

GET http://www.mysite.com/http:/www.mysite.com/wp-content/uploads/product1.jpg 404 (Not Found) /http:/www.mysite.com/wp-content/uploads/product1.jpg:1
GET http://www.mysite.com/http:/www.mysite.com/wp-content/uploads/product.jpg 404 (Not Found)

Another Update: I took the wordpress loop out completely and put in 4 static image links. The rotator works fine, shows the images fine, but is having the same issue, broken image icon and prepending the site url to the existing path.

4

2 回答 2

0

在插件中，您可以指定绝对路径。Wordpress 已经使用以下代码内置了它：

$wpDir = ABSPATH;
print_r($wpDir) // path to wp install

您可以查看显示的内容，然后相应地调整图像路径。

于 2013-03-19T17:56:46.063 回答
0

线索在您收到的 404 错误消息中。

http:/www.mysite.com/wp-content/uploads/product1.jpg

该 URL 格式错误，因为该方案缺少一个额外的正斜杠，我想这会被解释为一个相对 URL。

于 2013-03-19T18:01:18.853 回答