网站优化

网站优化

Products

当前位置:首页 > 网站优化 >

WordPress Image Gallerys的自定义HTML只输出一半的功能

GG网络技术分享 2025-03-18 16:12 10


问题描述:

I took the following code from an example and adjusted it so a standard gallery in wordpress would output as a Flexslider and Carousel. I can output one of them just fine, but I added additional *outputs for a Carousel as well, and now only the Carousel prints out. Any help on how I can get the whole thing to output would be appreciated

add_filter(\'post_gallery\', \'my_post_gallery\', 10, 2);

function my_post_gallery($output, $attr) {

global $post;

if (isset($attr[\'orderby\'])) {

$attr[\'orderby\'] = sanitize_sql_orderby($attr[\'orderby\']);

if (!$attr[\'orderby\'])

unset($attr[\'orderby\']);

}

extract(shortcode_atts(array(

\'order\' => \'ASC\',

\'orderby\' => \'menu_order ID\',

\'id\' => $post->ID,

\'itemtag\' => \'dl\',

\'icontag\' => \'dt\',

\'captiontag\' => \'dd\',

\'columns\' => 3,

\'size\' => \'thumbnail\',

\'include\' => \'\',

\'exclude\' => \'\'

), $attr));

$id = intval($id);

if (\'RAND\' == $order) $orderby = \'none\';

if (!empty($include)) {

$include = preg_replace(\'/[^0-9,]+/\', \'\', $include);

$_attachments = get_posts(array(\'include\' => $include, \'post_status\' => \'inherit\', \'post_type\' => \'attachment\', \'post_mime_type\' => \'image\', \'order\' => $order, \'orderby\' => $orderby));

$attachments = array();

foreach ($_attachments as $key => $val) {

$attachments[$val->ID] = $_attachments[$key];

}

}

if (empty($attachments)) return \'\';

// Here\'s your actual output, you may customize it to your need

$output = \"<div class=\\\"wordpress-gallery\\\">

\";

$output = \"<div id=\\\"sliding\\\" class=\\\"flexslider flexslider--post-content\\\">

\";

//$output .= \"<div class=\\\"preloader\\\"></div>

\";

$output .= \"<ul class=\\\"slides flexslider__slides\\\">

\";

// Now you loop through each attachment

foreach ($attachments as $id => $attachment) {

// Fetch the thumbnail (or full image, it\'s up to you)

// $img = wp_get_attachment_image_src($id, \'medium\');

// $imgThumbnail = wp_get_attachment_image_src($id, \'thumbnail\');

$img = wp_get_attachment_image_src($id, \'full\');

$output .= \"<li class=\\\"slide flexslider__slide cover\\\">

\";

$output .= \"<img src=\\\"{$img[0]}\\\" width=\\\"{$img[1]}\\\" height=\\\"{$img[2]}\\\" alt=\\\"\\\" />

\";

$output .= \"</li>

\";

}

$output .= \"</ul>

\";

$output .= \"</div>

\";

$output = \"<div id=\\\"carousel\\\" class=\\\"flexslider flexslider--post-content-carousel\\\">

\";

$output .= \"<ul class=\\\"slides flexslider__slides\\\">

\";

foreach ($attachments as $id => $attachment) {

$imgThumbnail = wp_get_attachment_image_src($id, \'thumbnail\');

$output .= \"<li >

\";

$output .= \"<img src=\\\"{$imgThumbnail[0]}\\\" alt=\\\"\\\" />

\";

$output .= \"</li>

\";

}

$output .= \"</ul>

\";

$output .= \"</div>

\";

$output .= \"</div>

\";

return $output;

}

the html that gets outputed so far (it doesn\'t output the #sliding div, only the #carousel):

<div id=\"carousel\" class=\"flexslider flexslider--post-content-carousel\">

<div class=\"flex-viewport\" style=\"overflow: hidden; position: relative;\">

<ul class=\"slides flexslider__slides\" style=\"width: 1400%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);\">

<li class=\"flex-active-slide\" style=\"width: 210px; float: left; display: block;\">

<img src=\"//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-300x300.jpg\" alt=\"\" draggable=\"false\">

</li>

<li style=\"width: 210px; float: left; display: block;\">

<img src=\"//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-1-300x300.jpg\" alt=\"\" draggable=\"false\">

</li>

<li style=\"width: 210px; float: left; display: block;\">

<img src=\"//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-2-300x300.jpg\" alt=\"\" draggable=\"false\">

</li>

<li style=\"width: 210px; float: left; display: block;\">

<img src=\"//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-3-300x300.jpg\" alt=\"\" draggable=\"false\">

</li>

<li style=\"width: 210px; float: left; display: block;\">

<img src=\"//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-4-300x300.jpg\" alt=\"\" draggable=\"false\">

</li>

<li style=\"width: 210px; float: left; display: block;\">

<img src=\"//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-5-300x300.jpg\" alt=\"\" draggable=\"false\">

</li>

<li style=\"width: 210px; float: left; display: block;\">

<img src=\"//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-6-300x300.jpg\" alt=\"\" draggable=\"false\">

</li>

</ul>

</div>

<ul class=\"flex-direction-nav\">

<li class=\"flex-nav-prev\"><a class=\"flex-prev flex-disabled\" href=\"#\" tabindex=\"-1\">Previous</a></li>

<li class=\"flex-nav-next\"><a class=\"flex-next\" href=\"#\">Next</a></li>

</ul>

</div>

网友观点:

You have a few errors, that I can see.

// Here\'s your actual output, you may customize it to your need

$output = \\\"<div class=\\\\\"wordpress-gallery\\\\\">

\\\";

$output = \\\"<div id=\\\\\"sliding\\\\\" class=\\\\\"flexslider flexslider--post-content\\\\\">

\\\";

If you wish to append data, you need to put a period . before your equals = like this .= on the second $output assignment. Anytime you are appending but not putting .= after the variable name, you are basically reassigning it a new value instead of adding to it.

Also change this line:

$output = \\\"<div id=\\\\\"carousel\\\\\" class=\\\\\"flexslider flexslider--post-content-carousel\\\\\">

\\\";

to:

$output .= \\\"<div id=\\\\\"carousel\\\\\" class=\\\\\"flexslider flexslider--post-content-carousel\\\\\">

\\\";

The problem lies in the fact that you were basically resetting the variable with a new output instead of appending the data to it.

Hope this helps you.

Be sure to go through your code and double check variable assignments to make sure you are appending rather than resetting.

###

You have two errors in your code, that lies in following lines:

$output = \\\"<div id=\\\\\"sliding\\\\\" class=\\\\\"flexslider flexslider--post-content\\\\\">

\\\";

[...]

$output = \\\"<div id=\\\\\"carousel\\\\\" class=\\\\\"flexslider flexslider--post-content-carousel\\\\\">

\\\";

You are resetting $output variable two times, thus what was written to it before is lost, so you should replace them with:

$output .= \\\"<div id=\\\\\"sliding\\\\\" class=\\\\\"flexslider flexslider--post-content\\\\\">

\\\";

[...]

$output .= \\\"<div id=\\\\\"carousel\\\\\" class=\\\\\"flexslider flexslider--post-content-carousel\\\\\">

\\\";

标签:

提交需求或反馈

Demand feedback