I'm attempting to build a theme in wordpress, but cannot figure out how to make the background image resize when resizing my browser window. When I get the image and set it to 'full', or any of the other preset sizes, I does not resize:
In my front-page-php:
<?php
// check if the post or page has a Featured Image assigned to it.
if ( has_post_thumbnail() ) {
// the_post_thumbnail();
$backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<header id="hero" style="background: url('<?php echo $backgroundImg[0]; ?>') no-repeat center center fixed;"></header>
<?php }
?>
and in my css file:
header {
max-width: 100vw;
height: 95vh;
background-size: cover;
}
And it just simply stays the same.. So thankful for any help!
There's an easier way to get the post's thumbnail url. Also, it'd be better to set the background-image property in the style attribute:
<?php
// check if the post or page has a Featured Image assigned to it.
if ( has_post_thumbnail() ) {
// the_post_thumbnail();
$backgroundImg = get_the_post_thumbnail_url($post->ID, 'full'); ?>
<header id="hero" style="background-image: url('<?= $backgroundImg; ?>');"></header>
<?php }
?>
& the CSS should be:
header {
max-width: 100vw;
height: 95vh;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
Related
I'm using the following code to display a featured image in WordPress. It's working correctly, but I am struggling with get_the_title() to display the title of the post within the image and have that adjust correctly when being responsive.
echo '<img src="'.wp_get_attachment_url( get_post_thumbnail_id() ).'" style="width:100%; height:auto;">';
You can make the image as a background in a div and place the title inside.
// you can use get_the_ID() or $post->ID to get the ID of the post
$featured_img_url = get_the_post_thumbnail_url($post->ID, 'full');
<div class="wrapper" style="background-image: url(<?php echo $featured_img_url;?>);">
<h2 class="the-title"><?php echo the_title(); ?></h2>
</div>
// Add this to your css
.wrapper{
position: relative;
height: 200px;
width: 200px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
// This will center the text inside
.the-title{
position: absolute;
top: 0;
bottom: 0;
text-align: center;
}
How can I add text over images on wordpress. I am using the Sydney theme and in the customization area and using the wp display images plugin , I managed to assign a single image per each page, is there anyway that I can also add text over these images?
I dont have access to the editor on the appearance section. is not possible to add this text to the images using just the CSS?
This is the code for displaying image below the header. You need to modify this code if you want add a text. Without changing this code you do cannot do.
Are you able to see the code in editor in admin panel?
<div class="sydney-hero-area">
<?php sydney_slider_template(); ?>
<div class="header-image">
<?php sydney_header_overlay(); ?>
<img class="header-inner" src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>">
</div>
<?php sydney_header_video(); ?>
<?php do_action('sydney_inside_hero'); ?>
</div>
Try this style
.page-id-10 .header-image:before {
content: 'onze-klanten';
}
.page-id-8 .header-image:before {
content: 'werken-bij';
}
.page-id-206 .header-image:before {
content: 'Wie zijn wij';
}
.header-image:before {
display: block;
padding-top: 25%;
font-size: 45px;
text-align: center;
color: #fff;
}
.header-image {
position: relative;
}
Following is the code for displaying 4 posts in one row
<?php
$new_loop = new WP_Query( array(
'post_type' => 'article-form',
'posts_per_page' => 4 // put number of posts that you'd like to display
) );
<?php if ( $new_loop->have_posts() ) : ?>
<?php while ( $new_loop->have_posts() ) : $new_loop- >the_post(); ?>
<div class="col span_1_of_4 " id="recent">
<a href="<?php the_permalink();?>"><?php if ( has_post_thumbnail()) {
the_post_thumbnail('small-image',array('class' => 'img-responsive')); }?>
<span class="title-caption"><?php the_title(); ?></span></a>
</div>
<?php endwhile;?>
<?php else: ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
i want an image slider when the screen is 480px and these 4 image post can be displayed in that slider.
This is more an HTML/JS question than a Wordpress question.
Try doing something like this:
.slider { // Create wrapper for slider
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
.slider-item img {
// Styling for when viewport is smaller than 480px;
}
#media(min-width: 480px) {
.slider-item img {
// Styling for when viewport is bigger than 480px;
}
}
<div class="slider">
// Start loop
<div class="slider-item">
// Load induvidial image here
</div>
</div>
You can add some JS later to let it all scroll and stuff.
I'm currently displaying a users profile picture in php and if they click on it, then it takes them through to their own profile. The image displays correctly and the link works, but the area of the link extends way beyond the picture and over a link nearby. How would I go about reducing the area of the anchor?
<?php } if ($searchuser == $username)
{ ?>
<a href="profile.php">
<?php } ?>
<div style="background-image: url('<?php echo $profilepic; ?> ')" class="user-pic"></div>
<?php if ($searchuser == $username)
{?>
</a>
div.user-pic {
margin: 0 auto;
width: 125px;
height: 125px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border: 0.09em solid white;
position: relative;
top: -60px;
padding: 0px;
z-index: -100;
}
Try with this:
php
<?php }
$show_user_link = false;
if ($searchuser == $username) {
$show_user_link = true;
}
?>
<div style="background-image: url('<?php echo $profilepic; ?>')" class="user-pic">
<?php if( $show_user_link ): ?>
<a class="user-link" href="profile.php">
</a>
<?php endif; ?>
</div>
css
div.user-pic {
position: relative;
}
a.user-link {
height: 125px;
width: 100%;
}
You put the anchor in within the div tag and then you could make div's position relative and anchor's width to 100%.
PS: You could try to use something like
<?php if(true): ?>
<strong> some html </strong>
<?php endif; ?>
when mixing php and html to make your code more readable.
--- EDIT
Ok, I understand, see if the new code is more helpfull now, the only thing I think that could go wrong is the height of the anchor in case it isnt fixed to 125px, say me if you have problems with it.
I am trying to get the next/prev links at the bottom of my blog to show up with just images. I have the positioning and the links set up correctly with the images that I want to use as well. The problem is though that the links are only working on the text that I used from the original code. I have the image that I want to use set up as the background of the div. I can not figure out how to make the image a link and delete the text.
Link to blog:
http://www.conutant.org/test-box/
What is have inside my PHP:
<div id="bottomnavigation">
<?php if($single) { ?>
<div class="nextprev">
<span class="prev"><?php previous_post('‹‹‹ %', 'PREVIOUS TUTORIAL', 'no', 'no'); ?></span>
<div id="homeicon"></div>
<span class="next"><?php next_post('% ›››', 'NEXT TUTORIAL', 'no', 'no'); ?></span>
</div>
<?php } ?>
</div>
And the CSS
.nextprev {
height: 100px;
}
.nextprev .prev {
float: left;
height: 100px;
width:200px;
background: url(http://www.conutant.org/wp-content/uploads/2012/12/Prev.png);
background-repeat: no-repeat;
background-position: left top;
margin-left: 19px;
}
.nextprev .next {
float: right;
height: 100px;
width:186px;
background: url(http://www.conutant.org/wp-content/uploads/2012/12/next.png);
background-repeat: no-repeat;
background-position: left top;
}
try with :
<div id="bottomnavigation">
<?php if($single) { ?>
<div class="nextprev">
<span class="prev"><img src="http://www.conutant.org/wp-content/uploads/2012/12/Prev.png" alt="<?php previous_post('‹‹‹ %', 'PREVIOUS TUTORIAL', 'no', 'no'); ?>" /></span>
<div id="homeicon"></div>
<span class="next"><img src="http://www.conutant.org/wp-content/uploads/2012/12/next.png" alt="<?php next_post('% ›››', 'NEXT TUTORIAL', 'no', 'no'); ?>"</span>
</div>
<?php } ?>
</div>
You don't need background in your css anymore
Apply the background image to the anchors, not to the spans.
.prev a {
float: left;
background: url(http://www.conutant.org/wp-content/uploads/2012/12/Prev.png);
}
.next a {
float: right;
background: url(http://www.conutant.org/wp-content/uploads/2012/12/next.png);
}
You also need to set the anchors as block elements:
.prev a,
.next a {
display:block;
}
And finally use text-indent: -9999px in order to hide text.