Getting Featured Image as a Background Image - php

I have a code in my page.php file that creates a list of child pages. I want every li to have a background-image added by Featured image function. Here is the entire code I have
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php endwhile; // end of the loop. ?>
<?php
if (is_page('eventsphotography')) {
$query = new WP_query('pagename=eventsphotography');
$eventsphotography_id = $query->queried_object->ID;
//The loop
if($query->have_posts() ) {
while($query->have_posts() ) {
$query->the_post();
the_content();
}
}
/* Get the children of the eventsphotography page */
$args = array (
'post_parent' => $thePostID,
'post_parent' => $eventsphotography_id,
'order' => 'ASC'
);
$eventsphotography_query = new WP_query($args);
//The Loop
if($eventsphotography_query->have_posts() ) {
echo '<ul class="events-list">';
while($eventsphotography_query->have_posts() ){
$eventsphotography_query->the_post();
$background = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
echo '<li style="background:url(' . $background[0] . '); background-repeat:no-repeat; background-size:cover;">';
echo '<div class="events-centered">';
echo '<a href="' . get_permalink() . '">';
echo '<h4>' . get_the_title() . '</h4>';
echo '</a>';
echo '<div class="view-events-details">';
echo '<a href="' . get_permalink() . '">';
echo '<h5>View Images</h5>';
echo '</a>';
echo '</div>';
echo '</div>'; /* end of events-centered */
echo '</li>';
}
echo'</ul>';
}
}
?>
I only need help for these lines:
$background = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
AND
echo '<li style="background:url(' . $background[0] . '); background-repeat:no-repeat; background-size:cover;">';
Here's the screenshot of the result of my code:
http://oi68.tinypic.com/10xzdhl.jpg
I marked the first <li> with a red rectangle. As I said before, I want URL of the featured image to be placed in <li style="background:url(URL of the featured image)">

