I am trying to modify a portfolio plugin with filter function. The current code for listing to post items is:
<?php
class FullwidthPortfolioGallery extends ET_Builder_Module {
public $slug = 'fullwidth_portfolio_gallery';
public $vb_support = 'on';
protected $module_credits = array(
'module_uri' => '',
'author' => '',
'author_uri' => '',
);
public function init() {
$this->name = esc_html__('Portfolio Gallery', 'divi-modules');
$this->fullwidth = true;
$this->advanced_fields = [
'background' => false,
'fonts' => false,
'max_width' => false,
'link_options' => false,
];
}
public function get_fields() {
return [];
}
public function render($attrs, $content = null, $render_slug) {
global $post;
$portfolio = [];
$post_args = [
'posts_per_page' => -1,
'orderby' => 'date',
'order' => 'DESC',
'post_type' => 'portfolio',
];
foreach (get_posts($post_args) as $post) {
$new = new \stdClass;
$images = get_post_meta($post->ID, 'portfolio_photos', true);
$new->images = [];
if (empty($images)) {
continue;
} else {
foreach($images as $k => $img) {
$i = wp_get_attachment_image_src($k, 'portfolio_gallery_size');
$new->images[] = (object) [
'src' => $i[0],
'w' => $i[1],
'h' => $i[2],
];
}
}
$billboard_image = array_rand($images, 1);
$new->billboard = new \stdClass;
$new->billboard->mobile = wp_get_attachment_image_src($billboard_image, 'portfolio_billboard_mobile')[0];
$new->billboard->desktop = wp_get_attachment_image_src($billboard_image, 'portfolio_billboard_desktop')[0];
$new->title = $post->post_title;
$new->category = wp_get_post_terms($post->ID, 'portfolio_category')[0]->name;
$new->category_slug = wp_get_post_terms($post->ID, 'portfolio_category')[0]->slug;
$new->lightbox = 'lightbox-' . $post->ID;
$new->id = $post->ID;
$portfolio[] = $new;
unset($new);
unset($images);
}
if (empty($portfolio)) {
return;
}
add_action('wp_footer', function() {
include plugin_dir_path( dirname( __FILE__ ) ) . '../template/photoswipe.html';
});
wp_register_script('isotope', '@3/dist/isotope.pkgd.min.js', ['jquery'], false, true);
wp_register_script('portfolio_scripts', plugins_url( 'FullwidthPortfolioGallery.js', __FILE__), ['isotope', 'jquery'], false, true);
$portfolio_items = [];
foreach ($portfolio as $p) {
$portfolio_items[$p->id] = $p;
}
wp_localize_script('portfolio_scripts', 'portfolio_items', $portfolio_items);
wp_enqueue_script('isotope');
wp_enqueue_script('portfolio_scripts');
$categories = get_terms( [
'taxonomy' => 'portfolio_category',
'hide_empty' => true,
] );
$html = '<div class="portfolio-categories"><div class="portfolio-categories-wrap"><div class="portfolio-categories-list container">';
$html .= '<button class="toggle"><span class="dashicons dashicons-no"></span><span class="dashicons dashicons-filter"></span></button>';
$html .= '<button class="filter active" data-filter="*">Vis alle</button>';
foreach ($categories as $cat) {
$html .= '<button data-filter=".filter-'.$cat->slug.'" class="filter">'.$cat->name.'</button>';
}
$html .= '</div></div></div>';
$html .= '<div class="portfolio-list"><div class="portfolio-list-wrap">';
foreach ($portfolio as $p) {
$html .= '<div class="portfolio filter-'.$p->category_slug.'" data-id="'.$p->id.'"><div class="portfolio-wrap">';
$html .= '<div class="spinner-wrapper"><div class="spinner-wrap"><div class="spinner"></div></div></div>';
$html .= '<div class="billboard"><img class="lazy mobile" data-src="'.$p->billboard->mobile.'" alt="'.$p->title.'" /><img class="lazy desktop" data-src="'.$p->billboard->desktop.'" alt="'.$p->title.'" /><div class="overlay"><span class="dashicons dashicons-images-alt"></span></div></div>';
$html .= '<div class="info"><p class="cat">'.$p->category.'</p><h2>'.$p->title.'</h2></div>';
$html .= '</div></div>';
}
$html .= '</div></div>';
return '<div class="fullwidth-portfolio-gallery">'.$html.'</div>';
}
}
new FullwidthPortfolioGallery;
Currently each item get only one class "filter-TERMSLUG", but I would like to have classes listed for all the categories the item is in.
Can anyone help me with that?
Best regards
I am trying to modify a portfolio plugin with filter function. The current code for listing to post items is:
<?php
class FullwidthPortfolioGallery extends ET_Builder_Module {
public $slug = 'fullwidth_portfolio_gallery';
public $vb_support = 'on';
protected $module_credits = array(
'module_uri' => '',
'author' => '',
'author_uri' => '',
);
public function init() {
$this->name = esc_html__('Portfolio Gallery', 'divi-modules');
$this->fullwidth = true;
$this->advanced_fields = [
'background' => false,
'fonts' => false,
'max_width' => false,
'link_options' => false,
];
}
public function get_fields() {
return [];
}
public function render($attrs, $content = null, $render_slug) {
global $post;
$portfolio = [];
$post_args = [
'posts_per_page' => -1,
'orderby' => 'date',
'order' => 'DESC',
'post_type' => 'portfolio',
];
foreach (get_posts($post_args) as $post) {
$new = new \stdClass;
$images = get_post_meta($post->ID, 'portfolio_photos', true);
$new->images = [];
if (empty($images)) {
continue;
} else {
foreach($images as $k => $img) {
$i = wp_get_attachment_image_src($k, 'portfolio_gallery_size');
$new->images[] = (object) [
'src' => $i[0],
'w' => $i[1],
'h' => $i[2],
];
}
}
$billboard_image = array_rand($images, 1);
$new->billboard = new \stdClass;
$new->billboard->mobile = wp_get_attachment_image_src($billboard_image, 'portfolio_billboard_mobile')[0];
$new->billboard->desktop = wp_get_attachment_image_src($billboard_image, 'portfolio_billboard_desktop')[0];
$new->title = $post->post_title;
$new->category = wp_get_post_terms($post->ID, 'portfolio_category')[0]->name;
$new->category_slug = wp_get_post_terms($post->ID, 'portfolio_category')[0]->slug;
$new->lightbox = 'lightbox-' . $post->ID;
$new->id = $post->ID;
$portfolio[] = $new;
unset($new);
unset($images);
}
if (empty($portfolio)) {
return;
}
add_action('wp_footer', function() {
include plugin_dir_path( dirname( __FILE__ ) ) . '../template/photoswipe.html';
});
wp_register_script('isotope', 'https://unpkg/isotope-layout@3/dist/isotope.pkgd.min.js', ['jquery'], false, true);
wp_register_script('portfolio_scripts', plugins_url( 'FullwidthPortfolioGallery.js', __FILE__), ['isotope', 'jquery'], false, true);
$portfolio_items = [];
foreach ($portfolio as $p) {
$portfolio_items[$p->id] = $p;
}
wp_localize_script('portfolio_scripts', 'portfolio_items', $portfolio_items);
wp_enqueue_script('isotope');
wp_enqueue_script('portfolio_scripts');
$categories = get_terms( [
'taxonomy' => 'portfolio_category',
'hide_empty' => true,
] );
$html = '<div class="portfolio-categories"><div class="portfolio-categories-wrap"><div class="portfolio-categories-list container">';
$html .= '<button class="toggle"><span class="dashicons dashicons-no"></span><span class="dashicons dashicons-filter"></span></button>';
$html .= '<button class="filter active" data-filter="*">Vis alle</button>';
foreach ($categories as $cat) {
$html .= '<button data-filter=".filter-'.$cat->slug.'" class="filter">'.$cat->name.'</button>';
}
$html .= '</div></div></div>';
$html .= '<div class="portfolio-list"><div class="portfolio-list-wrap">';
foreach ($portfolio as $p) {
$html .= '<div class="portfolio filter-'.$p->category_slug.'" data-id="'.$p->id.'"><div class="portfolio-wrap">';
$html .= '<div class="spinner-wrapper"><div class="spinner-wrap"><div class="spinner"></div></div></div>';
$html .= '<div class="billboard"><img class="lazy mobile" data-src="'.$p->billboard->mobile.'" alt="'.$p->title.'" /><img class="lazy desktop" data-src="'.$p->billboard->desktop.'" alt="'.$p->title.'" /><div class="overlay"><span class="dashicons dashicons-images-alt"></span></div></div>';
$html .= '<div class="info"><p class="cat">'.$p->category.'</p><h2>'.$p->title.'</h2></div>';
$html .= '</div></div>';
}
$html .= '</div></div>';
return '<div class="fullwidth-portfolio-gallery">'.$html.'</div>';
}
}
new FullwidthPortfolioGallery;
Currently each item get only one class "filter-TERMSLUG", but I would like to have classes listed for all the categories the item is in.
Can anyone help me with that?
Best regards
Share Improve this question edited Jun 26, 2019 at 14:09 jlock asked Jun 26, 2019 at 13:42 jlockjlock 36 bronze badges 2- Please provide the complete code you have used. – Bhupen Commented Jun 26, 2019 at 13:53
- Sorry... updated the post with full code – jlock Commented Jun 26, 2019 at 14:09
2 Answers
Reset to default 0Please replace:
$new->category_slug = wp_get_post_terms($post->ID, 'portfolio_category')[0]->slug;
with
$category_slug = wp_get_post_terms($post->ID, 'portfolio_category');
$cat_cls = '';
foreach($category_slug as $cat_classes){
$cat_cls .= " " . $cat_classes->slug;
}
$new->category_slug = $cat_cls;
Because the code you have written above will store only first category it will get.
While you are looping through your $categories, you can build out a class to use later on. I pulled out just the two foreach loops and dropped a few lines in there that will hopefully get you there:
// Fun stuff above
$category_class = '';
foreach ($categories as $cat) {
$html .= '<button data-filter=".filter-'.$cat->slug.'" class="filter">'.$cat->name.'</button>';
// NOTE: Build out your $category_class here
$category_class .= $cat->slug.' '; // we need an extra space to separate each class. We'll use trim() to clean up the extra space to the right of the last class
}
$html .= '</div></div></div>';
$html .= '<div class="portfolio-list"><div class="portfolio-list-wrap">';
foreach ($portfolio as $p) {
$html .= '<div class="portfolio filter-'.$p->category_slug.' '.trim($category_class).'" data-id="'.$p->id.'"><div class="portfolio-wrap">';
$html .= '<div class="spinner-wrapper"><div class="spinner-wrap"><div class="spinner"></div></div></div>';
$html .= '<div class="billboard"><img class="lazy mobile" data-src="'.$p->billboard->mobile.'" alt="'.$p->title.'" /><img class="lazy desktop" data-src="'.$p->billboard->desktop.'" alt="'.$p->title.'" /><div class="overlay"><span class="dashicons dashicons-images-alt"></span></div></div>';
$html .= '<div class="info"><p class="cat">'.$p->category.'</p><h2>'.$p->title.'</h2></div>';
$html .= '</div></div>';
}
// Fun stuff below
Hope that helps!
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745366628a4624610.html
评论列表（0条）