I've been trying to set the featured image as the background image on my blog. It's a single columned custom WordPress theme I am developing.
My idea is something like medium.com and blog.pickcrew.com
Can you guys please help me in getting it?
Thanks much!
You can try the following code snippet.
Save it to the file /wp-content/plugins/featured-image-background/featured-image-background.php and activate it:
<?php
/**
* Plugin Name: Featured Image Background
* Description: Featured image as background for single posts
* Plugin URI: http://stackoverflow.com/q/23388561/2078474
*/
function so_23388561_wp_head()
{
if ( is_single() )
{
if ( has_post_thumbnail( get_the_ID() ) )
{
$image = array_shift(
wp_get_attachment_image_src(
get_post_thumbnail_id( get_the_ID() ),
'full'
)
);
printf( '<style>
body {
background-image: url("%s") !important;
background-size: cover;
}
</style>',
$image
);
}
}
}
add_action( 'wp_head', 'so_23388561_wp_head' );
You might want to use another CSS selector than body, perhaps div#background?
In general I use get_queried_object_id() to get the post ID outside the loop, but get_the_ID() should work in this case.
We're using the wp_head hook, so make sure your theme has the wp_head() function.
Hopefully you can modify it to your needs.
You can try the following code
<?php $body_background = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' ); ?>
<body style="background-image: url(<?php echo $body_background['0'];?>)">
....
</body>
Related
The following site uses the Genesis Framework and a child them (if it matters) and I'm getting a weird issue with the grid layout for the blog archive page.
Here is the page: https://foralles.com/community/
It is skipping the first column in the second row. What is weird is it isn't doing this on the second/third/etc. pages of the archive.
In further weirdness, it isn't doing this in Chrome but is in FF, Safari and IE.
I've deleted the posts before and after the empty column and nothing changes.
This also wasn't happening until recently and I'm not sure what changed.
Given that it works in Chrome and on the subsequent archive pages makes me think it is some CSS issue but I can't figure it out...any help would be greatly appreciate.
Here is my code:
<?php
/**
* Template Name: Blog
* This is your custom Archive page for the Swank Theme.
*/
//* Show page content above posts
add_action( 'genesis_loop', 'genesis_standard_loop', 5 );
//* Add the featured image after post title
add_action( 'genesis_entry_header', 'foralles_grid' );
function foralles_grid() {
if ( has_post_thumbnail() ){
echo '<div class="archive-featured-image">';
echo '<a href="' . get_permalink() .'" title="' . the_title_attribute( 'echo=0' ) . '">';
echo get_the_post_thumbnail($thumbnail->ID);
echo '</a>';
echo '<a href="' . get_permalink() .'" title="' . the_title_attribute( 'echo=0' ) . '">';
echo the_title( '<h2>', '</h2>' );
echo '</a>';
echo '</div>';
}
}
//* Remove the ad widget
remove_action( 'genesis_before_loop', 'adspace_before_loop' );
//* Remove author box
remove_action( 'genesis_after_entry', 'genesis_do_author_box_single', 8 );
//* Remove the post meta function
remove_action( 'genesis_entry_footer', 'genesis_post_meta' );
//* Remove the post info function
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
//* Force full width content layout
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
//* Remove the entry title (requires HTML5 theme support)
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
//* Remove the post content
remove_action( 'genesis_entry_content', 'genesis_do_post_content' );
//* Add Page Heading and Content
add_action( 'genesis_before_loop', 'community_heading' );
function community_heading() {
?>
<h1>Community</h1>
<p>We built our Community page to share ideas, stories and inspiration. We’re sure you will find something that interests you and connects you to For Alles. Please enjoy exploring and reading. If there is anything you would like us to know please contact us. We’d love to hear what you think!</p>
<?php
}
genesis();
You need to use the min-height attribute. Edit the CSS as follows
.page-template-page_blog article.type-post, .archive article.type-post {
width: 33.33%;
float: left;
min-height: 450px;
}
This makes sure all the articles have a minimum height set, the problem arises when one item is bigger then another height wise and this takes up the area below it. This change can be made on the style.css file on line 881
echo woocommerce_get_product_thumbnail();
That output the whole image tag.
How can I get only the image source?
Same problems solution with just WordPress:
How do I get image url only on the_post_thumbnail
Is that possible with WooCommerce?
Try to write your own code based on the function woocommerce_get_product_thumbnail() from wp-content/plugins/woocommerce/includes/wc-template-functions.php. For example:
function my_get_the_product_thumbnail_url( $size = 'shop_catalog' ) {
global $post;
$image_size = apply_filters( 'single_product_archive_thumbnail_size', $size );
return get_the_post_thumbnail_url( $post->ID, $image_size );
}
You can get the thumbnail of any post as such:
$thumbnail = get_the_post_thumbnail_url($post->ID);
it also provides the image URL through normal WordPress get post URL method
try this:
<?php echo the_post_thumbnail_url(); ?>
I thought woocommerce post thumbnail is different than normal post thumbnail( self teaching limits) . But they are the same thing.
So to get just the "src" attribute aka image url use the following line-
<?php the_post_thumbnail_url( $size ); ?>
Is there a way to hide the featured image from SOME posts?
My blog is cur-mudg-eon.com and if you look at the most recent post (on the homepage) titled "Confucius Says..." you'll see that I've used the featured image and it shows some excerpt text. When you click on the title or pic it takes you to the post which shows the cartoon I wish to display, and the featured image that I want to hide/remove.
I only want to do this on some posts, but I would like to be able to keep the featured image on the homepage.
Is this possible?
EDIT:
Pastebin File as requested.
Based on Chris Herberts answer where would I add his code to this code found in my single.php file:
<?php if(has_post_thumbnail()) {
echo '<figure class="featured-thumbnail"><span class="img-wrap">'; the_post_thumbnail(); echo '</span></figure>';
}
?>
<?php } else { ?>
<?php if(has_post_thumbnail()) {
echo '<figure class="featured-thumbnail large"><span class="img-wrap"><span class="f-thumb-wrap">'; the_post_thumbnail('post-thumbnail-xl'); echo '</span></span></figure>';
}
?>
<?php } ?>
Another way to do this that does not depend on them all being in the same category is to use a Custom Field.
You would set a custom field for the post for which you would hide the featured image - in the image below I'm using "hide_featured_image" and "yes", as the key and value, respectively.
Then you would check to see if the "hide_featured_image" field is set to "yes" when calling calling the function to show the featured image. Here's an example:
$shouldHideFeaturedImage = get_post_meta($post->ID, 'hide_featured_image', true);
if ( $shouldHideFeaturedImage != 'yes' ) {
if ( has_post_thumbnail() ) {
the_post_thumbnail('medium');
}
}
If all those posts are in the same categories, you can do something like this.
On your theme files, under the file single.php there should be something similar to this:
if ( has_post_thumbnail() ) {
the_post_thumbnail('medium');
}
change it to something like:
if ( !in_category( array( 'category1', 'category2', 'etc' ) )) {
if ( has_post_thumbnail() ) {
the_post_thumbnail('medium');
}
}
I was able to remove the featured image metabox from custom post types of pages. Below is what I used:
add_action('do_meta_boxes', 'remove_thumbnail_box');
function remove_thumbnail_box() {
remove_meta_box( 'postimagediv','page','side' );
}
However, what I really want to do is to only apply this to a specific page template. Is this possible?
Thanks!
Ah, I found a solution.
$post_id = $_GET['post'] ? $_GET['post'] : $_POST['post_ID'] ;
$template_file = get_post_meta($post_id,'_wp_page_template',TRUE);
if ($template_file === 'page-template-name.php') {
add_action('do_meta_boxes', 'remove_thumbnail_box');
function remove_thumbnail_box() {
remove_meta_box( 'postimagediv','page','side' );
}
}
If there's a better solution... please don't hesitate to post.
Thanks!
For anyone else looking to remove featured image support programatically (the comments should be self explanatory):
/**
* Removes the featured image metabox from specific pages (by ID)
* #note: populate the $excluded_page_ids_array array with page IDs
*/
function eh_remove_featured_image_metabox_from_specific_pages() {
// populate with page IDs to exclude featured image metabox from
$excluded_page_ids_array = array( 38, 29 );
// store the current post ID
$post_id = $_GET['post'] ? $_GET['post'] : $_POST['post_ID'];
// check if the current page is in our excluded array
if( in_array( $post_id, $excluded_page_ids_array ) ) {
// remove featured image metabox
remove_meta_box( 'postimagediv','page','side' );
}
}
add_action( 'do_meta_boxes', 'remove_featured_image_metabox_from_specific_pages' );
After adjusting the array of pages to exclude, you'll want to add this snippet to your themes functions.php file.
Alternatively, you can remove the featured image from all pages, except specified ones - where the featured image metabox will remain.
/**
* Removes the featured image metabox from all pages except specified ones
* #note: populate the $page_ids array with page IDs
*/
function eh_remove_featured_images_metabox_from_all_pages_except_specified() {
// populate with page IDs to keep the featured image metabox on
$page_ids = array( 25, 31 );
$post_id = $_GET['post'] ? $_GET['post'] : $_POST['post_ID'];
if( ! in_array( $post_id, $page_ids ) ) {
// remove featured image metabox
remove_meta_box( 'postimagediv','page','side' );
}
}
add_action( 'do_meta_boxes', 'eh_remove_featured_images_metabox_from_all_pages_except_specified' );
There is another solution. By editing the page.php
If your feature Image div Looks like below for example
<div class="thumbnail">
<?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>
</div>
you can use
if (is_page( array( 42, 'about-me', 'Contact' ) );
// Returns true when the Pages displayed is either post ID :42, or post_name_slug "about-me", or post_title "Contact".
<?php
if (is_page( array( 42, 'about-me', 'Contact' ) ) ) {
?>
<div class="thumbnail" style="display:none;">
<?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>
</div>
<?php
}else{
?>
<div class="thumbnail">
<?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?>
</div>
<?php}?>
I'm using the vanilla Geneis theme with no child, but I cannot find where the logo should reside. I can change the favicon no worries, but I see no logo file present and I see no advice on how to add to the "parent" theme - I'm not using a child.
Is there a way to add a logo. I have changed the settings in wordpress for a logo rather than text (in the header settings). Any ideas?
Although I haven't done this on the default Genesis theme, I have replaced the main headline text with just a logo. I posted how I did it on the Genesis Forum, but here it is.
If you want to keep the rest of the genesis_do_header hook in place, you can just replace the default genesis_do_header using the child theme's functions.php.
Open up functions.php and add the following:
// Replace header hook to include logo
remove_action( 'genesis_header', 'genesis_do_header' );
add_action( 'genesis_header', 'genesis_do_new_header' );
function genesis_do_new_header() {
echo '<div id="title-area"><img src="your/logo/image.jpg" alt="Site Logo" />';
do_action( 'genesis_site_title' );
do_action( 'genesis_site_description' );
echo '</div><!-- end #title-area -->';
if ( is_active_sidebar( 'header-right' ) || has_action( 'genesis_header_right' ) ) {
echo '<div class="widget-area">';
do_action( 'genesis_header_right' );
dynamic_sidebar( 'header-right' );
echo '</div><!-- end .widget-area -->';
}
}
You can then style the image with your CSS in the following fashion:
#title-area img {
float:left;
}
You should now see your logo floated to the left of your site title. You may have to tweak some things, as the themes aren't identical, but let me know how this works for you.
Not to resurrect an old post or anything but I found a solution that works better than the one proposed above:
If you want to remove Title and Description then add following code in functions.php. This is useful when you decide to use site logo instead of text for site title.
/** Remove Title & Description **/
remove_action( 'genesis_site_title', 'genesis_seo_site_title' );
remove_action( 'genesis_site_description', 'genesis_seo_site_description' );
/** Remove default site title and add custom site title **/
remove_action( 'genesis_site_title', 'genesis_seo_site_title' );
function custom_site_title() {
echo '<img src="'.wp_get_attachment_url(254).'" alt="My Website"/>';
}
add_action( 'genesis_site_title', 'custom_site_title' );