Silversstripe 3:创建页面控制功能,从孙子页面获取图像并随机排序


Silverstripe 3: create page control function to get images from grandchild pages and sort all randomly

我正试图从我的公文包页面(PortfolioPage.ss)的每个孙子页面(GalleryPage.ses)中获取一个特定的图像($FeaturedImage),并以随机顺序显示它们。

我可以很容易地使用模板获得图像。投资组合Page.ss

<% loop Children %>
 <% loop Children %>
   <% loop FeaturedImage %>
      <img src="$Url"></>
   <% end_loop %>
 <% end_loop %>
<% end_loop %>

但这将按照菜单中页面的顺序显示它们。

经过一些研究,似乎最好在页面控制器中创建一个函数,但我不确定如何编写。。(任何有这些文档/教程链接的人都会很棒)。

迄今为止发现的类似代码示例:从Children获取数据对象-SilverStripe 3.1http://www.silverstripe.org/template-questions/show/23296

银条纹文档:http://doc.silverstripe.org/framework/en/topics/datamodel

我只是不知道如何将其应用于我的代码。。感谢

基本上,您需要在Portfolio Page Controller中创建一个函数(或者在任何需要此逻辑的页面中)。

这里有两个例子。第一个只是从数据库中获取所有现有的FeaturedImage,然后按随机顺序返回:

function AllFeaturedImages()
{
    return FeaturedImage::get()->sort('RAND()');
}

这一个从页面的子级获取所有FeaturedImage,并按随机顺序返回:

function DescendantFeaturedImages()
{
    $featuredImages = array();
    foreach ($this->Children() as $child)
    {
        foreach ($child->Children() as $grandChild)
        {
            $images = $grandChild->FeaturedImage();
            if ( $images )
            {
                $featuredImages = array_merge( $featuredImages, $images->toArray() );
            }
        }
    }
    shuffle($featuredImages);
    return ArrayList::create($featuredImages);
}

如果FeaturedImage关系只是has_one,则这会发生一点变化:

function DescendantFeaturedImages()
{
    $featuredImages = array();
    foreach ($this->Children() as $child)
    {
        foreach ($child->Children() as $grandChild)
        {
            $image = $grandChild->FeaturedImage();
            if ( $image )
            {
                array_push( $featuredImages, $image );
            }
        }
    }
    shuffle($featuredImages);
    return ArrayList::create($featuredImages);
}

然后,在Portfolio Page模板中,您可以通过调用函数名来循环FeaturedImage。这里是$AllFeaturedImages$DescendantFeaturedImages。在你的情况下,你会得到这样的东西:

<% loop $DescendantFeaturedImages %>
    <img src="$URL"/>
<% end_loop %>

我可以在SilverStirpe教程中找到一个使用Controller函数的示例:http://doc.silverstripe.org/framework/en/tutorials/2-extending-a-basic-site

让我知道情况如何。

我尝试了Colymba的代码,它像冠军一样工作。我建议遵循他的代码,而不是我将在下面解释的方法。

正如您在评论中所说,您可以从模板中访问祖父母的图像。您可以使用JavaScript,或者像本例中的jQuery一样,对图像进行随机排序。

(function($){
    $.fn.shuffle = function() {
        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function(){
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
           });
        this.each(function(i){
            $(this).replaceWith($(shuffled[i]));
        });
        return $(shuffled);
    };
})(jQuery);

然后对要随机排序的元素调用函数:

$('#imgholder img').shuffle();

更全面的解释可以在css-tricks.com

上找到