I have a WordPress site with multiple posts. On the homepage I have setup a plugin (https://wordpress.org/plugins/column-posts/) so that three columns of the most recent posts are displayed. That works well and I'm able to style the columns in CSS. However, I want each post's featured image to be the background of that post's column? Any idea how I'd make this happen?
<ul>
';
}
// thumbnail
$thclear = '';
$bullet = '<li style="background:url(<?php'.$thumb.'?>);">';
$thumb = '';
if ( $args['thumb'] ) {
if ( has_post_thumbnail($post->ID) ) {
//$bullet = '';
$thclear = '<div style="clear:both;"></div>';
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), $args['tsize'], false, array('class'=>"alignthumb"));
}
}
$ppost .= $bullet .''.$title.'';
// excerpt
if ( $args['excerpt'] ) {
$ppost .= '<p>' .get_the_excerpt() .'</p>' .$thclear .'</li>';
}
else{
$ppost .= $thclear .'</li>';
}
if ($args['class'] == 'P' && $args['col_cnt'] == $args['col_post'])
$ppost .= '
</ul>
I figured I could plug a variable into li style like this:
<li style="background:url(<?php'.$thumb.'?>);">
However it's not echoing anything at all and no image src for sure. Any way to get it to echo $thumb as the background image or plug a background image somewhere in that code. Thanks!!
Thanks!
$image=wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<img class="whatever" src="<?php echo $image;?>" />
css
.whatever {
z-index: -1;
}
Related
I am trying to assign a custom field gallery image as a background image on a slick slide wrap.
foreach ($gallery_image_ids as $gallery_image_id ) {
$slides .= "<div class='slick-slide-wrap' >";
$slides .= wp_get_attachment_image( $gallery_image_id, 'large');
$slides .= "</div>";
}
I have been able to set it using an image tag. However, I'd like to be able to set it as a background image on the container above, but it keeps erroring when I have tried the following code below.
$test = wp_get_attachment_url( $gallery_image_id, 'large');
foreach ($gallery_image_ids as $gallery_image_id ) {
$slides .= "<div class='slick-slide-wrap' background-image: url(' .$test. ')>";
$slides .= wp_get_attachment_image( $gallery_image_id, 'large');
$slides .= "</div>";
}
The function wp_get_attachment_image you're using returns an HTML img element.
What you need is wp_get_attachment_image_url which returns the image URL: https://developer.wordpress.org/reference/functions/wp_get_attachment_image_url/
$slides .= '<div class="slick-slide-wrap" style="background-image: url(' . wp_get_attachment_image_url( $gallery_image_id, 'large') . ');">';
I have the following code in my wordpress theme, single-post page (the page where single posts are displayed).
<article id="post-<?php the_ID(); ?>"<?php post_class('col-md-12'); ?>>
<div class="container">
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
</header>
<?php
$thumb = get_post_thumbnail_id();
$img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
$image = aq_resize( $img_url, 1200, 720, true ); //resize & crop the image
?>
<?php if($image) : ?>
<img class="img-responsive singlepic" src="<?php echo $image ?>"/>
<?php endif; ?>
<?php if ( $post->post_type == 'data-design' && $post->post_status == 'publish' ) {
if ( $attachments ) {
foreach ( $attachments as $attachment ) {
$class = "post-attachment mime-" . sanitize_title( $attachment->post_mime_type );
$thumbimg = wp_get_attachment_link( $attachment->ID, 'thumbnail-size', true );
echo '<li class="' . $class . ' data-design-thumbnail">' . $thumbimg . '</li>';
}
}
}
?>
<div class="entry-content">
<?php the_content(); ?>
<?php
wp_link_pages( array(
'before' => '<div class="page-links">' . __( 'Pages:', 'web2feel' ),
'after' => '</div>',
) );
?>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
It puts the post-title then featured-image as a large image then posts the content, and then the rest.
I want to target the images in the content, and display them the same way as the featured-image is displayed.
*NOTE - changes to the 'if ( $attachments ) { ...' function doesn't change anything (nor does completely removing it) so I am not certain what that part does. the only code that affects the content is when it is called ( '')
Sometimes ago I used to following code to strip off all the images in my content area and then display them separately apart from the contents. This might help you.
In your functions.php file -
function stripe_images_from_content($content){
$images = array();
$subject = $content;
$subject = preg_replace('~<img [^\>]*\ />~', '', $subject);
$subject = preg_replace('~\[caption[^\]]*\][^\]]*\]~', '', $subject);
$image_urls = array();
$match_count = preg_match_all( '/<img.*src=["\']([^"\']*)["\'].*\/>/', $content, $image_urls );
if (is_numeric($match_count) && $match_count > 0) {
if( is_array($image_urls[1]) and count($image_urls[1]) > 0 ){
foreach( $image_urls[1] as $i ){
$featured_image_url = $i;
$image_id = get_attachment_id_from_src( $featured_image_url );
if (! is_numeric($image_id)) {
$match_count = preg_match( '/(.*)-\d+x\d+(\.(jpg|png|gif))/', $featured_image_url, $matches );
if (is_numeric($match_count) && $match_count > 0) {
$base_image_url = $matches[1] . $matches[2];
$images[] = get_attachment_id_from_src( $base_image_url );
}
}
else{
$images[] = $image_id;
}
}
}
}
$data = new stdClass();
$data->images = $images;
$data->content = $subject;
return $data;
}
What this function does is get all the images inserted in the content area of a post and strip them off. Then return the image(s) and the content without image.
in your single.php file-
$content = stripe_images_from_content(get_the_content());
Now you need to do two things. $content->images contains all the images inserted in the post content area. And $content->content holds the raw content images stripped off. First you need to use $content->images wisely where you want to display your images and second replace the the_content() function with echo wpautop($content->content);
Hope this might help you.
After scratching my head for almost 2 hours, I am unable to resolve the puzzle. Anyone who could help me , I will be highly thankful to him.
I have created a custom post type 'Properties' in wordpress. I am trying the following code to list the properties in a page. All of it is displaying fine except Images.
<?php
$conarg = array (
'post_type' => 'properties',
'order_by' => 'menu_order',
'order' => 'ASC'
);
$condo_query = new WP_Query( $conarg );
if ( $condo_query->have_posts() ) { ?>
<?php
while ( $condo_query->have_posts() ) {
$condo_query->the_post();
?>
<?php
$condo_images_max = 5;
$condo_items = array();
for($i=1; $i <= condo_images_max; $i++) {
//check if image exits
$img_attachment_id = get_field('gallery-image-'.$i);
if(!empty($img_attachment_id)) {
$condo_items[$i] = array(
'image' => wp_get_attachment_image_src($img_attachment_id, 'medium')
);
}
}
$condo_items_keys = array_keys($condo_items);
?>
<div class="box col-md-4 col-xs-12">
<div class="flexslider">
<ul class="slides">
<?php
for($i=0; $i < count($condo_items) ; $i++) {
$image = $condo_items[$condo_items_keys[$i]]['image'];
?>
<li>
<img src="<?php echo $image[0]; ?>" alt="Carousel Image" />
</li>
<?php
}
?>
</ul>
</div>
<?php echo '<h2 class="condo-title">' . get_the_title() . '</h2>';
echo'<ul class="condo-details">';
if(get_field('area_range')) {
echo '<li><span>SQ.FT RANGE:</span> ' . get_field('area_range') . '</li>';
}
if(get_field('room_view')) {
echo '<li><span>ROOM VIEW:</span> ' . get_field('room_view') . '</li>';
}
if(get_field('price_range')) {
echo '<li><span>PRICE RANGE:</span> ' . get_field('price_range') . '</li>';
}
?>
<a class="condo-btn" href="<?php the_permalink(); ?>"><?php _e('VIEW DETAILS'); ?></a>
<?php
echo'</ul></div>';
}
}
else {
echo'Sorry! No Condos are available at the moment!';
}
/* Restore original Post Data */
wp_reset_postdata();
?>
As I mentioned in my comment it's probably worth switching to the PRO version and using a repeater field.
In your question you're overcomplicating this by unnecessarily building an array and then looping through your array using for instead of foreach.
Remove the code to build an array and try this instead of your current output code:
<ul class="slides">
<?php // Set maximum number of images to check.
$condo_images_max = 5;
for ( $i = 1; $i <= $condo_images_max; $i++ ) {
// Get image ID.
$image_id = get_field( 'gallery-image-' . $i );
// Check if image ID was found.
if ( $image_id ) {
// Output medium image in an li tag.
echo '<li>' . wp_get_attachment_image( $image_id, 'medium' ) . </li>';
}
} ?>
</ul>
If you need to be able to control the output of the image element and display it in the way you show in your question you can use:
...
if ( $image_id ) {
// Get image source.
$image = wp_get_attachment_image_src( $image_id, 'medium' );
// Check image source was found.
if ( $image ) {
echo '<li><img src="' . $image[0] . '" alt="Carousel Image" /></li>';
}
}
...
There is one issue in doing it this way to be aware of (and one of the reasons I suggested a repeater).
Let's say you have 6 image fields and a property is using all 6. The admin then decides to delete the first image so now the property has 5 images. The code will still work because we're checking an image was found before trying to output it but instead of showing all 5 images you'll only see 4 of them. Image #1 is empty and we've told it to stop looking after image #5.
I am creating a Wordpress theme that displays all the pages as sections on one single page and the menu scrolls to each section. I want the user to be able to set a unique background for each page (this will be the featured image of a page). What I've found though is that when a user sets the image for one page, it becomes the background image for ALL pages.
How can I adapt my code so that the user can set a unique background image for each page? Below is my code to create all pages and display them on one page:
<?php $pages = get_pages(array('sort_column' => 'menu_order'));
foreach ($pages as $page_data) {
$content = apply_filters('the_content', $page_data->post_content);
$title = $page_data->post_title;
$slug = $page_data->post_name;
//get url of featured image
$thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail-size', true);
$thumb_url = $thumb_url_array[0];
//check if page has featured image
if ( has_post_thumbnail() ) {
$featured_image = $thumb_url;
}
else {
$featured_image = '';
}
echo "<section id='$slug' class='main fullscreen'>";
echo '<article class="main parallax" style="background:url(' . $featured_image . ') 50% 0 repeat fixed;">';
echo $content;
echo '</article>';
echo "</section>";
}
?>
Is it possible that the
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail-size', true);
line is adding the value to the next position in the array rather than replacing the [0] position? Perhaps changing that line to
$thumb_url_array[0] = wp_get_attachment_image_src($thumb_id, 'thumbnail-size', true);
would result in the correct value being assigned to $thumb_url and later $featured_image in the if statement.
You need to change
$thumb_id = get_post_thumbnail_id();
to
$thumb_id = get_post_thumbnail_id($pages_data->ID);
I have recently installed Dynamic Featured Image plugin for wordpress. But I do not know how to link images. I'm trying to create me a gallery like this http://www.subcreative.com.au/#work - Scroll down to the projects and you will see .
I have put this code in functions.php
<?php
while ( have_posts() ) : the_post();
if( function_exists('dfi_get_featured_images') ) {
$featuredImages = dfi_get_featured_images();
//Now, loop through the image to display
}
endwhile;
?>
and used this to link the image.
echo ' <a class="fancybox" href="'. dfi_get_featured_images() .'" style="text-align:center">Take a look</a> '; ?>
But when I try to open the image, it becomes "/array"
Im not a wordpress dev but I've seen this on the wordpress website that I tried to fix.
so maybe you can try this one.
if( class_exists('Dynamic_Featured_Image') ):
global $dynamic_featured_image;
global $post;
$featured_images = $dynamic_featured_image->get_featured_images( $post->ID );
if ( $featured_images ):
?>
<?php foreach( $featured_images as $images ): ?>
<img src="<?php echo $images['full'] ?>" alt="">
<?php endforeach; ?>
<?php
endif;
endif;
this works in my case. I'm using DFI 3.1.13
This answer is only valid for plugin version 2.0.2 and below.
You need to loop throught the returned array and display the image manually. Try this:
<?php
if( function_exists('dfi_get_featured_images') ) {
$featuredImages = dfi_get_featured_images();
//Loop through the image to display your image
if( !is_null($featuredImages) ){
$links = array();
foreach($featuredImages as $images){
$thumb = $images['thumb'];
$fullImage = $images['full'];
$links[] = "<a href='{$fullImage}' class='dfiImageLink'><img src='{$thumb}' /></a>";
}
echo "<div class='dfiImages'>";
foreach($links as $link){
echo $link;
}
echo "</div>";
}
}
?>
try this inside of have posts loop
$img=dfi_get_featured_images();
$url=$img['full'];
echo ' <a class="fancybox" href="'. $full .'" style="text-align:center">Take a look</a> ';
If full doesn't work try thumb also.