I'm trying to use the latest post featured image as a background image for a div on my homepage. Can anyone help with the php?
wp_get_recent_posts() will return a single, most recently published post using the parameters below.
I recommend placing the style in a stylesheet.
/* Get Recent Post */
$recent_post = wp_get_recent_posts(array(
'numberposts' => 1,
'post_status' => 'publish'
));
/* If Featured Image Set */
if ( has_post_thumbnail($recent_post[0]['ID']) ){
/* Get Image */
$image = wp_get_attachment_image_src( get_post_thumbnail_id($recent_post[0]['ID']), 'full');
/* Output Div with Image Set Inline, Use padding Top for Responsive Ratio Size */
echo '
<div class="featured-image-div" style="background-image:url('.$image[0].');"></div>
<style>
.featured-image-div{
padding-top: calc( 450 / 800 * 100% );
background-size: contain;
background-repeat: no-repeat;
}
</stle>
';
}
Related
I was looking for a way to make a "flip image" in the woocommerce product loop when you hover mouse, I know there are plugins that do this function but I think it's a very simple thing to need to use a plugin, I've been searching and I ended up finding a solution.
here's the code:
add_action( 'woocommerce_before_shop_loop_item_title', 'custom_loop_product_thumbnail', 10 );
function custom_loop_product_thumbnail() {
global $product;
$attachment_ids = $product->get_gallery_image_ids();
$secondary_image_id = $attachment_ids['0'];
echo wp_get_attachment_image($secondary_image_id);
}
and the css:
ul.products li.product a.woocommerce-LoopProduct-link img:nth-child(1){
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
ul.products li.product a.woocommerce-LoopProduct-link img:nth-child(1):hover {
opacity: 0;
transition: opacity 0.5s;
}
my code did the job but the image is coming at a very low resolution
is there a way for it not to appear with such a low resolution?
I'm using a storefront child theme
nevermind I found out that some information was missing in my code here is the solution I found:
you need to set the image size: wp_get_attachment_image();
//set image size full size
wp_get_attachment_image($secondary_image_id, 'full');
//set image size medium size
wp_get_attachment_image($secondary_image_id, 'medium');
//set image size thumbanil size (default)
wp_get_attachment_image($secondary_image_id, 'thumbnail');
add_action( 'woocommerce_before_shop_loop_item_title', 'custom_loop_product_thumbnail', 10 );
function custom_loop_product_thumbnail() {
global $product;
$attachment_ids = $product->get_gallery_image_ids();
$secondary_image_id = $attachment_ids['0'];
echo wp_get_attachment_image($secondary_image_id, 'full');
}
I'm trying to wrap a div with a link to the latest post. Currently, the code returns the value of the featured image to use as the background image for a continuing div. I just want to wrap it with the url for the latest post. Thanks
<?php
/* Get Recent Post */
$recent_post = wp_get_recent_posts(array(
'numberposts' => 1,
'post_status' => 'publish'
));
/* If Featured Image Set */
if ( has_post_thumbnail($recent_post[0]['ID']) ){
/* Get Image */
$image = wp_get_attachment_image_src( get_post_thumbnail_id($recent_post[0]['ID']), 'full');
/* Output Div with Image Set Inline, Use padding Top for Responsive Ratio Size */
echo '
<div class="featured-image-div" style="background-image:url('.$image[0].');"></div>
';
}
Use get_the_permalink like so
/* If Featured Image Set */
if ( has_post_thumbnail($recent_post[0]['ID']) ){
$image = wp_get_attachment_image_src( get_post_thumbnail_id($recent_post[0]['ID']), 'full');
echo '<a href="' . get_the_permalink($recent_post[0]['ID']) . '">
<div class="featured-image-div" style="background-image:url('.$image[0].');"></div></a>
';
}
Function documentation: https://developer.wordpress.org/reference/functions/get_the_permalink/
I've altered the default code that is generated when you upload an image through the posting page with the "add media" button in the post content.
This is the code I am using:
add_filter('image_send_to_editor', 'img_wrapper', 20, 8);
function img_wrapper($html, $id, $caption, $title, $align, $url, $size, $alt){
$class = "IA_image";
$editor_size = 300;
$img_meta = wp_get_attachment_metadata($id);
$width = $img_meta['width'];
$height = $img_meta['height'];
$url = wp_get_original_image_url($id);
$style = "width: {$editor_size}px; height: {$editor_size}px; background-image: url({$url}); background-position: center; background-size: cover;";
$html = "<div class=\"{$class}\" data-width=\"{$width}\" data-height=\"{$height}\" style=\"{$style}\"></div>";
// Add caption
if($caption){
$style = "font-style: italic;";
$html .= "<p class=\"caption\" style=\"{$style}\">{$caption}</p>";
}
$html = "<div class=\"{$class}-outer\">{$html}</div>";
return $html;
}
Instead of inserting an img tag I'm now using divs and setting the background image on them accordingly. I'm displaying these images on the wordpress single page.
However, by doing this, the image can not be edited like the usual images (an edit button appears when you click on it). This is the edit button I'm referring to:
Is there any way I can add this "edit" button to my altered images?
I'm trying to get the home page of a WordPress theme I am building to change the background image on refresh based on 3 potential background images.
Each image is considered part of a larger "case study" that has a title, link, text, etc.
The case study fields are created through custom meta boxes on the home page. (I am using this to simplify the meta box creation process: https://github.com/jaredatch/Custom-Metaboxes-and-Fields-for-WordPress).
Long story short, the client wants 3 case studies on the home page to have corresponding background images. This is why I didn't use the featured image functionality, as each background goes with specific meta data.
The problem is, I can't figure out how to get the meta ID of the chosen background image and use that to set the background CSS.
Here is what I have so far:
/**
* Home Page Case Randomizer
*/
$GLOBALS['_home_case_number'] = rand(1, 3);
function home_case_number() {
if ( is_front_page() ) : // checks whether this is the home page
// get the meta image
$attachment_image = get_post_meta( get_the_ID(), '_home_case_background_' . $_home_case_number, true );
This is where I get confused. The above returns the appropriate image.jpg file. How do I massage this to work with the below code?
The below code is adapted from http://s2webpress.com/responsive-featured-image-function-in-wordpress-themes/, and I'd like to use it to make sure I'm serving images responsively.
// store the image sizes in an array
$img_sizes = array( 'thumbnail', 'medium', 'large', 'full' );
// grab the URL for each image size and store in a variable
foreach ( $img_sizes as $img_size ) {
${ 'img_src_' . $img_size } = wp_get_attachment_image_src( $attachment_image, $img_size );
}
echo '<style type="text/css">
.featured-image {
width: 100%;
min-height:350px;
background-image: url(' . esc_url( $img_src_medium[0] ) . ');
}
#media screen and ( min-width: 400px ) {
.featured-image {
background-image: url(' . esc_url( $img_src_large[0] ) . ');
}
}
#media screen and ( min-width: 1000px ) {
.featured-image {
background-image: url(' . esc_url( $img_src_full[0] ) . ');
}
}
</style>';
endif;
};
add_action( 'wp_head', 'home_case_number' );
So do I go about this by getting the meta ID of the background image? Or the attachment ID? I don't know how to do either at this point.
Any help is much appreciated!
I figured it out!
1) The CMB "plugin" saves the attachment ID as as another meta key by adding "_id" to the end of it, so I used that to get the attachment ID, and
2) I had variable scope issues. As soon as I called my global variable within my function, things started working. Here's the final code:
/**
* Home Page Case Randomizer
*/
$GLOBALS['_home_case_number'] = rand(1, 3);
function home_case_number() {
global $_home_case_number;
if ( is_front_page() ) : // checks whether this is the home page
// get the attachment thumbnail ID
$attachment_image = get_post_meta( get_the_ID(), '_home_case_background_' . $_home_case_number . '_id', true );
// store the image sizes in an array
$img_sizes = array( 'thumbnail', 'medium', 'large', 'full' );
// grab the URL for each image size and store in a variable
foreach ( $img_sizes as $img_size ) {
${ 'img_src_' . $img_size } = wp_get_attachment_image_src( $attachment_image, $img_size );
}
echo '<style type="text/css">
.featured-image {
width: 100%;
min-height:350px;
background-image: url(' . esc_url( $img_src_medium[0] ) . ');
}
#media screen and ( min-width: 400px ) {
.featured-image {
background-image: url(' . esc_url( $img_src_large[0] ) . ');
}
}
#media screen and ( min-width: 1000px ) {
.featured-image {
background-image: url(' . esc_url( $img_src_full[0] ) . ');
}
}
</style>';
endif;
};
add_action( 'wp_head', 'home_case_number' );
Hopefully this will help someone else out there.
Users on my site upload images that are less than my WordPress theme's essential thumbnail dimensions. How can I force these types of images to stretch vertically or horizontally so there is no blank space?
My wp-admin>settings>media>thumbnail size is set to 124px x 156px. Uploaded images that are 60px x 190px destroy the website layout. www.sharehouse.co is the test site.
This code below is what needs to be altered.
<div class="post-left">
<a href="<?php the_permalink(); ?>" <?php if ((get_option('cp_ad_image_preview') == 'yes') && (cp_get_image_url_raw($post->ID, 'large', 1) == true)) { ?>class="preview" rel="<?php echo cp_get_image_url_raw($post->ID, 'large', 1); ?>" <?php } ?>><?php if(get_post_meta($post->ID, 'images', true)) cp_single_image_legacy($post->ID, get_option('thumbnail_size_w'), get_option('thumbnail_size_h'), 'preview'); else cp_get_image_url_feat($post->ID, 'thumbnail', 'preview', 1); ?></a>
</div>
So, the first thing you need to do is strip the hardcoded width and height attributes from the img HTML that WordPress creates. It figures you should have those dimensions and forces you to use them.
Taken from: https://wordpress.stackexchange.com/questions/5568/filter-to-remove-image-dimension-attributes
add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
function remove_thumbnail_dimensions( $html ) {
$html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
return $html;
}
Then it's just CSS
.attachment img {
width: 100%; /* scale to width of container, or whatever you want */
}