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);
Related
I am using the following code to output an image tied to a Wordpress post:
if ( $cover ) :
return sprintf(
'<img src="%1$s">',
$cover
);
endif;
This does output the required image but I need it to be clickable to display the image in full using:
<a href="<?php echo esc_url( $cover( 'medium_large' ) ) ?>">
Please can somebody advise how I can bring the two together?
Thanks.
So, I don't know what your code does, or how are the variables defined, but this will generate the output you want:
function cover($cover = '') {
if ( '' !== $cover ) :
return sprintf(
'<img src="%1$s">',
$cover
);
endif;
}
echo cover('/path/to/my/image.png');
The above will output the following code:
<a href="/path/to/my/image.png">
<img src="/path/to/my/image.png">
</a>
Keep in mind, that I do suppose you already know how to get the post cover image URL, and that's why I have make the function to accept the cover image URL only.
Update #1
If you want to display different sizes images when you click the link you could do the following:
function cover($cover_link = '', $cover_img = '') {
if ( '' !== $cover ) :
return sprintf(
'<img src="%2$s">',
$cover_link,
$cover_img
);
endif;
}
And then use the function cover inside the WordPress loop as following:
if ( have_posts() ) {
while( have_posts() ) {
the_post();
// ... HTML or PHP Code you need for your loop
$cover_link = get_the_post_thumbnail_url(get_the_ID(), 'full');
$cover_img = get_the_post_thumbnail_url(get_the_ID(), 'post-thumbnail');
if ( $cover_link && $cover_img ) {
echo cover($cover_link, $cover_img);
}
// ... HTML or PHP Code you need for your loop
}
}
Update #2
In the above example, I've used the image sizes full and post-thumbnail. In case you need to have custom sizes for your uploaded images you could use in the functions.php code like the following:
add_image_size( 'my_big_image_size', 1000, 1000, true);
add_image_size( 'my_small_image_size', 500, 500, true);
And then, inside the loop, you could change the following code:
$cover_link = get_the_post_thumbnail_url(get_the_ID(), 'full');
$cover_img = get_the_post_thumbnail_url(get_the_ID(), 'post-thumbnail');
To this:
$cover_link = get_the_post_thumbnail_url(get_the_ID(), 'my_big_image_size');
$cover_img = get_the_post_thumbnail_url(get_the_ID(), 'my_small_image_size');
I am having a bit of trouble getting my shortcode to place my html of a function in the correct place on wordpress. After some research I have found that when using shortcodes you cannot have echo used in the function. I have been doing my best to write the function without any echo's but cant seem to get it to work. I have little actual experience with PHP as a language and am giving this my best shot.
The top code block is the functioning code with echo used throughout, and the second is the rewritten code without any echo but is not functioning. Anyone have an idea where my rewrite is going wrong? Or possibly have a better work around then rewriting the function?
First:
function na_get_gallery_image_urls( $post_id ) {
$post = get_post($post_id);
// Make sure the post has a gallery in it
if( ! has_shortcode( $post->post_content, 'gallery' ) )
return;
//initiate counter to be able to keep track of images
$count_img = 0;
// Retrieve all galleries of this post
$gallery = get_post_gallery_images( $post );
// Loop through each image in first gallery
foreach( $gallery as $image ) {
// Below here are the main containers and first large image; stuff we will only want to output one time.
if($count_img == 0) { ?>
<!-- Whole Gallery container (inludes thumbnails) -->
<div id="instant-gallery">
<!-- Main Display Area -->
<div id="ig-main">
<!-- Set the parameters for the image we are about to display. -->
<?php
$default_attr = "ig-hero";
?>
<!-- Display the first image attachment as the large image in the main gallery area -->
<img src="<?php print $image; ?>" id="<?php print $default_attr; ?>">
<a href="<?php print $image; ?>" download>Download</a>
<!-- Close the main display area -->
</div>
<!-- Open the Thumbnail navigation -->
<ul id="ig-thumbs">
<!-- End the block of stuff that we only do for the first image -->
<?php } ?>
<!-- Now, for each of the thumbnail images, label the LI with an ID of the appropriate thumbnail number -->
<li id="ig-thumb-<?php print $count_img+1; ?>">
<?php if ($count_img==0) {
// If this is the first thumbnail, add a class of 'selected' to it so it will be highlighted
$thumb_attr = "thumb selected";
} else {
// For all other thumbnails, just add the basic class of 'thumb'
$thumb_attr = "thumb";
} ?>
<!-- Output a thumbnail-sized version of the image that has the attributes defined above -->
<img src="<?php print $image; ?>" class="<?php print $thumb_attr; ?>">
</li>
<!-- Increment the counter so we can keep track of which thumbnail we are on -->
<?php $count_img = $count_img + 1; } ?>
<!-- Close the thumbnail navigation list -->
</ul>
<!-- Close the entire Gallery -->
</div>
<?php
}
function instant_gallery() {
global $post;
$args = array(
'post_parent' => '$post->ID', // For the current post
'post_type' => 'attachment', // Get all post attachments
'post_mime_type' => 'image', // Only grab images
'order' => 'ASC', // List in ascending order
'orderby' => 'menu_order', // List them in their menu order
'numberposts' => -1, // Show all attachments
'post_status' => null, // For any post status
);
// Retrieve the items that match our query; in this case, images attached to the current post.
na_get_gallery_image_urls($args[0]);
}
// Create the Shortcode
add_shortcode('instant_gallery', 'instant_gallery');
?>
last:
function na_get_gallery_image_urls( $post_id ) {
$post = get_post($post_id);
// Make sure the post has a gallery in it
if( ! has_shortcode( $post->post_content, 'gallery' ) )
return;
// initiate counter to be able to keep track of images
$count_img = 0;
// Retrieve all galleries of this post
$gallery = get_post_gallery_images( $post );
// Loop through each image in first gallery
foreach( $gallery as $image ) {
// Below here are the main containers and first large image; stuff we will only want to output one time.
if($count_img == 0) {
//<!-- Whole Gallery container (inludes thumbnails) -->
$hero_img = '<div id="instant-gallery">';
//<!-- Main Display Area -->
$hero_img .= '<div id="ig-main">';
//<!-- Set the parameters for the image we are about to display. -->
$default_attr = "ig-hero";
//<!-- Display the first image attachment as the large image in the main gallery area -->
$hero_img .= '<img src="' . $image . '" id="' . $default_attr . '">';
$hero_img .= '<a href="' . $image . '" download>Download</a>';
//close main display area
$hero_img .= '</div>';
//<!-- Open the Thumbnail navigation -->
$hero_img .= '<ul id="ig-thumbs">';
//<!-- End the block of stuff that we only do for the first image -->
}
//<!-- Now, for each of the thumbnail images, label the LI with an ID of the appropriate thumbnail number -->
$thumbs = '<li id="ig-thumb-' . ($count_img + 1) . '">';
if ($count_img==0) {
// If this is the first thumbnail, add a class of 'selected' to it so it will be highlighted
$thumb_attr = "thumb selected";
} else {
// For all other thumbnails, just add the basic class of 'thumb'
$thumb_attr = "thumb";
}
//<!-- Output a thumbnail-sized version of the image that has the attributes defined above -->
$thumbs .= '<img src="' . $image . '" class="' . $thumb_attr . '">' . '</li>';
//<!-- Increment the counter so we can keep track of which thumbnail we are on -->
$count_img = $count_img + 1;
}
//<!-- Close the thumbnail navigation list -->
$fin = '</ul>';
// <!-- Close the entire Gallery -->
$fin .= '</div>';
$content = "$hero_img" . "$thumbs" . "$fin";
return $content;
}
function instant_gallery() {
global $post;
$args = array(
'post_parent' => '$post->ID', // For the current post
'post_type' => 'attachment', // Get all post attachments
'post_mime_type' => 'image', // Only grab images
'order' => 'ASC', // List in ascending order
'orderby' => 'menu_order', // List them in their menu order
'numberposts' => -1, // Show all attachments
'post_status' => null, // For any post status
);
// Retrieve the items that match our query; in this case, images attached to the current post.
na_get_gallery_image_urls($post->ID);
}
// Create the Shortcode
add_shortcode('instant_gallery', 'instant_gallery');
?>
Hi Try below code with changing your parameters it will works.
function testgallery_shortcode( $atts , $content = null ) {
extract( shortcode_atts(
array(
'title' =>'TEST GALLERY',
'items' =>3,
), $atts )
);
$args = array(
'post_type' => 'testgallery',
'posts_per_page' => $items,
'post_status' => 'publish',
);
$test_gallery = new WP_Query( $args );
$html = '';
global $post;
if ( $test_gallery->have_posts() ) :while ( $test_gallery->have_posts() ) : $test_gallery->the_post();
$html.='<div class="col-sm-4 col-xs-12">';
$html.='<figure class="post">';
$html.='<div class="image-wrap">';
$html.='<a class="zoomtoplay" alt="gallery_image" href="'. esc_url( get_permalink() ).'"></a>';
if (has_post_thumbnail() ) {
$imgarray = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID),'full');
$imgURL = $imgarray[0];
$html.='<img src="'.$imgURL.'" class="img-responsive"/>';
}
$html.='</div><h3>'.get_the_title().'</h3>';
$html.='</figure>';
$html.='</div>';
endwhile;
endif;
wp_reset_query();
return $html;
}
add_shortcode( 'testgallery', 'testgallery_shortcode' );
-- Now you can use a [testgallery] shortcode in your post and page.
This is a standard way of creating shortcode.
Still if needed than For more details you can visit this link - https://www.sitepoint.com/custom-shortcodes-for-wordpress/
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.
I currently have a banner image on a site which is pulled in via the featured image. The code below that does this works:
if ( has_post_thumbnail() ) {
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );
$url = $thumb['0'];
I would like to change this to use a custom field instead via Advanced Custom Fields. I have made a custom field called banner_image with the type as image url. I cannot seem to get this working however. I have tried the following methods:
Method 1
$image = get_field('banner_image', $post->ID);
$url = $image['url'];
Method 2
$url = get_field('banner_image', $post->ID);
Method 3
$url = get_field('banner_image');
Full PHP Code:
<?php
// Must be inside a loop.
// This is the bit i cannot get working
if(is_post(991)){
global $wp_query;
$postid = $wp_query->post->ID;
$url = get_post_meta($postid, 'banner_image1', true);
//End the bit that doesn't work
} elseif ( has_post_thumbnail() ) {
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );
$url = $thumb['0'];
}
else {
$bg = array(
'http://domain.co.uk/wp-content/uploads/2014/07/image.jpg',
'http://domain.co.uk/wp-content/uploads/2014/07/image1.jpg',
'http://domain.co.uk/wp-content/uploads/2014/07/image2.jpg',
'http://domain.co.uk/wp-content/uploads/2014/07/image3.jpg',
'http://domain.co.uk/wp-content/uploads/2014/07/image4.jpg'
); // array of filenames
$i = rand(0, count($bg)-1); // generate random number size of the array
$url = "$bg[$i]"; // set variable equal to which random filename was chosen
}
?>
Does anyone have a method for doing this, I am just getting a blank page on that particular post. Other posts work fine so it isn't breaking the code after elseif?
If you are inside the loop, this works:
$image = get_field('banner_image');
<?php echo $image['url']; ?>
try this one
<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'customField', true);
?>
https://echohelp.wordpress.com/2014/04/28/custom-field-outside-the-loop/
You can use
get_field('banner_image', get_the_ID() );
or
get_field('banner_image', get_queried_object_id() );
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;
}