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') . ');">';
Related
I have a custom wordpress plugin that will register some shortcodes. I want to add a function to display a swiper.js slider using a shortcode, but I'm unable to achieve this scope. If I attach a gallery to a page or to a post, it will not be displayed, the array of get_post_gallery_images() returned inside my function class will be always empty. How I can fix this? How I can remove only the default wordpress gallery shortcode to use my own code with attached images?
My plugin method code
public function imgSlider( $attr, $content )
{
global $post;
$a = shortcode_atts(array(
'pagination' => null,
'buttons' => null,
'scrollbar' => null
), $attr);
$images = get_post_gallery_images( $post );
var_dump($images);
$slider = '';
if( $images ){
$slider = '<div class="swiper-container">';
$slider .= '<div class="swiper-wrapper">';
foreach( $images as $img ){
$slider .= '<img class="img-fluid w-100" src="'. $img .'">';
}
$slider .= '</div>';
if( $a['pagination'] === true ){
$slider .= '<div class="swiper-pagination"></div>';
}
if( $a['buttons'] === true ){
$slider .= '<div class="swiper-button-prev"></div>';
$slider .= '<div class="swiper-button-next"></div>';
}
$slider .= '</div>';
}
// This will return true
//var_dump(has_shortcode( $post->post_content, 'gallery' ));
return $slider;
}
This is the content of a test page I've created to debug my code and verify if custom shortcodes works
NB: I've noticed that an empty <p> tag and a <br> tag are added to the html when I use the shortcodes, is possible to remove them?
[bs-container type="container-fluid"]
[bs-col type="6" mobile="display"]Lorem ipsum demo shortcode[/bs-col]
[bs-col type="6" mobile="hide"]<img class="img-fluid w-100" src="https://localhost/wordpress/wp-content/uploads/2019/09/ig_testing_account_2.jpeg">[/bs-col]
[bs-col type="12" mobile="hide"]
[bs-slider pagination="true" buttons="true" scrollbar="false"][gallery link="none" size="large" ids="37,38,25"][/bs-slider]
[/bs-col]
[/bs-container]
[bs-parallax img="https://images.unsplash.com/photo-1569017436947-e1e377435a13?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixlib=rb-1.2.1&q=80&w=800" is_section="false" overlay="false"][/bs-parallax]
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 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;
}
I have this code to retrieve the image url for the images in a gallery and it works ok but i cannot figure out how i could get the caption for each image.
I tried searching all over but i cannot seem to put all the information out there together! Any suggestions on how i could retrieve the captions?
function show_related_gallery_image_urls( $content ) {
global $post;
// Only do this on singular items
if( ! is_singular() )
return $content;
// Make sure the post has a gallery in it
if( ! has_shortcode( $post->post_content, 'gallery' ) )
return $content;
// Retrieve all galleries of this post
$galleries = get_post_galleries_images( $post );
$image_list = <<<END
<div class="side_bar">
<div class="related">
<h3>Related Images</h3>
END;
// Loop through all galleries found
foreach( $galleries as $gallery ) {
// Loop through each image in each gallery
foreach( $gallery as $image ) {
$src = $image;
$image_list .= '<a href="' . $src . '" rel="' . get_the_title() . '">'
. '<img src="' . $src .'" />'
. '</a>';
}
}
$image_list .= '</div></div>';
// Append our image list to the content of our post
$content .= $image_list;
return $content;
}
add_filter( 'the_content', 'show_related_gallery_image_urls' );
I hope i explained myself well! Thanks!
This hasn't been tested by try it, I cleaned up some of your code a bit:
1) Combined the first 2 IF statements into 1
2) Used get_post_gallery() (Codex) which returns the src and the image ID. We use the image ID to return the caption, we can also get the description and more if we needed to.
3) Removed the containing Foreach Statement since both my method only returns 1 gallery, not multiple so no need to loop through.
function show_related_gallery_image_urls( $content ) {
global $post;
// Only do this on singular items
if( ! is_singular() || !has_shortcode( $post->post_content, 'gallery' ) )
return $content;
// Retrieve all galleries of this post
$galleries = get_post_gallery( $post, false );
$image_list = <<<END
<div class="side_bar">
<div class="related">
<h3>Related Images</h3>
END;
// Loop through each image in each gallery
$i = 0; // Iterator
foreach( $gallery['src'] as $src ) {
$caption = wp_get_attachment($gallery['id'][$i])['caption'];
$image_list .= '<a href="' . $src . '" rel="' . get_the_title() . '">'
. '<img src="' . $src .'" />'
. '<div class="caption">'
. $caption
. '</div>'
. '</a>';
$i++; // Incremenet Interator
}
$image_list .= '</div></div>';
// Append our image list to the content of our post
$content .= $image_list;
return $content;
}
add_filter( 'the_content', 'show_related_gallery_image_urls' );
function wp_get_attachment( $attachment_id ) {
$attachment = get_post( $attachment_id );
return array(
'alt' => get_post_meta( $attachment->ID, '_wp_attachment_image_alt', true ),
'caption' => $attachment->post_excerpt,
'description' => $attachment->post_content,
'href' => get_permalink( $attachment->ID ),
'src' => $attachment->guid,
'title' => $attachment->post_title
);
}
On a sidenote, there is a gallery filter function where you can change how the gallery is displayed post_gallery Filter, here's a question that kind of shows how to edit it. There's also a great WordPress Stack Exchange where that may be helpful in the future!
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.