I have found a solution. First, I created a new WP_Query:
$subs = new WP_Query( array( 'post_parent' => $post->ID, 'post_type' => 'page', 'meta_key' => '_thumbnail_id'));
Then in my loop I added this lines:
if($eventsphotography_query->have_posts() && $subs->have_posts()) {
echo '<ul class="events-list">';
while($eventsphotography_query->have_posts() && $subs->have_posts()){
$eventsphotography_query->the_post();
$subs->the_post();
echo '<li>';
echo get_the_post_thumbnail($post->ID);
...rest of the code...

Related

Posts by tag - Creating a reset

I have a rather neat filter tag that will narrow down results in a specific post category to just the posts within that category that have the selected tag.
I am struggling to get the stock 'select tag...' option to reset the filter and show all results again - so once a user selects a tag the only way to reset the list is by refresh.
Here is my filter within the function.php script:
// CASE STUDY FILTER
function my_filters(){
$args = array(
'orderby' => 'date',
'order' => $_POST['date']
);
if( isset( $_POST['tagfilter'] ) ):
$args['tax_query'] = array(
array(
'taxonomy' => 'post_tag',
'field' => 'id',
'terms' => $_POST['tagfilter']
)
);
$query = new WP_Query( $args );
if( $query->have_posts() ):
while( $query->have_posts() ):
$query->the_post();
echo "<article class=\"post-box " . get_post_class() . "\">";
echo "";
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' );
echo "<div class=\"cs-image\" style=\"background-image: url('" . $url . "')\"></div>";
$case_study = get_field('case_study_page_content');
if( $case_study ):
echo "<div class=\"cs-text-container\">";
while( have_rows('case_study_page_content') ): the_row();
$case_study_title = get_sub_field('title');
$case_study_author = get_sub_field('author');
echo "<h2>" . $case_study_title . "</h2>";
echo "<p>" . $case_study_author . "</p>";
endwhile;
echo "</div>";
endif;
echo "</article>";
endwhile;
wp_reset_postdata();
else :
echo 'No case studies found';
endif;
die();
endif;
}
add_action('wp_ajax_customfilter', 'my_filters');
add_action('wp_ajax_nopriv_customfilter', 'my_filters');
// END CASE STUDY FILTER
The form that this takes input from is here:
<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="advanced-filterform">
<?php
if( $terms = get_terms( 'post_tag', 'orderby=name' ) ) :
echo '<select class="tagfilter" name="tagfilter"><option>Select tag...</option>';
foreach ( $terms as $term ) :
echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
endforeach;
echo '</select>';
endif;
?>
<button>Apply filters</button>
<input type="hidden" name="action" value="customfilter">
</form>
As simply as possible without creating a tag on every post - how can I implement this.

Array wordpress php

I want to create a portfolio in wordpress.
It is working properly but I would like to see the categories of the portfolio in h3 under the h2 title.
Other question.
Now the link will only work on the title h2, I wish it were all over the caption as link.
any advice on the code are welcome! Thank you so much
<?php
$args = array( 'post_type' => 'portfolio', 'posts_per_page' => -1 );
$loop = new WP_Query( $args );
$terms = get_the_terms( $post->ID, 'portfolio-categories' );
if ( $terms && ! is_wp_error( $terms ) ) :
$links = array();
foreach ( $terms as $term ) {
$links[] = $term->name;
}
$tax_links = join( " ", str_replace(' ', '-', $links));
$tax = strtolower($tax_links);
else :
$tax = '';
endif;
while ( $loop->have_posts() ) : $loop->the_post();
echo '<div class="row-masonry">';
echo '<div class="item">';
echo '<div class="well portfolio-item no-gutter">';
echo '<div class="thumbnail no-gutter">'. get_the_post_thumbnail() .'</div>';
echo '<div class="caption">';
echo '<div class="vertical-align">';
$link = get_the_permalink();
echo "<a href=$link>";
echo '<h2>'. get_the_title() .'</h2>';
I want to see here the portfolio image category in h3
echo "</a>";
echo '</div>'; /*close caption*/
echo '</div>'; /*close caption*/
echo '</div>';
echo '</div>';
endwhile;
echo '</div>';
echo '</div>';
echo '</div>';
?>
</div><!-- #page -->
This should work for you. You can google how to get the category for a post. It will yield your answer - but this will work.
<?php
$args = array( 'post_type' => 'portfolio', 'posts_per_page' => -1 );
$loop = new WP_Query( $args );
$terms = get_the_terms( $post->ID, 'portfolio-categories' );
if ( $terms && ! is_wp_error( $terms ) ) :
$links = array();
foreach ( $terms as $term ) {
$links[] = $term->name;
}
$tax_links = join( " ", str_replace(' ', '-', $links));
$tax = strtolower($tax_links);
else :
$tax = '';
endif;
while ( $loop->have_posts() ) : $loop->the_post();
echo '<div class="row-masonry">';
echo '<div class="item">';
echo '<div class="well portfolio-item no-gutter">';
echo '<div class="thumbnail no-gutter">'. get_the_post_thumbnail() .'</div>';
echo '<div class="caption">';
echo '<div class="vertical-align">';
$link = get_the_permalink();
echo "<a href=$link>";
echo '<h2>'. get_the_title() .'</h2>';
// GET THE CATEGORY -- Returns an array of all categories
// $categories = get_the_category();
$categories = get_the_terms( get_the_ID(), 'portfolio-categories' ); // for custom taxnomies
// If not an empty array then show the first category set
if ( ! empty( $categories ) ) {
echo "<h3>" . esc_html( $categories[0]->name ) ."</h3>";
}
echo "</a>";
echo '</div>'; /*close caption*/
echo '</div>'; /*close caption*/
echo '</div>';
echo '</div>';
endwhile;
echo '</div>';
echo '</div>';
echo '</div>';
?>
</div><!-- #page -->

How to get thumbnail image in wordpress

I have code something like this,
$output .= '<div class="feature-course" '.$style.'>';
$output .= '<h3>' . get_the_title(). '</h3>';
$output .= '<p>' . the_excerpt_max_charlength(70). '</p>';
$output .= '<a class="btn-featue" href="' . get_permalink(). '">' . __('View Course', 'themeum-lms'). ' <i class="fa fa-long-arrow-right"></i></a>';
I need to add image function how I can do that? Can you please suggest me.
get_the_post_thumbnail ( int $post_id = null, string|array $size = 'post-thumbnail', string|array $attr = '' )
More info here: https://developer.wordpress.org/reference/functions/get_the_post_thumbnail/
Try This
$output .= '<div class="feature-course" '.$style.'>';
$output .= '<h3>' . get_the_title(). '</h3>';
//Display Full image thubnail with link
$output .= ''.get_the_post_thumbnail(get_the_ID(),'full').'';
// Retrieve Thumbnail URL and use it on src attribute
$output .= '<img src="'.wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()) ).'" alt="Yow" title="Yow" />';
$output .= '<p>' . the_excerpt_max_charlength(70). '</p>';
$output .= '<a class="btn-featue" href="' . get_permalink(). '">' . __('View Course', 'themeum-lms'). ' <i class="fa fa-long-arrow-right"></i></a>';
<?php wp_get_attachment_image( $attachment_id, $size, $icon, $attr ); ?>
<?php echo wp_get_attachment_image( 1 ); ?>
<ul>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
'post_parent' => $post->ID
);
$attachments = get_posts( $args );
if ( $attachments ) {
foreach ( $attachments as $attachment ) {
echo '<li>';
echo wp_get_attachment_image( $attachment->ID, 'full' );
echo '<p>';
echo apply_filters( 'the_title', $attachment->post_title );
echo '</p></li>';
}
}
endwhile; endif; ?>
</ul>
https://codex.wordpress.org/Function_Reference/wp_get_attachment_image
You can use the below code for getting thumbnail image.
the_post_thumbnail(); // without parameter -> 'post-thumbnail'
the_post_thumbnail( 'thumbnail' ); // Thumbnail (default 150px x 150px max)
the_post_thumbnail( 'medium' ); // Medium resolution (default 300px x 300px max)
the_post_thumbnail( 'large' ); // Large resolution (default 640px x 640px max)
the_post_thumbnail( 'full' ); // Full resolution (original size uploaded)
the_post_thumbnail( array(100, 100) ); // Other resolutions
For more please referhttps://codex.wordpress.org/Function_Reference/the_post_thumbnail
==========================
if ( has_post_thumbnail()) {
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large');
echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';
echo get_the_post_thumbnail($post->ID, 'thumbnail');
echo '</a>';
}

