In a post template I'm using a little code to show the author's image/avatar instead of a featured image.
<?php if ( $logo = get_avatar( get_the_author_meta( 'user_email' ), 200 ) ) : echo $logo; ?>
all well.. the author's logo is there
But now, as I finishing the project, I would like to add 'og:image' metas in the
I hoped to use a variation of this code in the function.php, but that does not work at all.
Now I have this:
add_action('wp_head', 'add_meta_tags',2);
function add_meta_tags(){
global $post;
$author_id = get_post_field('post_author' , $post->ID);
$ogimg = get_avatar_url($author_id->ID, array("size"=>400 )) ;
if( is_single() ) {
echo '<meta property="og:image" content="'. $ogimg .'" />';
}
}
$author_id gives the ID of the author, but I don't get the avatar of the author.
Couldn't figure out how to use the get_avatar_url function, but found a workaround by extracting the src value from the couple img tag like this:
add_action('wp_head', 'add_meta_tags',1);
function add_meta_tags() {
global $post;
$author_id = get_post_field('post_author' , $post->ID);
$rawimg = get_avatar($author_id, 800) ;
$doc = new DOMDocument();
$doc->loadHTML($rawimg);
$imageTags = $doc->getElementsByTagName('img');
foreach($imageTags as $tag) {
$ogimg = $tag->getAttribute('src');
echo '<meta property="og:image" content="'.$ogimg .'" />';
echo '<meta name="twitter:image" content="'. $ogimg .'" />';
}
}
Related
I am using a custom archive-product.php file in my WooCommerce theme. I haven't changed much about the file, just added a few HTML elements for sidebars and such, but the main componants remain untouched.
In my template, I'm trying to get a list of categories with this code, in a sidebar (outside the loop):
$prodCats = get_categories(array('taxonomy'=>'product_cat','exclude'=>'26,482,474','parent'=>0));
if (!empty($prodCats)) {
//echo '<center><strong>Jump to Category</strong></center>';
echo '<ul>';
foreach ($prodCats as $cat) {
// get the thumbnail id using the queried category term_id
$thumbnail_id = get_term_meta( $cat->term_id, 'thumbnail_id', true );
// get the image URL
$image = wp_get_attachment_url( $thumbnail_id );
echo '<li>';
echo '';
echo '<div class="catName">'.$cat->name.'</div>';
echo '<img src="'.$image.'"/>';
echo '</li>';
}
echo '</ul>';
}
But, this outputs only the product categories that are part of the current WooCommerce loop. It will not get all the product categories. It seems to somehow be tied to the WC loop on that page instead of operating independantly.
Is this intended behavior on a custom post type archive or specifically on WooCommerce?
If not, what might I look for to solve this?
This code, which does a similar thing on a woocommerce Product Attribute (pa_brand) is also affected. Note that I'm using new WP_Term_Query here to see if that solves it, but it still only pulls the terms that are in the current WC loop.
//Get brand list and display it
function ppp_get_brand_list() {
?>
<div id="brandList">
<center><h4>Brands</h4></center>
<?php
$brandArgs = array(
'taxonomy' => 'pa_brand',
'hide_empty' => true,
);
$brands = new WP_Term_Query( $brandArgs );
echo '<ul>';
foreach ( $brands->terms as $brand ) {
$brand_image_id = get_term_meta( $brand->term_id, 'product_search_image_id', true );
$brand_image = wp_get_attachment_url( $brand_image_id );
$brand_link = get_term_link($brand->term_id,'pa_brand');
echo '<li><img src="'.$brand_image.'" alt="" /></li>';
}
echo '</ul>';
?>
</div>
<?php
}
I would like to display a brand logo on my product pages. I use Advanced Custom Fields (ACF) to insert the image on the taxonomy "Brand".
https://snipboard.io/JcYvM4.jpg
I have tried the code below, and tried to do as on the page here, but it doens't work...
https://www.advancedcustomfields.com/resources/adding-fields-taxonomy-term/
*The image return format is "Array".
function action_woocommerce_before_variations_form( ) {
$queried_object = get_queried_object();
$taxonomy = $queried_object->taxonomy;
$term_id = $queried_object->term_id;
$image = get_field('brand_logo', $taxonomy . '_' . $term_id);
echo '<img src="'.$image['url'].'" />';
};
// add the action
add_action( 'woocommerce_before_variations_form', 'action_woocommerce_before_variations_form', 10, 0 );
You can try like this:
<?php
$category_icon = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
$category-logo = wp_get_attachment_url( $category_icon );
?>
The woocommerce_before_variations_form is call on product page.
So if when you call get_queried_object() WordPress will return Product Object, not brand term.
So
Get brand(s) with your product id with get_the_terms function
Iterate on your brands and get image with get_field function
(optional) get brand link
Display your image
<?php
function prefix_add_brand_before_variations_form() {
// First get brand(s) with your product id.
$brands = get_the_terms(get_the_id(), 'brand');
// get_the_terms return false or an array, so
if(!$brands) {
return;
}
foreach ($brands as $brand) {
$image = get_field('brand_logo', $brand);
$brand_url = get_term_link($brand);
if (is_array($image)) : ?>
<a href="<?php echo $brand_url ?>">
<img src="<?php echo $image['url']; ?>" />
</a>
<?php
endif;
}
}
add_action('woocommerce_before_variations_form', 'prefix_add_brand_before_variations_form', 10, 0);
I'm using
if ( has_post_thumbnail() ){}
to check if the post have thumbnail image,
but this
echo get_attached_media('image', $post->ID);
display the word
Array
I need to show the attached image
If you are trying to get just one image in the post and use it as a thumbail, you might want to try this one:
Add this to you're functions.php :
// Get URL of first image in a post
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
// no image found display default image instead
if(empty($first_img)){
$first_img = "/images/default.jpg";
}
return $first_img;
}
To call it just put
<?php echo catch_that_image() ?>
in your template file within the loop.
I found this brilliant code from this forum thread. Saved me a lot of times.
I found this, and it WORKS
<?php
if( has_post_thumbnail() )
{
// check if the post has a Post Thumbnail
echo ' <a href="';
the_permalink();
echo '" title="';
the_title_attribute();
echo '">';
the_post_thumbnail( 'medium' );
echo '</a>';
}
else
{
$imgs = get_attached_media( 'image' );
if( count( $imgs ) > 0 )
{
$img = array_shift( $imgs );
echo wp_get_attachment_image( $img->ID, 'thumbnail' );
}
}
?>
And all thanks and credit for #birgire on WPSE
You need to use get_attached_media( 'image', $post->ID );
Using
echo get_attached_media( 'image' );
should work.
Im trying to get the following information on a woocommerce single product page in order to replace the default price style of woocommerce.
When Item is on sale, I want to be able to get the original price and discounted price and echo it inside a dive for further styling. Im trying to achive something like this.
<div id="orig-price">Original Price: <?php echo $price; ?></div>
<div id="sale-price">Sale Price: <?php echo $sale-price; ?></div>
<div id="saved">You saved: <?php $saved=$price-$saleprice; echo $saved; ?></div>
I tried opening price.php but did not find what I am looking for. here is what I get.
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<p class="price"><?php echo $product->get_price_html(); ?></p>
<meta itemprop="price" content="<?php echo $product->get_price(); ?>" />
<meta itemprop="priceCurrency" content="<?php echo get_woocommerce_currency(); ?>" />
<link itemprop="availability" href="http://schema.org/<?php echo $product->is_in_stock() ? 'InStock' : 'OutOfStock'; ?>" />
<div><?php echo $sale_price_in_percent; ?></div>
</div>
Am I on the right place? Anyone know how can I access these attributes?
Thanks
Main function for displaying prices is get_price_html() in /woocommerce/includes/abstracts/abstract-wc-product.php file, and there are some filters to allow users to customize the html for prices:
woocommerce_sale_price_html
woocommerce_price_html
woocommerce_empty_price_html
woocommerce_free_sale_price_html
woocommerce_free_price_html
woocommerce_get_price_html
This function performs a complete job for showing prices including taxes and on sale calculations, and since you are completely rewriting the html the example below uses last filter there woocommerce_get_price_html. It extracts the prices from the original HTML and insert them into a new HTML structure.
add_filter( 'woocommerce_get_price_html', function( $price, $product )
{
global $woocommerce_loop;
// check if we are in single product page, in main section, and if product has price and is on sale
if ( is_product() && !isset( $woocommerce_loop ) && $product->get_price() && $product->is_on_sale() ) {
// collect prices from $price html string
$prices = array_map( function( $item ) {
return array( $item, (float) preg_replace( "/[^0-9.]/", "", html_entity_decode( $item, ENT_QUOTES, 'UTF-8' ) ) );
}, explode( ' ', strip_tags( $price ) ) );
$price = isset( $prices[0][0] ) ? '<span class="orig-price">Original Price: ' . $prices[0][0] . '</span>' : '';
$price .= isset( $prices[1][0] ) ? '<span class="sale-price">Sale Price: ' . $prices[1][0] . '</span>' : '';
if ( $product->get_regular_price() ) {
// set saved amount with currency symbol placed as defined in options
$price .= '<span class="saved">You saved: ' . sprintf( get_woocommerce_price_format(), get_woocommerce_currency_symbol(), $prices[0][1] - $prices[1][1] ) . '</span>';
}
}
return $price;
}, 10, 2 );
I'm using span tags here instead of divs used in question because the output is still wrapped in a paragraph. For further customization override the price.php template by placing him inside /themes/yourtheme/woocommerce/single-product/ folder.
This can be achieved by overriding woocommerce template. Create a new PHP file, write your div structure in that file.
Now refer this article on How to override template in WooCommerce
Hope this will move you in right direction
Have got this working on general wordpress categories using this plugin:
https://wordpress.org/plugins/categories-images/
Then adding the following to the category.php template as advised on another thread.
<?php if (function_exists('z_taxonomy_image_url')) { ?>
<img src="<?php echo z_taxonomy_image_url(); ?>" alt="<?php the_title(); ?>" />
<?php } ?>
I'd like to do exactly the same with the product categories. Actually ideally I'd like to be able to add background images to each category so that the description text can go over the top, like the way this shop works:
http://www.natures-own.co.uk/Antioxidants/
Is this possible with some minor code tweaking, or better still is there a woocommerce equivalent to the wordpress plugin I've used?
I cannot find any resources for this anywhere, everything I find on searching is referring to just thumbnail of a category list as far as I can see!
Thanks in advance
Pat
You can add the category image and description by adding the following to the archive-product.php file after <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?> that if statement:
if (is_product_category())
{
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
// get the image URL
$image = wp_get_attachment_url( $thumbnail_id );
//if you only want the image, uncomment the two lines below
//list($width, $height) = getimagesize($image);
//echo '<img src="'.$image.'" alt="" width="'.$width.'" height="'.$height.'"/>';
$cat_id=$cat->term_id;
$prod_term=get_term($cat_id,'product_cat');
$description=$prod_term->description;
echo '<div class="category-description" style="background-image:url('.$image.');">'.$description.'</div>';
}
To display Woocommerce Category image
use this code -
add_action('woocommerce_archive_description', 'woocommerce_add_category_image', 20);
function woocommerce_add_category_image()
{
global $product;
if (is_product_category())
{
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_woocommerce_term_meta($cat->term_id, 'thumbnail_id', true);
$image = wp_get_attachment_url($thumbnail_id);
if ($image)
{
echo '<img src="' . esc_url($image) . '" alt="" />';
}
}
}