Intereting Posts

Показать изображение в качестве фонового изображения из postQuery

Код ниже получает изображение, но я хочу, чтобы оно было фоновым изображением. Я считаю, что мне нужно сначала сохранить изображение в качестве переменной, а затем как-то повторить его. Мой PHP невелик, поэтому, пожалуйста, дайте пример, используя код. Спасибо, эзотерические ответы.

<div class="main-slider" class="flexslider"> <ul class="slides"> <?php // Get all posts in 'slider' category $post_categories = wp_get_post_categories( $post_id ); $args = array( 'post_type' => array( 'Interaction', 'Print', 'Motion', 'Image', 'Sound' ), 'numberposts' => 6, 'category_name' => 'slider' ); $postQuery = get_posts( $args ); foreach( $postQuery as $post ) : setup_postdata($post); if ( has_post_thumbnail() ) { ?> <li class="frontSlider"><?php the_post_thumbnail('feature-slider'); ?> <a href="<?php echo get_permalink(); ?>" title="Go to <?php echo the_title(); ?>" rel="bookmark"> <div class="flex-captionWrap"> <p class="flex-caption"><?php echo get_post(get_post_thumbnail_id())->post_excerpt; ?></p><!-- Retrieves text string from Captions field in Media --> </div> </a> </li> <?php } endforeach; ?> </ul><!-- .flexslider --> </div><!-- .flexslider --> 

Solutions Collecting From Web of "Показать изображение в качестве фонового изображения из postQuery"

Вы правы, вам нужно будет получить URL-адрес изображения и установить его как переменную, чтобы вы могли повторить его как встроенный стиль в свой HTML. Я обновил ваш цикл foreach ниже и установил изображение как встроенный стиль вашего элемента <li> :

 foreach( $postQuery as $post ) : setup_postdata($post); if ( has_post_thumbnail() ) { ?> /* Get the post thumbnail source so we can get the exact URL of the image. This returns an array of stuff for us */ $thumbImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'feature-slider' ); /* Since we want the URL, let's get the first value from our new array and set it as $thumbImgUrl */ $thumbImgUrl = $thumbImg['0']; ?> <li class="frontSlider" style="background-image: url('<?php echo $thumbImgUrl; ?>');"> <a href="<?php echo get_permalink(); ?>" title="Go to <?php echo the_title(); ?>" rel="bookmark"> <div class="flex-captionWrap"> <p class="flex-caption"><?php echo get_post(get_post_thumbnail_id())->post_excerpt; ?></p><!-- Retrieves text string from Captions field in Media --> </div> </a> </li> <?php } endforeach; ?> 

Надеюсь, это поможет! Я не тестировал это, прежде чем публиковать его, но я делал это несколько раз, чтобы он работал нормально.

Есть пара вещей, которые вам нужно сделать, чтобы получить URL-адрес – вы могли бы объединить их в одно длинное предложение, возможно, но я сломаю его.

WordPress сохраняет идентификатор эскиза в таблице _thumbnail_id как _thumbnail_id поэтому нам нужно получить это с помощью get_post_meta() :

 $thumb_id = get_post_meta( $post->ID, '_thumbnail_id', true ); 

Теперь, когда у нас есть идентификатор, нам нужно получить URL-адрес. Поскольку нам нужен фактический URL-адрес файла, мы не можем использовать get_permalink() как он вернет страницу вложения, поэтому нам нужно будет использовать wp_get_attachment_image_src() который возвращает массив значений.

 $img_arr = wp_get_attachment_image_src( $thumb_id, 'feature-slider' ); 

Если посмотреть на код, мы знаем, что индекс 0 содержит фактический URL-адрес изображения, поэтому мы можем поместить его прямо в наш элемент списка:

 <li class="frontSlider" style="background-image: url( '<?php echo $img_arr[0]; ?>' );"> 

Затем в нашем CSS мы можем применить любые дополнительные стили, которые нам нужны.