Как прописать, если категория x, то картинка x?

Question

[Екатерина Ивасенко]

Есть страница, где разные собраны товары из разных категорий
У меня для вывода постов (карточек товаров) такой код:

<?php
                $temp = $wp_query; $wp_query= null;
                $wp_query = new WP_Query(); $wp_query->query('category_name=for_heating&showposts=-1' . '&paged='.$paged);
                 while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
               <div class="col-lg-4 <?php $posttags = get_the_tags();
                    if( $posttags ){
                    foreach( $posttags as $tag ){
                    echo $tag->slug. ' ';
                    }
                } ?>">
		<div class="card_item" id="spoiler1">
			<div class="content-item">
				<div class="title_svg">
					<h4 class="h4_cards">
						<?php the_title() ?>
					</h4>
				       <div class="svg_card">
				         <?php the_post_thumbnail( 'full', $svg_attr ); ?> 
				        </div>
			        </div>
                          </div>
		    </div>
		</div>
<?php endwhile; ?>

<?php the_post_thumbnail( 'full', $svg_attr ); ?> - через такую штуку сейчас выводится картинка ( из админким)
На выходе получается svg, но в теге img, а через него нельзя поменять заливку

Ломаю голову и не могу придумать как прописать, что если категория x, то выводим svg x и при hover fill: #новыйцвет , если категория y, то y и так далее

Вы поможете любой идеей или хотя бы наброском!
Спасибо!

Comments

[Анар Лятифов]

Сомневаюсь что смогу помочь с решением, и вопрос скорее по PHP, но пищу для размышлений дам.

1) если это всегда один и тот же SVG но надо менять заливку внутри него в зависимости от категории, то это можно сделать только через тег <object> с использованием JS(если не знаете, то гуглите "доступ к контексту <object>" или "изменение svg через <object>")

2) Для того чтоб проделать выше сказанное вам не подходит тот способ вывода который вы используете вам нужно получить так называемый "пермалинк"(прямую ссылку на изображение, без вывода тега img) вроде как это делается через "wp_get_attachment_image_src()" опять же найти точный способ не должно составить труда

3) вам так же понадобится получать ID категории поста если не ошибаюсь делается это так "get_the_category($post->ID);" и после получения этого ID можно сделать следующее:

<object data="<?php echo wp_get_attachment_image_src($attachment_id) ?>" width="300" height="200" data-cat="<?php echo get_the_category($post->ID); ?>">

А после уже в js на основе информации из "data-cat" воздействовать на SVG как я уже писал ранее.

P.S. сверху приведён скорее псевдо код, в действительности работать скорее всего оно будет по другому

P.S.S Надеюсь смог помочь ну или подтолкнул в нужном направлении))

[Екатерина Ивасенко]

Анар Лятифов, спасибо большое, как минимум понимаю куда двигаться!

[Анар Лятифов]

Екатерина Ивасенко, Не за что)) Успехов)

Answer 1

[WP Panda]

Если на коленке, то так:

function wpp_change_svg_img_color( $url, $color ) {
	$content                 = file_get_contents( $url );
	$doc                     = new DOMDocument();
	$doc->preserveWhiteSpace = false;
	$doc->loadXML( $content ) or die( 'Failed to load SVG  ' . $url );
	$paths = $doc->getElementsByTagName( "path" );
	foreach ( $paths as $path ) {
		$path->setAttribute( 'fill', $color );
		$path->setAttribute( 'style', 'fill:' . $color );
		$content = $doc->saveXML( $doc );
	}

	return $content;
}

$url = the_post_thumbnail_url( 'full' ); // url миниатюры
$color = '#000000'; #нужный вам цвет
printf( '<img src="%s" alt="">', wpp_change_svg_img_color( $url, $color) );

Comments

[Екатерина Ивасенко]

Выдаёт ошибку
Может я не туда вставляю?
Вместо того, что было подставила и не получилось

<?php the_post_thumbnail( 'full', $svg_attr ); ?>
- (сюда)

[WP Panda]

Екатерина Ивасенко, wpp_change_svg_img_colo зачем вы 2 раза ее объявляете?

[Екатерина Ивасенко]

WP Panda, вроде не объявляю два раза((
я окончательно запуталась
куда нужно вставить функцию, которую вы написали?
у меня цикл для вывода постов ( он в вопросе ), новую функцию вместо старого вывода svg пыталась подставить и ошибку выдаёт, я кажется не то делаю

помогите пожалуйста, я без вас умру с этим

вот так сейчас и это ошибка:

<?php
      $temp = $wp_query; $wp_query= null;
      $wp_query = new WP_Query(); $wp_query->query('category_name=for_heating&showposts=-1' . '&paged='.$paged);
    while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
    <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 one_card <?php $posttags = get_the_tags();
    if( $posttags ){
    foreach( $posttags as $tag ){
    echo $tag->slug. ' ';
    }
} ?>">
<div class="card_item" id="spoiler1">
<div class="content-item">
<div class="title_svg d-flex justify-content-between">
	<h4 class="h4_cards">
		<?php the_title() ?>
	</h4>
<div class="svg_card">
  <?php function wpp_change_svg_img_color( $url, $color ) {
  $content                 = file_get_contents( $url );
  $doc                     = new DOMDocument();
  $doc->preserveWhiteSpace = false;
  $doc->loadXML( $content ) or die( 'Failed to load SVG  ' . $url );
  $paths = $doc->getElementsByTagName( "path" );
  foreach ( $paths as $path ) {
    $path->setAttribute( 'fill', $color );
    $path->setAttribute( 'style', 'fill:' . $color );
    $content = $doc->saveXML( $doc );
  }

  return $content;
}

$url = the_post_thumbnail_url( 'full' ); // url миниатюры
$color = '#000000'; #нужный вам цвет
printf( '<img src="%s" alt="">', wpp_change_svg_img_color( $url, $color) );
?>
</div>
</div>
<p class="p6">
<?php the_excerpt(); ?>
</p>
						
</div>
</div>
</div>
<?php endwhile; ?>

[WP Panda]

Ну вы хоть основы того что делаете выучите. Хотя бы PHP, Сейчас - объявляете, вы ее в цикле пытаетесь декларировать несколько раз

Функцию вставляете в файл функций, например functions.php

а это в шаблон вывода.

$url = the_post_thumbnail_url( 'full' ); // url миниатюры
$color = '#000000'; #нужный вам цвет
printf( '<img src="%s" alt="">', wpp_change_svg_img_color( $url, $color) );

[Екатерина Ивасенко]

Мне очень стыдно просто ужас как, но я в последний раз к вам пристану

$content = file_get_contents( $url );
$doc->loadXML( $content ) or die ( 'Failed to load SVG' . $url );

Warning: file_get_contents(): Filename cannot be empty in и на второй Warning: DOMDocument::loadXML(): Empty string supplied as input in

[WP Panda]

ну значит вы не передаете функцию урл картинки