I want to change the image version used by the FlexSlider on the WooCommerce product page.
At the moment the slider uses for its gallery navigation the thumbnail size.
But these image size is cropped and I need an uncropped version.
There is already a size in WooCommerce which I could use: woocommerce_gallery_thumbnail
Unfortunately I couldn't find any hook or option to change the used image.
What I found and use is the filter woocommerce_single_product_carousel_options.
At the moment I'm using only one option of it:
$options['controlNav'] = wp_is_mobile() ? true : 'thumbnails';
But I see no option to change the used image version.
Is there anythin I could use/hook?
OK, I tried to use the following filter:
(https://github.com/woocommerce/woocommerce/blob/df94b6570df6f6002f61c9e53c8054eb77c2c405/includes/wc-template-functions.php#L1499)
function wc_get_gallery_image_html( $attachment_id, $main_image = false ) {
$flexslider = (bool) apply_filters( 'woocommerce_single_product_flexslider_enabled', get_theme_support( 'wc-product-gallery-slider' ) );
$gallery_thumbnail = wc_get_image_size( 'gallery_thumbnail' );
$thumbnail_size = apply_filters( 'woocommerce_gallery_thumbnail_size', array( $gallery_thumbnail['width'], $gallery_thumbnail['height'] ) );
$image_size = apply_filters( 'woocommerce_gallery_image_size', $flexslider || $main_image ? 'woocommerce_single' : $thumbnail_size );
$full_size = apply_filters( 'woocommerce_gallery_full_size', apply_filters( 'woocommerce_product_thumbnails_large_size', 'full' ) );
$thumbnail_src = wp_get_attachment_image_src( $attachment_id, $thumbnail_size );
$full_src = wp_get_attachment_image_src( $attachment_id, $full_size );
$alt_text = trim( wp_strip_all_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) );
$image = wp_get_attachment_image(
$attachment_id,
$image_size,
false,
apply_filters(
'woocommerce_gallery_image_html_attachment_image_params',
array(
'title' => _wp_specialchars( get_post_field( 'post_title', $attachment_id ), ENT_QUOTES, 'UTF-8', true ),
'data-caption' => _wp_specialchars( get_post_field( 'post_excerpt', $attachment_id ), ENT_QUOTES, 'UTF-8', true ),
'data-src' => esc_url( $full_src[0] ),
'data-large_image' => esc_url( $full_src[0] ),
'data-large_image_width' => esc_attr( $full_src[1] ),
'data-large_image_height' => esc_attr( $full_src[2] ),
'class' => esc_attr( $main_image ? 'wp-post-image' : '' ),
),
$attachment_id,
$image_size,
$main_image
)
);
return '<div data-thumb="' . esc_url( $thumbnail_src[0] ) . '" data-thumb-alt="' . esc_attr( $alt_text ) . '" class="woocommerce-product-gallery__image">' . $image . '</div>';
}
There are options for the $gallery_thumbnail, $thumbnail_size and $thumbnail_src.
I don't know which one ist the correct one to change the output of the gallery navigation thumbnail.
I tried the following code but I'm not sure if that code is correct (it does nothing):
add_filter( 'woocommerce_gallery_thumbnail_size', function( $thumbnail_size ) {
return array(
'woocommerce_gallery_thumbnail',
);
} );
I've read in the docs, that there are only hooks for woocommerce_gallery_thumbnail_size, woocommerce_gallery_image_size and woocommerce_gallery_full_size and they accept name based image sizes, or an array of width/height values.
So I guess the correct one would be woocommerce_gallery_thumbnail_size?!
Or is the whole approach wrong?
Related
I used the answer from this question to create my custom product tabs:
Custom metabox content displayed in single product additional tabs on Woocommerce
Here's my code:
// Add a custom metabox
add_action( 'add_meta_boxes', 'additional_product_tabs_metabox' );
function additional_product_tabs_metabox()
{
add_meta_box(
'add_product_metabox_additional_tabs',
__( 'Additional product Tabs', 'woocommerce' ),
'additional_product_tabs_metabox_content',
'product',
'normal',
'high'
);
}
// Add custom metabox content
function additional_product_tabs_metabox_content( $post )
{
// Shipping
echo '<h4>' . __( 'Shipping', 'woocommerce' ) . '</h4>';
$value = get_post_meta( $post->ID, '_custom_shipping', true );
wp_editor( $value, '_custom_shipping', array( 'editor_height' => 100 ) );
// Color
echo '<br><hr><h4>' . __( 'Color', 'woocommerce' ) . '</h4>';
$value = get_post_meta( $post->ID, '_custom_color', true );
wp_editor( $value, '_custom_color', array( 'editor_height' => 100 ) );
// Material
echo '<br><hr><h4>' . __( 'Material', 'woocommerce' ) . '</h4>';
$value = get_post_meta( $post->ID, '_custom_material', true );
wp_editor( $value, '_custom_material', array( 'editor_height' => 100 ) );
// Size
echo '<br><hr><h4>' . __( 'Size', 'woocommerce' ) . '</h4>';
$value = get_post_meta( $post->ID, '_custom_size', true );
wp_editor( $value, '_custom_size', array( 'editor_height' => 100 ) );
// Nonce field (for security)
echo '<input type="hidden" name="additional_product_tabs_nonce" value="' . wp_create_nonce() . '">';
}
// Save product data
add_action( 'save_post_product', 'save_additional_product_tabs', 10, 1 );
function save_additional_product_tabs( $post_id ) {
// Security check
if ( ! isset( $_POST[ 'additional_product_tabs_nonce' ] ) ) {
return $post_id;
}
//Verify that the nonce is valid.
if ( ! wp_verify_nonce( $_POST[ 'additional_product_tabs_nonce' ] ) ) {
return $post_id;
}
// If this is an autosave, our form has not been submitted, so we don't want to do anything.
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
return $post_id;
}
if ( ! current_user_can( 'edit_product', $post_id ) ) {
return $post_id;
}
// Sanitize user input and save the post meta fields values.
if( isset($_POST[ '_custom_shipping' ]) )
update_post_meta( $post_id, '_custom_shipping', wp_kses_post($_POST[ '_custom_shipping' ]) );
if( isset($_POST[ '_custom_color' ]) )
update_post_meta( $post_id, '_custom_color', wp_kses_post($_POST[ '_custom_color' ]) );
if( isset($_POST[ '_custom_material' ]) )
update_post_meta( $post_id, '_custom_material', wp_kses_post($_POST[ '_custom_material' ]) );
if( isset($_POST[ '_custom_size' ]) )
update_post_meta( $post_id, '_custom_size', wp_kses_post($_POST[ '_custom_size' ]) );
}
add_filter( 'woocommerce_product_tabs', 'woo_custom_product_tabs' );
function woo_custom_product_tabs( $tabs ) {
// 1) Removing tabs
unset( $tabs['description'] ); // Remove the description tab
unset( $tabs['additional_information'] ); // Remove the additional information tab
// 2 Adding new tabs and set the right order
//Adds Shipping Tab
$tabs['custom_shipping_tab'] = array(
'title' => __( 'Shipping', 'woocommerce' ),
'priority' => 10,
'callback' => 'woo_custom_shipping_tab_content'
);
// Adds Color Tab
$tabs['custom_color_tab'] = array(
'title' => __( 'Color', 'woocommerce' ),
'priority' => 20,
'callback' => 'woo_custom_color_tab_content'
);
// Adds Material Tab
$tabs['custom_material_tab'] = array(
'title' => __( 'Material', 'woocommerce' ),
'priority' => 30,
'callback' => 'woo_custom_material_tab_content'
);
// Adds Size Tab
$tabs['custom_size_tab'] = array(
'title' => __( 'Size', 'woocommerce' ),
'priority' => 40,
'callback' => 'woo_custom_size_tab_content'
);
return $tabs;
}
function woo_custom_shipping_tab_content() {
global $product;
echo'<div><p>'. $product->get_meta( '_custom_shipping' ) . '</p></div>';
}
function woo_custom_color_tab_content() {
global $product;
echo'<div><p>'. $product->get_meta( '_custom_color' ) . '</p></div>';
}
function woo_custom_material_tab_content() {
global $product;
echo'<div><p>'. $product->get_meta( '_custom_material' ) . '</p></div>';
}
function woo_custom_size_tab_content() {
global $product;
echo'<div><p>'. $product->get_meta( '_custom_size' ) . '</p></div>';
}
Then I added custom code to create vertical tabs and added them after woocommerce_share hook.
/* Vertical Product Tabs */
add_action( 'woocommerce_share', 'woocommerce_output_product_data_tabs', 5 );
function woocommerce_output_product_data_tabs() {
$product_tabs = apply_filters( 'woocommerce_product_tabs', array() );
if ( empty( $product_tabs ) ) {
return;
}
foreach ( $product_tabs as $key => $product_tab ) {
echo '<div id="tab-' . esc_attr( $key ) . '">';
if ( isset( $product_tab[ 'callback' ] ) ) {
call_user_func( $product_tab[ 'callback' ], $key, $product_tab );
}
echo '</div>';
}
}
The result was as follows:
All the tabs have lost titles.
Now tabs are shown after woocommerce_share hook and in their old place. They are just copied.
Question:
How do I fix the code to show the tab titles?
How to fix the code so that the tabs are shown only after the woocommerce_share hook?
I would be glad to have your help!
First of all, I've slightly updated your existing code, to more recent version:
// You can use add_meta_boxes_{post_type} for best practice, so your hook will only run when editing a specific post type. This will only receive 1 parameter – $post
function action_add_meta_boxes_product( $post ) {
add_meta_box(
'add_product_metabox_additional_tabs',
__( 'Additional product Tabs', 'woocommerce' ),
'additional_product_tabs_metabox_content',
'product',
'normal',
'high'
);
}
add_action( 'add_meta_boxes_product', 'action_add_meta_boxes_product', 10, 1 );
// Add custom metabox content
function additional_product_tabs_metabox_content( $post ) {
// Shipping
echo '<h4>' . __( 'Shipping', 'woocommerce' ) . '</h4>';
$value = get_post_meta( $post->ID, '_custom_shipping', true );
wp_editor( $value, '_custom_shipping', array( 'editor_height' => 100 ) );
// Color
echo '<br><hr><h4>' . __( 'Color', 'woocommerce' ) . '</h4>';
$value = get_post_meta( $post->ID, '_custom_color', true );
wp_editor( $value, '_custom_color', array( 'editor_height' => 100 ) );
// Material
echo '<br><hr><h4>' . __( 'Material', 'woocommerce' ) . '</h4>';
$value = get_post_meta( $post->ID, '_custom_material', true );
wp_editor( $value, '_custom_material', array( 'editor_height' => 100 ) );
// Size
echo '<br><hr><h4>' . __( 'Size', 'woocommerce' ) . '</h4>';
$value = get_post_meta( $post->ID, '_custom_size', true );
wp_editor( $value, '_custom_size', array( 'editor_height' => 100 ) );
// Nonce field (for security)
echo '<input type="hidden" name="additional_product_tabs_nonce" value="' . wp_create_nonce() . '">';
}
// Save product data
function action_save_post_product( $post_id, $post, $update ) {
// Security check
if ( ! isset( $_POST[ 'additional_product_tabs_nonce' ] ) ) {
return $post_id;
}
// Verify that the nonce is valid.
if ( ! wp_verify_nonce( $_POST[ 'additional_product_tabs_nonce' ] ) ) {
return $post_id;
}
// If this is an autosave, our form has not been submitted, so we don't want to do anything
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
return $post_id;
}
if ( ! current_user_can( 'edit_product', $post_id ) ) {
return $post_id;
}
// Sanitize user input and save the post meta fields values
if ( isset( $_POST[ '_custom_shipping' ] ) )
update_post_meta( $post_id, '_custom_shipping', wp_kses_post( $_POST[ '_custom_shipping' ] ) );
if ( isset( $_POST[ '_custom_color' ] ) )
update_post_meta( $post_id, '_custom_color', wp_kses_post( $_POST[ '_custom_color' ] ) );
if ( isset( $_POST[ '_custom_material' ] ) )
update_post_meta( $post_id, '_custom_material', wp_kses_post( $_POST[ '_custom_material' ] ) );
if ( isset( $_POST[ '_custom_size' ] ) )
update_post_meta( $post_id, '_custom_size', wp_kses_post( $_POST[ '_custom_size' ] ) );
}
add_action( 'save_post_product', 'action_save_post_product', 10, 3 );
Then your biggest mistake is using $product_tabs = apply_filters( 'woocommerce_product_tabs', array() );. This is because not only your call is executed but also the default call of WooCommerce. That's why these are shown twice.
The solution is to simply add your custom tabs via an array that is separate from the default WooCommerce functionality.
So you get:
// Removing DEFAULT tabs
function filter_woocommerce_product_tabs( $tabs ) {
// Remove the description tab
unset( $tabs['description'] );
// Remove the additional information tab
unset( $tabs['additional_information'] );
return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'filter_woocommerce_product_tabs', 100, 1 );
function my_custom_tabs() {
// Initialize
$tabs = array();
// Adds Shipping Tab
$tabs['custom_shipping_tab'] = array(
'title' => __( 'Shipping', 'woocommerce' ),
'priority' => 10,
'callback' => 'woo_custom_shipping_tab_content'
);
// Adds Color Tab
$tabs['custom_color_tab'] = array(
'title' => __( 'Color', 'woocommerce' ),
'priority' => 20,
'callback' => 'woo_custom_color_tab_content'
);
// Adds Material Tab
$tabs['custom_material_tab'] = array(
'title' => __( 'Material', 'woocommerce' ),
'priority' => 30,
'callback' => 'woo_custom_material_tab_content'
);
// Adds Size Tab
$tabs['custom_size_tab'] = array(
'title' => __( 'Size', 'woocommerce' ),
'priority' => 40,
'callback' => 'woo_custom_size_tab_content'
);
return $tabs;
}
function woo_custom_shipping_tab_content() {
global $product;
echo'<div><p>'. $product->get_meta( '_custom_shipping' ) . '</p></div>';
}
function woo_custom_color_tab_content() {
global $product;
echo'<div><p>'. $product->get_meta( '_custom_color' ) . '</p></div>';
}
function woo_custom_material_tab_content() {
global $product;
echo'<div><p>'. $product->get_meta( '_custom_material' ) . '</p></div>';
}
function woo_custom_size_tab_content() {
global $product;
echo'<div><p>'. $product->get_meta( '_custom_size' ) . '</p></div>';
}
function action_woocommerce_share() {
// Call your custom tabs
$product_tabs = my_custom_tabs();
// NOT empty
if ( ! empty( $product_tabs ) ) : ?>
<div class="woocommerce-tabs wc-tabs-wrapper">
<ul class="tabs wc-tabs" role="tablist">
<?php foreach ( $product_tabs as $key => $product_tab ) : ?>
<li class="<?php echo esc_attr( $key ); ?>_tab" id="tab-title-<?php echo esc_attr( $key ); ?>" role="tab" aria-controls="tab-<?php echo esc_attr( $key ); ?>">
<a href="#tab-<?php echo esc_attr( $key ); ?>">
<?php echo wp_kses_post( apply_filters( 'woocommerce_product_' . $key . '_tab_title', $product_tab['title'], $key ) ); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
<?php foreach ( $product_tabs as $key => $product_tab ) : ?>
<div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--<?php echo esc_attr( $key ); ?> panel entry-content wc-tab" id="tab-<?php echo esc_attr( $key ); ?>" role="tabpanel" aria-labelledby="tab-title-<?php echo esc_attr( $key ); ?>">
<?php
if ( isset( $product_tab['callback'] ) ) {
call_user_func( $product_tab['callback'], $key, $product_tab );
}
?>
</div>
<?php endforeach; ?>
<?php do_action( 'woocommerce_product_after_tabs' ); ?>
</div>
<?php endif;
}
add_action( 'woocommerce_share', 'action_woocommerce_share' );
Note: displaying the tabs horizontally or vertically is then a matter of applying CSS, this is theme related. Optionally you can add extra classes to the output of these tabs.
I'm trying to update the function that handles the upload of the image to variation product
![image variation] https://i.imgur.com/reNn6x7.png
I thought that the code that handles it is :
protected function set_variation_image( $variation, $image ) {
$attachment_id = isset( $image['id'] ) ? absint( $image['id'] ) : 0;
if ( 0 === $attachment_id && isset( $image['src'] ) ) {
$upload = wc_rest_upload_image_from_url( esc_url_raw( $image['src'] ) );
if ( is_wp_error( $upload ) ) {
if ( ! apply_filters( 'woocommerce_rest_suppress_image_upload_error', false, $upload, $variation->get_id(), array( $image ) ) ) {
throw new WC_REST_Exception( 'woocommerce_variation_image_upload_error', $upload->get_error_message(), 400 );
}
}
$attachment_id = wc_rest_set_uploaded_image_as_attachment( $upload, $variation->get_id() );
}
if ( ! wp_attachment_is_image( $attachment_id ) ) {
/* translators: %s: attachment ID */
throw new WC_REST_Exception( 'woocommerce_variation_invalid_image_id', sprintf( __( '#%s is an invalid image ID.', 'woocommerce' ), $attachment_id ), 400 );
}
$variation->set_image_id( $attachment_id );
// Set the image alt if present.
if ( ! empty( $image['alt'] ) ) {
update_post_meta( $attachment_id, '_wp_attachment_image_alt', wc_clean( $image['alt'] ) );
}
// Set the image name if present.
if ( ! empty( $image['name'] ) ) {
wp_update_post(
array(
'ID' => $attachment_id,
'post_title' => $image['name'],
)
);
}
return $variation;
} `
inside the class-wc-rest-product-variations-controller.php
but any modification at this function is not changing the way that the file is uploaded.
the idea is to upload the image and apply the same variation image to each variation available, but can't find the function that saves the image to the product.
#edit after itzmekhokan reply
i created a plugin that add action to woocommerce_save_product_variation
add_action('woocommerce_save_product_variation', 'salvarfoto',10,2);
function salvarfoto($variation_id,$i){
$variation = new WC_Product_Variation($variation_id);
$produto_pai =wc_get_product( $variation->get_parent_id() );
foreach( $produto_pai->get_children() as $variation_values ){
// $variation_id = $variation_values['variation_id']; // variation id
$product = new WC_Product_Variation( $variation_values );
if( $product->get_attribute( 'pa_cor' ) == $variation->get_attribute('pa_cor'))
{
$id_img = $variation->get_image_id();
$product->set_image_id($id_img);
}
$product->save();
}
}
this code apply the same image_id to all variations that has the same color attribute
Its WC_Meta_Box_Product_Data::save_variations( $post_id, $post ) within file class-wc-meta-box-product-data.php.
And -
$errors = $variation->set_props(
array(
'image_id' => isset( $_POST['upload_image_id'][ $i ] ) ? wc_clean( wp_unslash( $_POST['upload_image_id'][ $i ] ) ) : null,
)
);
image_id basically storing the each variation image id. Check the functionalities first, then I think you can do your modifications using this do_action( 'woocommerce_save_product_variation', $variation_id, $i ); hook.
I have a problem. I want to assign an alt for each photo in the woocommerce such as the name of the variant. How can I do this?
I found this: How to automatically apply woocommerce product title to all product images alt tags?
but, how can I have titles to have the name of the variant?
My solution:
In file variable.php after "do_action( 'woocommerce_before_add_to_cart_form' )" paste this code:
$post_slug = get_post_field( 'post_name', get_post(get_the_ID()));
$title = get_post_field( 'post_title', get_post(get_the_ID()));
if($available_variations) {
for ($i = 0; $i < count($available_variations); $i++) {
$value = $available_variations[$i];
$arrayWithAttribute = $value["attributes"];
$image = $value["image"];
$stringNameAttribute = http_build_query($arrayWithAttribute,'','-');
$alt = $post_slug.'-'.str_replace("=","-",str_replace("attribute_pa_","",$stringNameAttribute));
$titleimg = str_replace("-"," ", $title.' '.str_replace("="," ",str_replace("attribute_pa_","",$stringNameAttribute)));
$available_variations[$i]['image']['alt']=$alt;
$available_variations[$i]['image']['title']= $titleimg;
}
}
And paste in function.php:
function wc_get_gallery_image_html_change( $attachment_id, $main_image = false ) {
$parent = get_post_field( 'post_parent', $attachment_id);
$post_slug = get_post_field( 'post_name', get_post(get_the_ID($parent)) );
$product = wc_get_product( get_the_ID($parent) );
$available_variations = $product->get_available_variations();
$actualImage = wp_get_attachment_image_src( $attachment_id, $full_size );
$title = get_post_field( 'post_title', $parent);
$alt = '';
$titleimg = '';
if($available_variations) {
for ($i = 0; $i < count($available_variations); $i++) {
$value = $available_variations[$i];
$arrayWithAttribute = $value["attributes"];
$image = $value["image"];
if($image['url'] === $actualImage[0]) {
$stringNameAttribute = http_build_query($arrayWithAttribute,'','-');
$alt = $post_slug.'-'.str_replace("=","-",str_replace("attribute_pa_","",$stringNameAttribute));
$titleimg = str_replace("-"," ", $title.' '.str_replace("="," ",str_replace("attribute_pa_","",$stringNameAttribute)));
$available_variations[$i]['image']['alt']=$alt;
$available_variations[$i]['image']['title']= $titleimg;
}
}
}
$flexslider = (bool) apply_filters( 'woocommerce_single_product_flexslider_enabled', get_theme_support( 'wc-product-gallery-slider' ) );
$gallery_thumbnail = wc_get_image_size( 'gallery_thumbnail' );
$thumbnail_size = apply_filters( 'woocommerce_gallery_thumbnail_size', array( $gallery_thumbnail['width'], $gallery_thumbnail['height'] ) );
$image_size = apply_filters( 'woocommerce_gallery_image_size', $flexslider || $main_image ? 'woocommerce_single' : $thumbnail_size );
$full_size = apply_filters( 'woocommerce_gallery_full_size', apply_filters( 'woocommerce_product_thumbnails_large_size', 'full' ) );
$thumbnail_src = wp_get_attachment_image_src( $attachment_id, $thumbnail_size );
$full_src = wp_get_attachment_image_src( $attachment_id, $full_size );
$alt_text = trim( wp_strip_all_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) );
$image = wp_get_attachment_image(
$attachment_id,
$image_size,
false,
apply_filters(
'woocommerce_gallery_image_html_attachment_image_params',
array(
'title' => $titleimg ? $titleimg : _wp_specialchars( get_post_field( 'post_title', $attachment_id ), ENT_QUOTES, 'UTF-8', true ),
'data-caption' => _wp_specialchars( get_post_field( 'post_excerpt', $attachment_id ), ENT_QUOTES, 'UTF-8', true ),
'data-src' => esc_url( $full_src[0] ),
'data-large_image' => esc_url( $full_src[0] ),
'data-large_image_width' => esc_attr( $full_src[1] ),
'data-large_image_height' => esc_attr( $full_src[2] ),
'class' => esc_attr( $main_image ? 'wp-post-image' : '' ),
'alt' => $alt,
),
$attachment_id,
$image_size,
$main_image
)
);
return '<div data-thumb="' . esc_url( $thumbnail_src[0] ) . '" class="woocommerce-product-gallery__image">' . $image . '</div>';
}
next edit product-image.php and change line 42 to:
$html = wc_get_gallery_image_html_change( $post_thumbnail_id, true );
Basically the format of the image tag I am trying to create is:
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" class="attachment-catalog" data-src="my/image/path/here">
And here is my code:
<?php
if ( has_post_thumbnail( $post->ID ) ) {
$newimgdetails = array(
'src' => "data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=",
'class' => "attachment-$size",
'alt' => trim( strip_tags( $attachment->post_excerpt ) ),
'title' => trim( strip_tags( $attachment->post_title ) ),
'data-src' => $src,
);
echo get_the_post_thumbnail( $post->ID, 'shop_catalog', $newimgdetails);
}
?>
I'm fairly new to php so I'm assuming it's an easy fix, but I've been messing around with this for the past hour.
Can someone help me get this one figured out?
Here is a link to the codex for get_the_post_thumbnail - https://codex.wordpress.org/Function_Reference/get_the_post_thumbnail
*Update - Tried this code out with a picture from google and it works. The issue is my variable $src. I need this to get the path to the image, which it is currently not doing. I used $src because I saw it in the codex link above and thought it would work. lol.
I am asuming that you have registered 'shop_catalog' using add_image_size
<?php
if ( has_post_thumbnail( $post->ID ) ) {
$thumb_id = get_post_thumbnail_id( $post->ID );
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'shop_catalog', true);
$src = $thumb_url_array[0];
echo '<img scr="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" class="attachment-catalog" alt="'.trim( strip_tags( $attachment->post_excerpt ) ).'" title="'.trim( strip_tags( $attachment->post_title ) ).'" data-src="'.$src.'">';
}
?>
I am trying to make the theme I am using (DICE) into pulling through title text of images.
The code I am using is below;
if ( has_post_thumbnail() ) {
if ( $linking == 'lightbox' ) {
$alt = esc_attr(get_the_title( $post->ID ) );
$the_title = esc_attr(get_the_title( $post->ID ) );
$img = get_the_post_thumbnail( $post->ID, $size, array( 'alt' => $alt, 'title' => $the_title ) );
}
else
$img = get_the_post_thumbnail( $post->ID, $size );
}
elseif( $placeholder ) {
$img = btp_render_placeholder( $size, '', false );
}
else {
return;
}
The only line I have added is
$the_title = esc_attr(get_the_title( $post->ID ) );
with
'title' => $the_title
in the array aswell. The alt text is pulling through fine, so I'm unsure as to why the title text isn't pulling through?
Any help is appreciated. Thanks.
Using two separate variables to get the same information is bad programming practice.
Try to use only one variable, like this:
if ( $linking == 'lightbox' ) {
$post_title = esc_attr(get_the_title( $post->ID ) );
//The Image
$img = get_the_post_thumbnail( $post->ID, $size, array( 'alt' => $post_title, 'title' => $post_title ) );
}