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('slide1_background');?>);">
<div class="slide1-cont"><p class="slide-text"><h1>
<?php the_field('slide_title'); ?></h1><img src="<?php bloginfo('template_directory')?>/images/line.png" /></p>
<p><?php the_field('slide_content'); ?></p></div>
</div>
CSS:
.slide1{
background-repeat:no-repeat;
background-size:cover;
background-position:center;
height: 800px;
}
Not sure if this is the real problem, but I think you're missing some quotes, it should all look like this:
<div class="slide1" style="background-image: url('<?php the_field('slide1_background'); ?>');">
Go by all your codes to see if anything else like quotes is missing and please let me know if it worked or not.
Related
I'm working on a WordPress site where I use the WordPress Events Manager plugin to display events. When the client creates a new event I use the WordPress featured image option as the main image (the_post_thumbnail();). The problem I got is that the images that the client uses are quite large and sometimes they are too big, so I added a max-height to the feature image, but now the images can get a bit distorted when I "cut" them of in the middle. So I thought "Let's make them to a background-image" But I am struggling to do so in PHP. This is what I've got:
<div class="event_img" style="background-image:url('<?php the_post_thumbnail(); ?>');">
</div>
But this doesn't do anything on the custom page template that I use to display a single event.
Since WordPress 4.4, there's an efficient core function that can handle this in a cleaner way than the answers here.
You can use the_post_thumbnail_url( $size ) which will print the URL of the post thumbnail.
Alternatively if you want to return the URL instead of immediately output it, you can use $url = get_the_post_thumbnail_url( $size );
please see this link https://developer.wordpress.org/reference/functions/get_the_post_thumbnail_url/
Perhaps it will help you.
So I got it working like this:
I had done it without echo
<div style="background-image: url('<?php echo get_the_post_thumbnail_url(); ?>'); width: 100%; height: 100%; background-position: center;">
</div>
I'm working on a Gallery Web page and I have different size images stored in local server. What I want is to make my gallery look like this. Simply saying I want to keep Division size same for all image sizes. Also image should cover whole area.
What I tried
I suppose to use PHP to get image locations and do this task. So I'll paste PHP file.
<?php
$itemNum =$_POST["itemNum"] ;
$folderName = $_POST["folderName"];
echo '<div class="col-md-4 mix category-a" style="margin:10px;height:300px;width:400px">
<div class="single-portfolio" style="height:300px;width:400px;overflow: hidden;">
<a class="gallery-item" href="gallery/'.$folderName.'/'.$itemNum.'.jpg"><img class="img-responsive" src="gallery/'.$folderName.'/'.$itemNum.'.jpg" alt="One" /></a>
</div>
</div>';
die();
?>?>
My Problem
This code doesn't do what I want. I tried every way I know to make this possible. Can someone help me to get what I want? Thanks.
EDIT:
This is what I got. Can see that size changes according to image size
Set max-height and max-width of div and also fix height of image :
<div class="single-portfolio" style="max-height:300px;max-width:400px;overflow: hidden;">
<img style="height:300px;width:400px;" class="img-responsive" src="gallery/'.$folderName.'/'.$itemNum.'.jpg" alt="One" />
All you have to do is playing with css and its so easy to apply. You have fixed height of image and that is 400px.
So css for the div will be
.category-a {
height: 400px;
}
.img-responsive {
display: block;
max-width: 90%;
max-height: 400px;
margin: 0 auto;
}
And your HTML will be like this. Please don't apply inline css as its always bad practice to use like this. instead use class.
<div class="col-md-4 mix category-a">
<div class="single-portfolio">
<a class="gallery-item" href="gallery/'.$folderName.'/'.$itemNum.'.jpg"><img class="img-responsive" src="gallery/'.$folderName.'/'.$itemNum.'.jpg" alt="One" /></a>
</div>
</div>
I'm building a Wordpress template (using PHP).
My basic page setup:
Nav bar at the top (not fixed there; disappears upon scroll)
100% width picture w/ text typed over it (hence why I'm using a background image)
The rest of the content
My problem is when I try to resize the height of the window (make it smaller), the picture collapses, and leaves the words over it kind of out in space. How can I code this to make the background image shrink to contain the words, then stop shrinking when it gets there? (Image included at the bottom).
Here's my HTML:
<!-- div w/ BG image -->
<div id="introParagraph" class="m-b-2 p-y-2">
<h1 class="text-xs-left col-xs-10 col-md-offset-1 m-b-1">Our <br> approach</h1>
<!-- Inner div that styles a paragraph inside pic -->
<div class="col-md-3 col-md-offset-1 col-xs-6 m-t-1">
<h3 class="text-xs-left" id="question">How we help you figure out what works for you and your business. <br><br> Click on the icons to learn more. </h3>
</div>
</div>
And here's my CSS:
/******** MEDIA QUERIES *********/
#media (min-width: 650px){
#introParagraph{
background: url("../img/approach.png");
background-size: cover;
background-position: center;
min-height: 45%;
}
Finally here's the full code with PHP:
<!--------------- Approach Intro -------------------->
<div id="introParagraph" class="m-b-2 p-y-2">
<?php
if (have_rows('approach_introduction')):while(have_rows('approach_introduction')):the_row();
?>
<h1 class="text-xs-left col-xs-10 col-md-offset-1 m-b-1">
<?php
the_sub_field('page_header');
?>
</h1>
<div class="col-md-3 col-md-offset-1 col-xs-6 m-t-1">
<h3 class="text-xs-left" id="question">
<?php
the_sub_field('page_description_paragraph');
?>
<br><br> Click on the icons to learn more. </h3>
</div>
<?php endwhile;
else :
// no rows found
endif;
?>
</div>
IMAGE TO SEE WHAT'S GOING ON:
IMAGE TO SHOW WHAT IT LOOKS LIKE ONLOAD, WITHOUT SCROLLING DOWN (Except I want the horizontal nav in the white space above the big picture):
Brandon, I think you want to set that inner div to position absolute and play around with it from there. You should set an ID for the inner div and then give it some attributes in your external css, including that position: absolute I mentioned. Make sure to add, position:relative; to your introParagraph div as well.
CSS
header.site-header .wrap {
background: url(http://jadeluxurycondos.com/jadeluxurycondos-new/wp-content/uploads/2014/04/header-banner.jpg) right top no-repeat;
}
This is what I am working with.
Any insight would be grateful.
Here is the home.php code.
You cannot do this using CSS.
What you've done here is just passed the URL for the background.
If you want to add a link to the image, you can do this either by using a pair of anchor tags.
EG:
Add this in your HTML :
<a href='#'>
<img src="...." />
</a>
OR by adding a click event on to the div.
EG:
$(document).ready(function(){
$('header.site-header .wrap').click(function(){
window.location.href = "Link";
});
});
You could do something simpler:
<div>
<a href="#your-link" target="_blank">
<img src="http://jadeluxurycondos.com/jadeluxurycondos-new/wp-content/uploads/2014/04/header-banner.jpg" width="740px" height="104px" alt="Some other title" title="Some title" />
</a>
</div>
This creates a link that is an image.
EDIT after more info came to light.
From what I've gathered so far... you're using the "Open Floor Plan" Theme for Wordpress. (Maybe ask them for support? After all you paid for a theme.)
The simple method and recommended:
That theme appears to have a widget position at the top right. Why not use that to add your banner-link?
The hard-way hacking not-recommended method:
In wordpress you can edit the theme files (not recommended) by going to Appearance then Editor. This will open up the theme editor view and on the right side you'll see all the files of the currently active theme. You then could search those files for the HTML tag and add the above modifications.
The file that could have what you're looking for could be the header.php or index.php, but if it isn't there just sift through the other files until you find it.
The html markup would look something like this:
<header class="site-header">
<div class="wrap">
It will contain more stuff in here...
</div>
</header>
It will probably contain a lot more classes and PHP code...
The Widget Method
Add your banner code in a Text widget. You can add the CSS styling in-line, so that you won't have to upload anything else.
Add the CSS property for the parent container:
<style>header.site-header .wrap { position:relative; }
Then add the CSS for your element:
.mybanner { position:absolute; top:0; right:0; z-index:1; }
/* the widget with the social icons will probably need z-index aswell */
.CLASS-of-other-widget { position:relative; z-index:2; }
</style>
Now add your HTML code:
<div class="mybanner">
<a href="#your-link" target="_blank">
<img src="http://jadeluxurycondos.com/jadeluxurycondos-new/wp-content/uploads/2014/04/header-banner.jpg" width="740px" height="104px" alt="Some other title" title="Some title" />
</a>
</div>
Please note that with the z-index, the other widget will cover the banner and the ability to click it. You could simply use another position for that widget and just have the banner there.
Hi all and thank you for the help.
I have found a solution. I left the image on the BG, then added a widget to the top right of the page where the image (banner sits), then added a text box to the widget area and added this
<div class="topbanner" onclick="window.location='http://jadeluxurycondos.com/jadeluxurycondos-new/jade-signature/'" style=" height: 102px;left: 37.5%;position: absolute;top: 0; margin-top: 32px;width: 585px;cursor: pointer;"><div>
The image appears to be clickable. Check here to see it in action.
I'm by no means an expert, but I manage to get by, more or less.
I have created a "box" on my website with a specific size.
Lets just call it
<div class="newsbox" style="size, width etc.">
Inside that class, I have placed an image like this (the $this-getThemePath is CMS-specific):
<div class="image" style="position:fixed; top:15%; left:20%; padding-top: 3px; padding-left:3px; float:left;">
<img src="<?php echo $this->getThemePath()?>/images/postit_today.png"></div>
After that, I have a loop writing out content from my database like this:
<div class="newsstyling" style="font-size: 16px;"><?php echo nl2br($news .= "\n");?></div>
Lastly, I close the -tag for my "newsbox"
In my, admittedly newbie, mind, any text being written out via the loop, should float around the image above. It doesn't. It ignores the image and writes the text underneath it.
Any tips, hints, links or guides would be deeply appreciated.
Thanks,
Thomas
that's because you're using position:fixed , positioned elements are outside the normal flow of a web page, try this instead:
<img style="float:left" /><div>my text, foo, bar, etc.....</div>
change
<img src="<?php echo $this->getThemePath()?>/images/postit_today.png">
to
<img src="<?php echo $this->getThemePath()?>/images/postit_today.png" style="float:right" hspace=10 vspace=10>