I need an image to be appeared next to Add to Cart button in WooCommerce product page, using Advanced Custom Fields plugin. In order to displaying values, as I know, the_field function must be added to some page template. In Which template file and where should I place the the_field function?
It depends on what type of "add to cart" you are using (simple product, variable, etc).
Regardless, each are in this directory (for single-product): templates/single-product/add-to-cart.
You should (for best results) use the image array for your ACF content.
You would write this (changing the get_field('image') to get_field('your_field_name'):
<?php
$image = get_field('image'); // assigns the image field to the variable of $image
if( !empty($image) ): ?> <!--if the $image variable isn't empty, display the following:-->
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /> <!--displays the URL for the image variable and also the alt tag which is entered in the WordPress media library-->
<?php endif; ?> <!--ends the if statement -->
If you wanted a basic display, you could use image URL and do this:
<?php if( get_field('image') ): ?> <!--only shows the image field if it exists (an image was uploaded through ACF)-->
<img src="<?php the_field('image'); ?>" /> <!--displays the URL of the image if it is not an array/ID set in ACF field parameters, but a URL -->
<?php endif; ?> <!-- end the IF statement -->
I prefer using the alt tag when at all possible.
Related
I created a pop-up lightbox gallery in WordPress using Advanced Custom Fields and while all of the base functionality works, for some reason the lightbox appears to be showing all photos attached to the gallery_photos field across multiple posts instead of just the photos attached to the single post.
<?php
$images = get_field('gallery_photos');
if($images): ?>
<div class="gallery" id="post-gallery-<?php echo get_the_ID(); ?>">
<?php $i=0; foreach( $images as $image ) : ?>
<a href="<?php echo $image['url']; ?>" target="_blank" rel="lightbox" class="thumbnail">
<?php if( $i==0 ) : ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/camera-icon.png" width="30px" height="30px" alt="" border="0"/>
<?php endif; ?>
</a>
<?php $i++; endforeach; ?>
</div>
<?php endif; ?>
You can see a sample of how this is working at the following link to the dev site. There's a list of products, defined as a custom post type, and each product has an associated lightbox gallery of photos accessible via the camera icon at the end of each row.
However, if you click the icon you'll actually see photos for all products, not just the one you clicked. Any idea what I'm doing wrong?
my theme is showing the alt text for the main header image as alt="". Even though I have added this in the media library etc.
I have found the PHP code in the header.PHP file as below. What do I need to change to manually put the alt text in?
<img class="logo" src="<?php echo esc_url(($site_logo)); ?>" alt="<?php bloginfo('sitename'); ?>" />
Thanks
You can't use sitename in <?php bloginfo('sitename'); ?> for example you can use <?php bloginfo( 'name' ); ?>
Below values what you can use.
https://developer.wordpress.org/reference/functions/bloginfo/#possible-values-for-show
Our web site is using the theme's slider.php on our front page. I'd like for the images displayed in that slider to use the alt text that is in the post meta (edited in the WP media library).
I've attempted to create a variable ($alt), and have that variable echoed when the img is called, but is coming up empty. Here's the relevant portion of slider.php:
$alt = get_post_meta($post->ID, '_wp_attachment_image_alt', true);
<img src="<?php echo $thumbnail[0]; ?>" alt="<?php echo $alt[0]; ?>" />
</a>
<?php else: ?>
`
Any idea what I'm doing wrong?
You have set the third argument as true which means the function get_post_meta returns a string;
http://codex.wordpress.org/Function_Reference/get_post_meta
Therefore the following should work instead;
<img src="<?php echo $thumbnail[0]; ?>" alt="<?php echo $alt; ?>" />
Okay - so I've figured this out. The code above is trying to get the post meta from the thumbnail of the image - and, to my knowledge, the thumbnail image doesn't have meta data.
I've just created a custom field, and now the slider loop call thats field.
I have a Image Gallery in NextGen and i want to show it on a page but problem is whenever i am loading image gallery with custom template it isn't loading here how is what i did, first i have a page homepage.php and at some place i added this code to show the gallery:
<?php
$NextG = new NextGEN_Shortcodes;
echo $NextG->show_gallery( array("id"=>1,"images"=>5,"template"=>"myshow") );
?>
my template file myshow.php contains this :
<ul id="slideshow">
<!-- Thumbnails -->
<?php foreach ( $images as $image ) : ?>
<li>
<?php if ( !$image->hidden ) { ?>
<img src="<?php echo $image->imageURL ?>" alt="<?php echo $image->alttext ?>" />
<?php } ?>
</li>
<?php endforeach; ?>
</ul>
Now Template file named myshow.php is located in wordpress\wp-content\themes\nggallery
and when i run the page it returns the images but it used default template what is wrong am i putting the wrong name??? am i putting the Template in wrong directory?? or is there something else ?
Ok i got the answer i only have to put right name prefix for my file "gallery-<mytemplatename>" so in above case it will be gallery-myshow.php
You can see here what i am doing:
http://www.arvag.net/otkrijte-svet/leto/
So its pulling 2 custom fields from child pages, one of them is just url for the image on the left, and the other field is that text showing on the right.
Now, what i want to do is to add pagination there. The code i have now will just simply show all child pages, but i want to show only 5 child pages, so if user want to see 6th child page he would have to click on link for "Page 2" and so on.
The code im using to display these child pages is this:
<?php
$pages = get_pages('child_of='.$post->ID.'&sort_column=post_title&sort_order=desc');
$count = 0;
foreach($pages as $page)
{
$short_info = get_post_meta($page->ID,'info',true);
$image = get_post_meta($page->ID,'slika',true);
$count++;
?>
<div class='preview_slika left'><img src="<?php echo $image ?>" alt="<?php echo $page->post_title ?>" /></div>
<div class='preview_info right'>
<h2><?php echo $page->post_title ?></h2>
<p><?php echo $short_info ?></p>
Više o >>
</div>
<div class='clear'></div>
<?php
}
?>
So any idea what to do to get what i need?
Take a look at wp-PageNavi plugin. And this blog post if you want to integrate it in your theme an not have another plugin to manage.
Some guy posted some sample code on wordpress forums which works much better for me than this plugin.
http://wordpress.org/support/topic/383773