I'm trying to make my theme totally independent of ACF's get_field and the_field (so in case the plugin is disabled the site will not break). I have an image that is loaded via custom field 'slider_image' as an inline background-image. I need to call the URL of the image. Is it possible to load this into inlined html? Here's the working code (w/ ACF's the_field):
<!-- Hero Image -->
<section class="hero" style="background: url('<?php the_field('slider_image'); ?>') no-repeat center center; background-size: cover;">
</section>
<!-- End Hero Image -->
How can I use get_post_meta to rewrite this statement in case the plugin is disabled?
I've tried:
<section class="hero" style="background: url('<?php echo get_post_meta( get_the_ID(), 'slider_image', true ); ?>') no-repeat center center; background-size: cover;">
Which returns:
<section class="hero" style="background: url('98') no-repeat center center; background-size: cover;">
This must be the id of the post for attached image. To grab current image you must use some of the embedded WP functions like wp_get_attachment_image (if you want to print image tag) or wp_get_attachment_image_src (if you want image attributes)
For example in your case, when you want only url of the image you can do something like this:
$img_id = get_post_meta( get_the_ID(), 'slider_image', true );
$image_attr = wp_get_attachment_image_src( $img_id, 'large' ); //returns false or array
if ( $image_attr ) {
$img_url = $image_attr[0]; ?>
<section class="hero" style="background: url('<?php echo $img_url; ?>') no-repeat center center; background-size: cover;">
<?php } ?>
Related
I am using a php loop to pull in post articles from Wordpress and since the images vary in height I wish to add some css that guarantees the image height always stays the same, without distorting the photo.
Should I just fix the height at lets says 200px using object-fit and then use max-width to make it responsive or is there a better way to do this?
.fonds-thumbnail-header {
display: block;
margin: auto;
width: 100%;
}
<div class="fonds-thumbnail-header">
<?php if ( has_post_thumbnail() ) { ?>
<a href="<?php the_permalink(); ?>" class="fonds-thumbnail-header">
<?php the_post_thumbnail( 'medium', array(
'class' => 'fonds-thumbnail-header',
'alt' => get_the_title()
) );
?>
</a>
</div>
First, you want to add image size... Do this in your functions.php of your theme.
function dd_custom_image_sizes(){
// 300 x 200 cropped center
add_image_size( 'my_custom_thumb', 300, 200, array('center', 'center'));
}
add_action('after_setup_theme', 'dd_custom_image_sizes');
Since you're adding a new image size, after your site is already set up, you'll have to regenerate the thumbnails to get your new size applied. This plugin Regenerate Thumbnails is what you should use.
After you run the plugin and have your new thumbs...
Then in your template, call that size:
<?php the_post_thumbnail( 'my_custom_thumb', array(
'class' => 'fonds-thumbnail-header',
'alt' => get_the_title()
) );
?>
i think you should make it fix , and maybe for the image size you can try something like this at if( has_post_thumbnail() )
<div class="crop" style="
background-image: url('test300x450.png');
width: 300px;
height: 300px;
background-position: center center;
background-repeat: no-repeat;">
</div>
I have tried several things, ultimately what should work to allow the graphic to display at full image size is this:
.custom-logo {
max-width: 100%;
}
It's not working. It will only display the .custom-logo at 225 x 225 for whatever reason and I cannot seem to override the WP template. I'm not a PHP expert, but from what I can tell from inspecting the image, it seems to have something to do with the template PHP code. Here is the code that is displaying the logo. Any thoughts to allow the image to display at full size would be helpful! Clearly there's something I'm missing.
<div class="site-branding">
<?php has_custom_logo() ? the_custom_logo() : ''; ?>
<div class="site-branding-text">
<?php if ( is_front_page() ) : ?>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<?php else : ?>
<p class="site-title"><?php bloginfo( 'name' ); ?></p>
<?php
endif;
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) : ?>
<p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
<?php
endif; ?>
</div><!-- .site-branding-text-->
Thanks!
max-width doesn't set the width of the image, it sets the max width it is allowed to resize to.
Use width: 100%; to set the width of your image to 100% of it's space.
img{
border: 1px solid black;
}
#div1 img{
max-width: 100%;
}
#div2 img{
width: 100%;
}
max-width: 100%
<div id="div1">
<img src="https://via.placeholder.com/150">
</div>
width: 100%
<div id="div2">
<img src="https://via.placeholder.com/150">
</div>
I have an portfolio webpage, my problem is how can I adjust the image position when the image is bigger and smaller, for example I have a image that is vertically long and I have a image that is only small. how do I make the long image to be position as top while keeping the small image as centered.
I used a acf image uploader
Source Code:
<?php if( get_field('image_thumbnail') ): ?>
<div class="image__thumbnails" style="background-image: url(<?php the_field('image_thumbnail'); ?>);background-position: top;background-size: 100%;background-repeat: no-repeat;"></div>
<!-- <img src="<?php the_field('image_thumbnail'); ?>" />-->
<?php endif; ?>
css
.image__thumbnails {
height: 212px;
}
you can try css property:
.image__thumbnails{
height:200px;
width:200px;
object-fit:cover;
}
also :
object-fit: contain,cover,fill, etc...;
.wrapper
{
display:flex;
/* align-items:center; this doesn't works in ie11 */
}
.wrapper > *
{
align-self:center; /* this works in ie11 */
}
I'd like to set a random background-image into a <div>Container</div>
To keep it simple I installed a plugin using [shortcode] to display random images. This works fine.
How to get the shortcode [wp-image-refresh] working together with background-image:url(...)
I tried it even as inline-style with no result.
This is what I have:
HTML
<div class="header_random-image">
<div id="hero"></div>
</div>
CSS
#hero {
background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>');
background-size: cover;
background-position: 50% 30%;
height:70vh;
width: 100%;
margin-top: -65px;
}
Another try with no result: Inline-style
<div class="header_random-image">
<div style="background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>')"></div>
</div>
Could anybody be so kind to help? Or does anybody has a simple solution to place div-random-background-images?
Best from Berlin
In most cases your CSS code will be served in a static file, thus the php code won't execute.
As the inline example doesn't work either, I guess the short code does not return an image url but a full image tag instead. The plugin's description
confirms this assumption. WP-IMAGE-REFRESH
You could try this:
PHP
<div class="header_random-image">
<?php echo do_shortcode("[wp-image-refresh class='hero_class']"); ?>
</div>
CSS
.header_random-image {
overflow: hidden;
}
.hero_class {
height: 100%;
width: auto;
margin-top: 0;
}
This should display the image. You'd still have to center it if you want (use flex-box) and check for problems caused on different screen sizes depending on the side ratio of your uploaded images and solve them with some Javascript.
Alternative
Use ACF Pro and add a gallery field to your posts/pages or an option page if you want the same images on all views.
PHP
<?php
$images = get_field('name-of-your-gallery-field');
shuffle($images);
$imageUrl = images[0]['url'];
<div class="header_random-image">
<div style="background-image: url('<?= $imageUrl ?>"); ?>')"></div>
</div>
In my page.php I am trying to output the featured image in .page-wrapper div and display using style="background-image: url('<?php echo $thumb['0'];?>') !important;" on top of the page (Inline css)
The problem is it keeps on being crossed out by the browser. It may be because there is a 3rd party plugin and that could be overriding it - so I've tried adding !important tag to my property. Not working. And I'm disabled the plugin, no luck. IDEAS??
Link to page: http://radian3.com/events/
Here is the page.php
<div class="about-container">
<!-- The POST LOOP -->
<?php if(have_posts()) :
while (have_posts()) : the_post(); ?>
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<div class="page-wrapper" style="background-image: url('<?php echo $thumb['0'];?>') !important;">
<b class="about-title"><?php the_title(); ?></b>
<!-- <div class="about-icon-wrapper" style="background-image: url('<?php echo $thumb['0'];?>')"></div> -->
</div>
<div class="contact-body-wrapper">
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php else :
echo '<p>No content found..</p>';
endif;
?>
CSS
/* single.php page */
.page-wrapper {
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
/* background-image: url('../img/about-our-team.jpg') !important;
*/ height: 30rem;
background-repeat: no-repeat;
background-size: cover;
}
Actually, its your code in page.php that's doing the overriding.
The image you see crossed out id included in your css file, the one with the emply url the one generated by your code.
Your code isn't returning any image, so you need to fix that. Unless you have $post explicitly defined, it wont have a value here, so $post->ID will be empty.
You should use get_the_ID() inside the loop, i.e.
<?php
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), 'full' );
if ($thumb){
?>
<div class="page-wrapper" style="background-image: url('<?php echo $thumb['0'];?>')">
<?php
// rest of your code....
}
FYI, you should also check to make sure $thumb has a value - if it doesn't, you could use a default placeholder instead
You need to remove inline style attribute which sets no image to it but it is overriding css for background image url for page-wrapper
You need to remove the following attribute from page-wrapper div.
style="background-image: url('') !important;"
Please give like this
background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");