I have an ACF gallery named documentation and also have set up a radio button custom field named image_size on the media attachments, so I can select from various image formats.
I would like to echo the selected image_size so I can use it as a class, however I cannot get it to show up.
Below is what I have put together based on the documentation, could someone please help point out where I am going wrong?
Thanks!
<?php
$images = get_field('documentation', $post->ID);
if( $images ): ?>
<?php
$documentation_class = get_field('image_size', $images['id']);
?>
<figure class="<?php echo $documentation_class; ?>">
<img src="<?php echo $images[0]["sizes"]["large"]; ?>" />
</figure>
<?php endif; ?>
Related
I am trying to make a load more button that will load more images from my ACF Gallery using AJAX. But to do this I need to be able to use wp_query so that I can set the amount of posts per page. So is it possible to convert the following code into a wp_query?
<?php
$images = get_field('images');
if( $images ): ?>
<?php foreach( $images as $image ): ?>
<div class="col-4 p-0">
<a href="<?php echo $image['url']; ?>">
<img src="<?php echo $image['sizes']['gallery_size']; ?>" alt="<?php echo $image['alt']; ?>" />
</a>
</div>
<?php endforeach; ?>
<?php endif; ?>
Have you looked at: https://www.advancedcustomfields.com/resources/query-posts-custom-fields/
Basically you can query ACF by a meta_query using WP_Query and use WordPress's paginate_links() method to load more with your AJAX.
Hope that helps.
I'm trying to set my page so that when a user clicks the thumbnail of the current post, it expands in a Fancybox popup.
<?php
$featured_img_url = get_the_post_thumbnail_url($post->ID);
?>
<?php if ( has_post_thumbnail() ) { ?>
<div class="featured-image" data-fancybox="gallery" href="<?php $featured_img_url ?>"
<?php the_post_thumbnail(); ?>
</div>
<?php } ?>
This works, in that the image opens as expected when it's clicked. But when I click off the overlay, the thumbnail has disappeared. display: none has been added to it inline.
I have also tried wrapping the div in an <a> tag and using that, but this has the same outcome.
<?php
$featured_img_url = get_the_post_thumbnail_url($post->ID);
?>
<?php if ( has_post_thumbnail() ) { ?>
<a href="<?php $featured_img_url ?>" class="fancybox" data-fancybox="gallery">
<div class="featured-image bShadow">
<?php the_post_thumbnail(); ?>
</div>
</a>
<?php } ?>
I have other images on the page assigned with Advanced Custom Fields that work fine with Fancybox, so I'm assuming the issue is with how I'm trying to get the thumbnail image using php.
Edit: Here's a video of the current outcome: https://www.useloom.com/share/f525f4f0e4c642c8800e82532a99e326
It looks like you have not correct url for your featured link and it is treated as "inline" content instead of "image".
Anyway, you could follow this demo - https://codepen.io/fancyapps/pen/VGoRqO?editors=1010 - and use "trigger element" feature by adding data-fancybox-trigger attribute for featured link.
I'm attempting to add a background video to a wordpress website in place of the large image that is currently there.
I understand how to set up the video with HTML5 and CSS, but am not very familiar with php and am kind of lost on where to begin when it comes to writing a function to pull the video/s (wmp and mp4) from the media library and display them.
Any guidance on how to go about this would be much appreciated. Thanks!
I know that this is the part of the code that needs to be modified:
<div class="intro-block">
<?php if ( has_post_thumbnail() ):?>
<?php the_post_thumbnail('full'); ?>
<?php else: ?>
<?php
$image = get_field('global_intro_image', 'option');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" >
<?php endif; ?>
<?php endif; ?>
<div class="text-holder">
<div class="container">
<?php if( $title = get_field( 'title' )) : ?>
<h1><?php echo $title; ?></h1>
<?php endif; ?>
<?php if( $find_btn_link = get_field( 'find_btn_link' )) : ?>
<?php echo get_field( 'find_btn_text' ); ?>
<?php endif; ?>
</div>
</div>
</div>
It currently pulls the featured image for the page and displays it.
Any suggestions on where to begin?
Thanks in advance!
First you need to find out which part is calling the image. Looks like this part:
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" >
<?php endif; ?>
Then comment out this part or just remove this part of the code and replace if with video tag and style it so it looks just as you need.
Then if you need to be able to indicate videos from wordpress back end, than you need to create options page / or only add fields if you have theme options page.
https://codex.wordpress.org/Creating_Options_Pages
Even easier is to create options pages with ACF pro
i am having a blog page in my website... There are different posts ... on left side blog image is displayed , on right side text is written..when i click on particular blog, the main page of that post appears with image on the top and text down the image.
The issue is that on my blog page the left side images are not displayed rather default image is displayed.. bt when i click on post.. the main page of that particular post is having image...
<div class="blog-img mainimg" style="">
<?php $blogmainimg = wp_get_attachment_image_src(get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );?>
<?php if($blogmainimg[0] == '') : ?>
<img src="<?php bloginfo('template_url')?>/images/Noimg.png" />
<?php else : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
</div>
only "if" is working.... else is not working
on blog page, all the posts are having NOIMG.png.. which is wrong
???
Let's try a more simplified solution. This uses the has_post_thumbnail() to check if a featured image is specified, since you really do not need to utilize the wp_get_attachment_image_src() in the provided code.
<div class="blog-img mainimg" style="">
<?php if(has_post_thumbnail($post->ID)) : ?>
<?php the_post_thumbnail(); ?>
<?php else : ?>
<img src="<?php bloginfo('template_url')?>/images/Noimg.png" />
<?php endif; ?>
</div>
This uses has_post_thumbnail() to see if the post has one specified, if it does, it will display it uses the_post_thumbnail(). If not, it will revert to the default.
If this doesn't work, than it could be an issue of using the_post_thumbnail(), this would mostly depend on your loop that's displaying the blog posts. If that is the case, try this:
<div class="blog-img mainimg" style="">
<?php if(has_post_thumbnail($post->ID)) : ?>
<?php echo get_the_post_thumbnail( $post->ID, 'single-post-thumbnail' ); ?>
<?php else : ?>
<img src="<?php bloginfo('template_url')?>/images/Noimg.png" />
<?php endif; ?>
</div>
If this still does not solve the issue, please post the loop for your page as well, and I can further troubleshoot it.
i am trying so long to making one normaly gallery useing by Nextgen gallery. but i can't make it yet. i found some way to show gallery thumbnail for speciy gallery and show album name but can't make that dynamicly and show together. bellow some code may be help
for show custom template file.
<?php
/*
Template Name: Gallery
*/
get_header(); ?>
<?php
$NextG = new NextGEN_Shortcodes;
echo $NextG->show_gallery( array("id"=>2,"template"=>"myshow") );
?>
<?php the_post_thumbnail(); ?>
<?php
if ( have_posts() ) while ( have_posts() )
{
the_post();
the_content();
}
?>
<?php get_footer(); ?>
for make custom nextgen gallery file
gallery-mytemplate.php
<ul id="slideshow">
<!-- Thumbnails -->
<?php foreach ( $images as $image ) : ?>
<li>
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
<?php if ( !$image->hidden ) { ?>
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
<?php } ?>
</a>
</li>
<?php endforeach; ?>
</ul>
what i want ?
actuly i want my gallery page will have all gallery name top always and if i click any gallery name then show that gallery. see http://www.evokephotoandvideo.com/2013-photo-gallery/ this url something like that. if can be possible also ajax load like ref. line then would be more nicer...
Simplest way for retrieving data from NextGen is to use NextGEN Gallery Database Class stored in ngg-db.php file. Open that file and there are all functions and explanations for taking the data directly from the database.
Example:
$NextG = new nggdb();
// get all galleries
$NextG->find_all_galleries();
// get single gallery
$NextG->get_gallery( 2 );
Results are arrays, to examine them use print_r or print_r2:
function print_r2($val){
echo '<pre>';
print_r($val);
echo '</pre>';
}
That way you can take id or slug from all galleries and create custom url's like http://www.evokephotoandvideo.com/gallery/slug.
Additional info:
WP Rewrite