Calling array in shortcode issues

I am condensing some area of duplicate code over multiple template into one shortcode that I can reuse easily.
I am calling the featured image url as an inline background image style at it works great! Here's the code.
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="single-casestudy" style="background-image: url('<?php echo $image[0]; ?>'); background-size: 100%;">
<div class="case-study-content">
<h4><?php the_title(); ?></h4>
<p><?php echo excerpt(22); ?></p>
</div>
</div>
<?php endwhile ; ?>
This works fine when not in the shortcode, and I can see my featured image as the background on the live site, however when putting it into a shortcode function, it doesn't error, it just doesn't work! Heres the code I am using for the shortcode functionality. It seems like the $image[0] is not pulling through any data into the array.
function otherinfo_function() {
$args = array( 'post_type' => 'casestudy',
'posts_per_page' => -1,
'orderby' => menu_order,
'order' => RAND
);
query_posts($args);
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ),'single-post-thumbnail' );
while (have_posts()) : the_post();
echo $image[0];
$output = $output . '<div class="single-casestudy" style="background-image: url(' . $image[0] .'); background-size: 100%;">';
$output = $output . '<div class="case-study-content">';
$output = $output . '<h4>' . get_the_title() . '</h4>';
$output = $output . '<p>' . excerpt(22) . '</p>';
$output = $output . '</div>';
$output = $output . '</div>';
endwhile ;
$output = $output . '</div>';
return $output;
}
add_shortcode('otherinfo', 'otherinfo_function');
If anyone could help that would super great!
Sam

how to echo/display the custom field value of a specific custom field name?

I have tried this code:
<?php
query_posts(array(
'meta_key' => 'custom_cat',
'meta_value' => 'creative',
'post_type' => 'page'
));
echo '<ul id="creative_services" class="clearfix row">';
if ( have_posts() ) while ( have_posts() ) : the_post();
echo '<li class="col-md-3">';
echo '<a class="popover-dismiss" data-toggle="popover" title="';
echo $post->post_title;
echo '" data-placement="bottom" data-content="';
echo $post->post_content;
echo '"><i class="';
get_post_meta( get_the_ID(), 'fa_icon' );
echo '"></i></a>';
echo '<h3>';
the_title();
echo '</h3>';
endwhile;
echo '</ul>';
wp_reset_query(); ?>
to display the custom field value as a class name, but the value is not displaying. Please help me find the problem or solution to display the custom field value as class name. I'm having hard time to debug this codes because i'm not a programmer, i'm a designer, still in the process of exploring wordpress.
Try adding echo before get_post_meta( get_the_ID(), 'fa_icon' );
so it would be:
<?php
query_posts(array(
'meta_key' => 'custom_cat',
'meta_value' => 'creative',
'post_type' => 'page'
));
echo '<ul id="creative_services" class="clearfix row">';
if ( have_posts() ) while ( have_posts() ) : the_post();
echo '<li class="col-md-3">';
echo '<a class="popover-dismiss" data-toggle="popover" title="';
echo $post->post_title;
echo '" data-placement="bottom" data-content="';
echo $post->post_content;
echo '"><i class="';
echo get_post_meta( get_the_ID(), 'fa_icon' );
echo '"></i></a>';
echo '<h3>';
the_title();
echo '</h3>';
endwhile;
echo '</ul>';
wp_reset_query(); ?>

Categories