I am trying to set an image uploaded through custom fields plugin and have it display as the background of a div (which is used in a slider).
However the image is not displaying...I have text in the custom fields and that is showing okay so I think its something to do with the line of code I am using to pull in the image.
I am trying to set the background of .slide1 with the image.
The custom field name is slide1_background.
HTML:
<div class="slide1" style="background-image:url('<?php the_field('slide_bg1'); ?>');">
<div class="slide1-cont"><p class="slide-text">
<h1><?php the_field('slide_title1'); ?></h1>
<img src="<?php bloginfo('template_directory')?>/images/line.png" /></p>
<p><?php the_field('slide_content1'); ?></p></div>
</div>
CSS:
.slide1{
background-repeat:no-repeat;
background-size:cover;
background-position:center;
height: 800px;
}
Look at the difference in your code in your question, where you try to set the background-image, compared to the code in your comment in another answer where you're setting it as an image source.
the_field('slide_bg1') returns an array, so you're trying to set the background image source as a PHP array which gets converted to a string as "Array" so in your HTML it'll look like: background-image:url('Array')
You need to get the field first, then echo the url element of the returned array as the source of the background image:
$image = get_field( 'slide_bg1' );
if ( !empty( $image ) ) { ?>
<div class="slide1" style="background-image:url('<?php echo $image['url']; ?>');">
<?php }
Use echo
<div class="slide1" style="background-image:url('<?php echo the_field('slide_bg1'); ?>');">
Related
I know that in wordpress it is possible to use a featured image as the background of a div using the following code
background-image: url('<?php echo wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) ); ?>');
The question is: is there a way to use a secondary image as a background for this div?
I am using the Multiple Post Thumbnails plugin and I can display the secondary image with the code bellow
<?php
if (class_exists('MultiPostThumbnails')) :
MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image', NULL, 'secondary-featured-thumbnail');
endif;
?>
But is it possible to use this image as bakground?
I wanna something like this
I think what you are looking for is to get the URL of the secondary image, not the full post thumbnail.
In the documentation there is MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'secondary-image');
https://github.com/voceconnect/multi-post-thumbnails/wiki/Frequently-Asked-Questions
So then on your page, you can do (Not the nicest):
<?php
if (class_exists('MultiPostThumbnails')) :
image_url = MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'secondary-image');
?>
<style>
.myclass{
background-image: url('<?php echo image_url ?>');
}
</style>
<?php
endif;
?>
Or you can add that image_url to the html div container:
<div style="background-image: url('<?php echo image_url ?>');">
</div>
Depends on how you have it setup
I'm using this code.
<div class="bg-img1 size-a-3 how1 pos-relative" style="background-image: url();">
At this time how to get the post thumbnail url in background image?
The code should be like following,
<div class="bg-img1 size-a-3 how1 pos-relative" style="background-image: url(<?php the_post_thumbnail_url(); ?>);">
And if you want to get post thumbnail from a specific post/page using post ID it will be like following,
<div class="bg-img1 size-a-3 how1 pos-relative" style="background-image: url(<?php echo get_the_post_thumbnail_url($post_id); ?>);">
I'm trying to give a client some options in the WP backend to customize a carousel that is displayed on their website's homepage. I am using Advanced Custom Fields to handle getting the input from the client. I want to give them two options:
Option #1) Allows the client to insert a string of text to be displayed ('carousel_title_text')
Option #2) Allows the client to upload a logo to be displayed ('carousel_logo')
I want the code to check for title text, and if there is none, display the logo instead. I haven't yet decided what will happen if both fields are empty. Anyway, here is what I've come up with:
<?
if( get_field('carousel_title_text') ) { ?>
<h2 class="promo"><?php the_field('carousel_title_text');?></h2>
<? } elseif( get_field('carousel_logo') ) {
the_field('carousel_logo');
}
?>
The 'carousel_title_text' displays as long as there is an input, but when it's empty and 'carousel_logo' is not, it does not properly output the logo. Can anyone tell me what I'm doing wrong or if there's a better approach?
Thanks in advance,
If I get it right, your problem is not with the If/Else statement but with the logo field. I assume you properly configured this field (carousel_logo) as Image in ACF.
Image fields offer three different Return Value possibilities:
Note: In some versions of ACF you'll found Image Object instead of Image Array, but it's conceptually the same.
None of them will show your image properly if you just use the_field('carousel_logo'); in your template. So, how do you get your logo?
If you want the easiest solution, choose Image URL as Return Value for your logo field and print it like that:
<?
$title = get_field('carousel_title_text');
$logo = get_field('carousel_logo');
if (!empty($title)) : ?>
<h2 class="promo"><?= $title ?></h2>
<?php elseif (!empty($logo)) : ?>
<img class="logo" src="<?= $logo ?>">
<?php else: ?>
<!-- No title, no logo -->
<?php endif ?>
I've changed a little your code, but basically the key line here is:
<img class="logo" src="<?= $logo ?>">
This, or the equivalent:
<img class="logo" src="<?php echo $logo ?>">
should show your image when the title is missing.
Bonus: If you're handling different thumbnail sizes I'd recommend you to use Image Array as Return Value. In that case, $logo would be an Array containing all information (such as sizes, all thumbnail URLs, captions, etc.)
Use:
<img class="logo" src="<?= $logo['sizes']['medium'] ?>">
where 'medium' is your thumbnail size label to output it.
Also, please check official docs on ACF's Image field type for more examples and further explanations.
You have put else condition on last, that will default text will show if client will not Enter text ot logo.
you will used bellow code.
<?php
if( get_field('carousel_title_text') ) { ?>
<h2 class="promo"><?php the_field('carousel_title_text');?></h2>
<?php } elseif( get_field('carousel_logo') ) {
the_field('carousel_logo');
}else {
echo " <h2 class="promo"> Default slider title </h2>"
}?>
it's default title client indicate to he has not entered slider text
Hope it's work for you.
Try:
<?php
$output = (get_field('carousel_title_text')) ? get_field('carousel_title_text'):get_field('carousel_logo');
echo $output;
?>
This sounds like it's to do with the settings for the logo, which I'm assuming is an image field? In the Wordpress admin there will be a setting under that field called 'Return value' which can be set to either 'Array' or 'URL'.
If this is set to 'Array', you'd need to store that array to a variable and then access its properties in your markup like so:
<?php
if ( get_field('carousel_title_text') ) { ?>
<h2 class="promo"><?php the_field('carousel_title_text'); ?></h2>
<?php } else{
$carousel_logo = get_field('carousel_logo');
if ( $carousel_logo ) { ?>
<img src="<?php echo $carousel_logo['url']; ?>" />
<?php } else { ?>
<h2 class="promo">Default slider title </h2>
<?php }
}
?>
Alternatively, you could set your field to only return the image URL and then access it like so:
<?php
if ( get_field('carousel_title_text' ) { ?>
<h2 class="promo"><?php the_field('carousel_title_text'); ?></h2>
<?php } elseif ( $carousel_logo ) { ?>
<img src="<?php the_field('carousel_logo'); ?>" />
<?php } else { ?>
<h2 class="promo">Default slider title </h2>
<?php }
?>
ACF's documentation on the Image field will provide more info on this.
I am using 'Aqua Resizer' (aq_resizer.php) to resize my thumbnails on my Wordpress site. My posts are made from a loop in single.php with
<?php get_template_part( 'content', 'single' ); ?>
This pulls from content-single.php which has the code for my posts
HTML
<div id="post-<?php the_ID(); ?>" <?php post_class('col-md-12'); ?> >
<div>
<h2><?php the_title(); ?></h2>
<h3><?php the_category(', '); ?></h3>
<?php the_content(); ?>
</div>
<?php
$thumb = get_post_thumbnail_id();
$img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
$image = aq_resize( $img_url, 1200, 720, true ); //resize & crop the image
?>
<?php if($image) : ?>
<img class="img-responsive" src="<?php echo $image ?>"/>
<?php endif; ?>
</div><!-- /#post -->
Everything works fine (the resizer function works on the featured post which is brought in with <?php the_content(); ?>. The image scales up/down as the window resizes
The effect works because class="img-responsive" is applied to the featured-image of the post.
I have images in the content of the post. I want them to act the same way (right now they are just brought in at their original size) I need the class img-responsive to be applied to the images in <?php the_content(); ?>
Applying the CSS classes to images can be done from within the post itself, just edit the image and put CSS class img-responsive.
If you cannot edit/modify posts (or it is just too much work) then second option is to write a small code snippet in your theme's custom function.php file (this is true only when you display post in your loop):
<?php
the_post_thumbnail('thumbnail', array('class' => 'img-responsive'));
See https://codex.wordpress.org/Function_Reference/the_post_thumbnail for more details.
And the third option is to use jQuery in your header.php file, this way all images on page will get responsive class (however this may not be what you want, especially if you have backgrounds, logos, menu images, etc. and it will require JavaScript to be enabled in client's browser):
<script type="text/javascript">
jQuery(function() {
jQuery(img).addClass('img-responsive');
});
</script>
The last option I can think of, is by using pure CSS:
.content img { height: auto; max-width: 100%; }
Where .content is the area that contains your post content.
Note: You may also want to override the .wp-caption class as well like so.
.wp-caption { width: auto !important; }
I have little problem floating text and image in wordpress post. I want to have little space between text and picture. When I try to make it with merge or padding in css, It does nothing or text goes below pic. please help me, page url: http://uglt.org/new/?p=2224
see pic, how I want to be and how is it: http://i.stack.imgur.com/wNUxq.jpg
php code:
<?php if($image) : ?>
<img class="img-responsive singlepic" src="<?php echo $image ?>"/><div class="singu"><?php the_content(); ?></div>
<?php endif; ?>
<div class="entry-content">
By the way when I try to make these two class into one div It goes below too. Please help me, thank you in advance.
Try adding a padding-right to the image element.
Just use the css property:
margin-right:10px
for example, having the class:
.rightSpacing {
margin-right:10px
}
then you could use
<img class="img-responsive singlepic rightSpacing" src="<?php echo $image ?>"/>
use the number of pixels you might feel necessary, 10 is just an example.