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.
Related
I have a WP site and I am trying to achieve the following. I need on 3 different pages a separate image in the footer.
I did find an answer how to do it the following way placing this code in the footer:
<?php
if(is_page(4)):
?>
<div class="images"><img src="url-image-location" alt="alt info" class="img-responsive"></div>
<?php endif; ?>
The above way works great but i'm lost on how to add it for the another page. I tried just repeating the above code again and changing the page and image url but then I lose styling from the rest of footer.
So question is, how do I add it a second time?
Thanks
What about using elseif and just change the image path variable so you won't loose styling? i assume your css is written for class.
<?php
$image_path = "imagepath";
if (is_page(4)) {
$image_path = "imagepath-4";
}
else if (is_page(5)) {
$image_path = "imagepath-5";
}
else if (is_page(6)) {
$image_path = "imagepath-6";
}
?>
<div class="images"><img src="<?php echo $image_path?>" alt="alt info" class="img-responsive"></div>
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'); ?>');">
I'm trying to set a logo in an options panel for Wordpress, where there's the regular logo and the retina logo upload. I want it to work so if there's a retina logo uploaded, use that, but set to the regular logo size. If there is no retina logo but there is the regular logo, use that, otherwise use blog name. My issue is one of php conditionals that I can't quite seem to get right.
The following code produces two logos, the large and the small right now. The second line does properly produce a retinized logo. But I'm missing some kind of else statement? I did try php else in the second statement, but it produced errors.
<?php if (!empty($mandm['logo']['url'])) { ?> <div id="logo"><img src="<?php echo esc_url($mandm['logo']['url']); ?>" alt="<?php bloginfo('name');?>" />
<?php if(!empty($mandm['retina-logo']['url'])) {?> <img src="<?php echo esc_url($mandm['retina-logo']['url']);?>" class="retina-logo" style="max-height:<?php echo $mandm['logo']['height'];?>px" /> <?php } ?></div>
<?php } else { bloginfo('name'); } ?>
</a>
<?php endif; ?>
I'm trying to create a simple image gallery that displays thumbnails of uploaded images. Once a thumbnail is clicked, I would like to be directed to a page with the large version of the image, along with a comment section. So basically I'm trying to do something similar to deviantart. What I have now looks something like this:
<a href="<?php echo $image->large_image_path; ?>">
<img src="<?php echo $image->thumbnail_image_path; ?>"></a>
Clicking on a thumbnail will take to me to the large image path, which is not really what I want. Any help is greatly appreciated.
You must make the href="<?php echo $image->large_image_path; ?>" to somehing like href="show_image.php?image_path=<?php echo $image->large_image_path; ?>"
In show_image.php you can den get the path of the image by $_REQUEST['image_path'], and add it into the code like this:
<img src="<?php echo $_REQUEST['image_path']; ?> />
The you can add information or styling around the bigger image.
So, link to a PHP page instead of the image. Even better, put the image path in to a database, and use the image id to get the path and information of the image. Like this:
href="show_image.php?image_id=<?php echo $image->id; ?>"> and then in show_image.php, given that you have a method for getting the image:
<?php $image = GetImage($_REQUEST['image_id']); ?>
<img src="<?php echo $image->large_image_path; ?> />
<?php echo $image->description; ?>
<?php echo $image->date; ?>
Hope this helps you on the way.
I am using a wordpress theme that has a custom post type called "link" which simply produces a post where the title links to an outside link you specify. It also includes some text in the body of the post. I would like to also be able to display an image. Right now it is not showing the image.
Here is the code:
elseif ( has_post_format( 'link' )) {
if(get_post_meta($post->ID, '_format_link_url', true)!=''){
$link = get_post_meta($post->ID, '_format_link_url', true);
}else{
$link = '';
}
?>
<h2 class="entry-title">
<a href="<?php echo $link; ?>" target="_blank" title="Follow this link">
<?php the_title(); ?>
</a>
</h2>
<p>
Is there anything I can add to make it display an image as well as text?
Thanks!
I can't see anywhere on this example where you are using an tag to insert an image. The img tag has two required attributes, src and alt. Src is the path to your image, whereas alt is the alternate text for the image. So:
<img src="images/myImage.png" alt="This Is My Image"/>
Hope that helps!