using inserted media as background of a div in wordpress - php

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?

Related

Changing WooCommerce Thumbnail in Shortcodes

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/

Set default image for all posts

I am using this code to have the Featured Image set on all Pages as a banner, in the header. So all pages have different banners:
<img src="<?php $imgsrc = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID) , 'full'); echo $imgsrc[0]; ?>" class="middle" alt="banner">
I don't want to use this for Posts because I need to set different small pics there. I need a way to automatically have all Posts use a default image banner that wouldn't take the spot of the Featured Image that I need freed up.
Is there a way to auto detect that it's a Post page and have that default image instead?
Tried everything I could find on search engines, but I can't figure out.
One solution (if you use the same template for posts and pages) is to use the function get_post_type() to check the post type:
if( 'post' == get_post_type() ) {
// load image for posts
} else {
// image for pages
}
Another solution is to use a template for posts (like single.php, or single-post.php if you have other custom post types) and one for pages (page.php), so you can use different code on different post types.

Issues using the_post_thumbnail in wordpress

I'm teaching myself Wordpress, and my current goal is to display 4 thumbnails of images posted in a particular category.
I've already got the posts being pulled in by category, however I cannot pull ONLY the images. It's either the images and post text, or none at all.
My code is posted here: http://pastebin.com/NZ7fyyPA
I've tried simply replacing
<?php the_content(); ?>
with:
<?php the_post_thumbnail(); ?>
but that didn't work at all. Nothing came back at all!
I've even tried simply removing:
<?php the_content(); ?>
and same as above! I was thinking that because I have
<div class="entry-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
That would pull the thumbnail in only, so I thought removing the content would help but nope!
I've read through the Codex here: http://codex.wordpress.org/Function_Reference/the_post_thumbnail
and the only question I have from that, is that immediately the Codex says:
"Use get_the_post_thumbnail($id, $size, $attr ) instead to get the featured image for any post."
Which I don't think I'm doing, because I haven't setup anything related to a 'featured image' in my theme...or is what I'm trying to do considered using a featured image? I'm only uploading images and posting them inside of the blog posts.
Sorry for the long write up, I'm sure it's something simple!
Thanks!
One more thing you can set a featured image from admin and call that image with this code the_post_thumbnail( $size, $attr ); and when you want to show anything from content part then you can call with this code simply. the_content();
you can also use excerpt for this as the_excerpt();
Thanks
This is a bit of a hack; however, it works.
While viewing your Wordpress website, use the browsers developer tools to target the 'post text'. You'll be able to see the id that is associated with that data-set.
Then, in your CSS. Target that id and use display:none;
Example:
#posttext {
display:none;
}

Featured Image Not Showing in Wordpress

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

How to add a css styled html-list to wordpress, manageable in the dashboard

I would like to add a feature to a WordPress page to display a short list of people, like the one seen here - http://www.blenderbox.com/company/team
I have done this on other sites by styling lists with css. This time however, it's for a client and I can't trust them to copy and paste a <li>, editing the name, job title and img name without messing it up.
What is the best way to go about creating this so that it can be easily reduced/added to in the WordPress dashboard? Basically, so that the user simply clicks "add person" then fills in some fields before updating the page.
I'm new to WordPress (though I understand how it works) but I am competent coding so hopefully an informative nudge in the right direction would be sufficient.
Thanks, Ben.
Use categories. Create a new category called Person or Team or something to that effect. Then use the Post Title for their Name - any other information can be put in the post and then add the image to the Featured Image.
Create a new template for this page by copying over another template file and giving it a header like this to name it.
<?
/*
Template Name: About Us / Team / Whatever
*/
?>
And in the page call only the information you want with something like this:
//Set up the Loop
<?php
global $post;
$args = array (
'category' => 4,
'order' => 'ASC');
$teamposts = get_posts( $args );
foreach( $teamposts as $post ) : setup_postdata($post); ?>
//Call the information you want - put them in <li> if you need
<?php the_title();?>
<?php the_excerpt();?> //OR the_content
<?php the_post_thumbnail('new-image-size');?>
//Close the loop
<?php endforeach; ?>
You can then go on to call anything else you want or run another loop on the same page to call other information.
To get the right sized thumbnail you have called 'new-image-size' - to set this up add a line like this to your functions.php file.
// Post Thumbnails
add_theme_support( 'post-thumbnails' );
// name of the thumbnail, width, height, crop mode
add_image_size( 'front-page-services', 450, 270, true );

Categories