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>
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 am new to web dev, so please bear with me. I have to create a block with a set of images like this:
I tried using a table to do this, but the image propotions of the last columns aren't correct. I believe that coz of the height of the rows. I managed to get the center image correctly by using rowspan. I looked up numerous tutorials online but couldn't find one where the middle image is like this. I tried using li too. But failed. This is the code of the table I have
<table class="home" align="center">
<tr>
<td><img src="http://localhost/sty_partners/img/main_top_left.jpg" alt="" class="img-responsive center-block" >
</td>
<td rowspan ="2"><img src="http://localhost/sty_partners/img/main_center.jpg" alt="" class="img-responsive center-block">
<!--<div class="center" > <p> SPEND MORE <br> time doing what <br> you love</p> </div>-->
</td>
<td><img src="http://localhost/sty_partners/img/main_top_right.jpg" alt="" class="img-responsive center-block"></td>
</tr>
<tr>
<td><img src="http://localhost/sty_partners/img/main_bottom_left.jpg" alt="" class="img-responsive center-block"></td>
<td><img src="http://localhost/sty_partners/img/main_bottom_right.jpg" alt="" class="img-responsive center-block"></td>
</tr>
</table>
This is the CSS for the table:
table.home img{
width:100%; height:100%;}
Can someone please tell me what to do?
You should use the bootstrap grid system for this.
http://getbootstrap.com/css/#grid
You'll probably need to add some custom css classes to adjust the padding the way you want and to make all columns the same height. Lots of tutorials online for this (do a quick google search).
You should be able to do most of this with Bootstrap columns alone. If you're unfamiliar with the grid system or need clarification, I would go to W3C: http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp.
If that alone won't work, you'll probably need to use your own CSS as well. W3C has great info on CSS as well:http://www.w3schools.com/css/default.asp. Without further details I can't tell you much else. Perhaps using the background-image property would work?
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.
I am trying to achieve a custom layout for my featured article page on Joomla in order to make a nice blog layout with my custom design made on Photoshop.
This is the look I am trying to achieve: http://i48.tinypic.com/2ztbx54.png
This is the look I am getting at the moment: http://i49.tinypic.com/1ibn5w.png
Rest of the layout would not be a problem since it's pretty easily modifiable, however, the problem where I am stuck at the moment is the intro image. I want it to be on the left from the article title, some information and intro text like shown in the first image.
Is it possible to extract the image out of intro text in order to place it where needed?
Help will be appreciated, thanks!
Firstly, my comment was just a joke.
Now, for the question: your image is sitting in the div item column-1 when it should be sitting in the the div above that (the container of item column-1) which is items-row cols-1 row-0.
So this:
<img src="/images/Articles/macbookpro-review-01-top.jpg" width="200" height="200" alt="macbookpro-review-01-top" style="float: left;">
Cannot go in <div class="items-row cols-1 row-0"> or <dl class="article-info"> which is what you are currently doing.
It needs to be sitting in the outer div. So it should be in <div class="items-row cols-1 row-0">. So like this:
<div class="items-row cols-1 row-0">
<img src="/images/Articles/macbookpro-review-01-top.jpg" width="200" height="200" alt="macbookpro-review-01-top" style="float: left;">
//...and the rest of your stuff
In your css file add the following code to get you started off:
.article-info {
float:right;
}
h2 {
text-align: right;
}
.item.column-1 img {
margin-top: -50px;
}
.article-info-term {
padding-left: 40px;
}
Also, take away the margin: 0px; you have added to the images.
This is what the result will be:
http://i735.photobucket.com/albums/ww355/lodder16/stack_image.png
Hope this helps