I'm building a small photography site and looking to protect the images the best I can.
(I know, I know - you can't protect the images once they're on the
internet)
So - to do this, instead of using an annoying disable-right-click-using-javascript method, I'm loading the watermarked thumbnail images using base64 to obfuscate the filepath.
Code I'm using, if anyone's interested. Feel free to suggest improvements/criticise:
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'shop_catalog' ); ?>
<img src="data:image/gif;base64,<?php echo base64_encode(file_get_contents($image[0])); ?>">
This works great on content-single-product.php, but does anyone know what code is loading the images in the [best_selling_products] and [recent_products] shortcodes? I'm in class-wc-shortcodes.php, but the query doesn't seem to be loading the images from here...
So why don't I just load small thumbnail images?
Good question. Because we're planning to sell photos through the site, the high-res image has to be loaded as the featured image (to be sent though to the printing API) - and anyone with half a brain can look at the thumbnail url and get the full high-res image url.
Any suggestions on how to achieve this, or am I just best off scrapping the shortcodes and building my own query?
Okay - so as requested, here's my solution:
As #helgatheviking mentioned, the template which controls the product overview iswoocommerce/content-product.php - or as WooCommerce puts it:
The template for displaying product content within loops
There are a number of hooks here, including woocommerce_template_loop_product_thumbnail - the hook which controls the product thumbnails. So quite simply (in the end) all we need to do is:
1) Unhook the thumbnails using:
remove_action ('woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
2) Add an action with our own custom thumbnail, or anything else:
add_action('woocommerce_before_shop_loop_item_title', 'woocommerce_custom_template_loop_product_thumbnail', 10);
function woocommerce_custom_template_loop_product_thumbnail() {
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'shop_catalog' );
echo '<img src="data:image/gif;base64,' .base64_encode(file_get_contents($image[0])) . '">';
}
Thanks to #helgatheviking for pointing me in the right direction.
More on WooCommerce Hooks at: https://docs.woocommerce.com/document/introduction-to-hooks-actions-and-filters/
Related
The current Woocommerce setup of this website is being provided with a main product image and several gallery images as normal. The main product image is being used correctly so that it is shown within a list and once clicked, the product page is opened. However, within this product page, the gallery images that are provided on Woocommerce are being shown as full size images beneath each other on the right side of the screen. Within each product page there is mCustomScrollbar in action so that clients can scroll down the images. I want those to be small images with a lightbox and zoom technique instead of full size images. I have also tested plugins to see whether there are issues with regards to this however none have resulted.
I have created a new local site to test and created a product from scratch to match the original Woocommerce files with these ones since this has gone through a different developer. The following files, which seem to be in direct relation with each product page, are binary equal: product-thumbnails.php, product-image.php, single-product.php, content-product.php and content-single-product.php and therefore no changes were made in these that reflect in each product page. I have also found and optimized the below code put in functions.php however to no avail.
add_action('woocommerce_shop_loop_item_title','wps_add_extra_product_thumbs', 5);
function wps_add_extra_product_thumbs() {
if (is_product()) {
global $product;
$attachment_ids = $product->get_gallery_image_ids();
echo '<div class="product-thumbs">';
foreach( array_slice( $attachment_ids, 0,3 ) as $attachment_id ) {
$thumbnail_url = wp_get_attachment_image_src( $attachment_id, 'thumbnail' )[0];
echo '<img class="thumb" src="' . $thumbnail_url . '">';
}
echo '</div>';
}
}
I have already put my head around this and found myself in a loop, however the above is what I have come up with, which up until now is not a solution. I want the product to show similar to this: https://www.wpstud.io/wp-content/uploads/2016/05/product-with-thumbs.jpg . The client's website is fully functional and through the busiest days of the year so I require the most efficient solution without making any major changes. Thanks so much in advance.
In addition to the above code previously provided, I have edited some small details from it and also included the Flexslider 2 by implementing the slider's javascript, creating <li> tags within the foreach loop attached with the data-thumb technique (a Flexslider speciality). The Flexslider automatically notes the <div> tag holding all <li> tags and voila', perfect execution as intended.
Some tweaks here and there to make it work but worth it, client is super happy with this update. :)
try going to Customize -> WooCommerce -> Product catalog and change the image size there
Thanks for looking here and trying to provide some useful answer. Recently I have downloaded the plugin https://wordpress.org/plugins/olevmedia-shortcodes/ and it works really fine. But when trying to use the short-code for "Recent Post" i'm facing image-sizing related issue that you see on the image attached below:
It looks really ugly. I opened a code and found the small piece of code for this function:
$out .= '<div class="omsc-recent-posts-title"><h3>'. get_the_title() .'</h3></div>';
if( $thumbnail && has_post_thumbnail() ) {
$img = wp_get_attachment_image_src( get_post_thumbnail_id(), apply_filters('omsc_sc_recent_posts_img_size', 'medium'));
if($img) {
$img_html=apply_filters('omsc_sc_recent_posts_img', '<img src="'.$img[0].'" alt="'.esc_attr($post->post_title).'" />', array(
'img_src' => $img[0],
'link' => get_permalink(),
'alt' => $post->post_title,
));
$out.='<div class="omsc-recent-posts-thumb">'.$img_html.'</a></div>';
}
}
Then I look on the image size and it says:
$img = wp_get_attachment_image_src( get_post_thumbnail_id(), apply_filters('omsc_sc_recent_posts_img_size', 'medium'));
Checking through FireBug For some posts the "Medium" size is set to 222x221, for others 300x300 and for the rest 222x167
All I want to do is to make all thumbnails having the same size. So, I created this piece of code for my theme's function.php file:
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'custom-recpost-thumb', 222, 221,true );
}
and then for the plugin php file I made a call to the function in this way:
$img = wp_get_attachment_image_src( get_post_thumbnail_id(), apply_filters('omsc_sc_recent_posts_img_size', 'custom-recpost-thumb'));
I see the same. Absolutely no changes has been made. What I've done wrong?
the problem as I can see it is that the pictures you upload is not the same dimensions so it will fit your width and make the height auto there are pretty much two ways you can get around this 1. fix your pictures before you upload or fit it with css no.2= make your box that holds your img the width and height that you want and make it overflow hidden then take your image and say it have to be the same height as the box and the width have to be auto the reason for this that most pictures is made as a landscape so in that way your pictures can fit.. for the record it is not a pretty way to do it and I would recommend fixing you pictures before you upload them
Different sizes of original images will create differently sized "medium" images. This is because the medium settings in WordPress are there to accommodate images of different sizes. In general, those pixel settings provide reasonably good looking medium sized images for any size original image. I suspect WordPress is overriding your function call to show "the best" image it can, based on its algorithms and image optimization.
Even with the coding options for WordPress.org, there are still some universal settings that WP will employ to create "good" websites. Maybe it's a reputation thing, maybe it's another example of technology organizations telling users what is best for them.
In any case, I agree with Anker that optimizing your images before you upload them is a better solution. It will give you more control, and improve the chance that WP will display your images as you want.
I am trying to create a custom theme, where in one is supposed to use some custom post types in which he is supposed to insert one new media (Image) and then i have to use that attached image as the background of some div inside my post ? How do i make best use of wordpress in this scenario.
What currently i am doing is -
<div class="<?php echo get_post_meta($post->ID, $bgImageClass, true); ?>"></div>
And then i am defining this image class in my style sheet and uploading media seperately ,
Now i did google it up to find some nice solution and what i found till now is
wp_get_attachment_image_src( $attachment_id );
and explicitly giving attachment ID which i dont prefer, since d/w will have to work again. Now i read about the function -
<?php get_attached_media( $type, $post_id ) ?>
But i am not sure about its usage, i dont understand what and how it will return the media.
So, how can i use the power of wordpress in this scenario?
I'm trying to show a featured image in Wordpress, I've uploaded the image (put it as the smallest image possible) but when I view the blog list view (category.php) I just get the blog post header, and no image.
Anybody know how to show the image? Checked the source, and doesn't show an image at all.
Hope someone can help, would be much appreciated.
In addition to setting the featured image in WP admin, you need rendering code somewhere in your template files. Something like this:
if ( has_post_thumbnail( get_the_ID() ) ) {
echo get_the_post_thumbnail( get_the_ID() );
}
I use this code in my header.php theme file, but you may prefer it within page.php or elsewhere (category.php seems appropriate in your case).
Check the documentation for help changing the dimensions, adding class attributes, etc. to the <img/> tag generated.
http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail
I am looking for a way to add thumbnail images to post Excerpts.
I've installed: SuperSlider-Excerpt and Thumbnail For Excerpts plugins but I need to specifically assign the thumbnail that I want to use per post or automatically get the featured image to display as the thumbnail.
Anyone know a method or plugin that can do this please?
You can do this pretty easily with Wordpress. Like Francy said, the_post_thumbnail() will add the featured image you have picked on the post edit page in the admin section.
First you need to set up your thumbnails in your functions.php file. This is in the root directory of your theme (wp-content/themes/your-theme). Write this:
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 200, 200, false ); // Set your size, and clipping options
This would make thumbnails 200x200. You may want something else, so put whatever number you want in there.
Now that thumbnails are active, you can use the the_post_thumbnail() throughout your site, inside the loop, to display the thumbnail you've picked.
For example, if you want them to appear on the index page, head to index.php in your theme root directory, and write , right before . Experiment with where these appear, and get it in the right place for you.
Try within the loop:
the_post_thumbnail("thumbnail");
Or what also helped me was:
<?php
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail');
$theImageSource = $image[0];
?>