I'm using php to display image(s) and accompanying text (This is done using a WHILE loop) See below:
While (true) {
echo "
<h2>$post_title</h2>
<img src ='new_images/$post_image' width='200' height='200'/> // Image
<div>$post_content</div> "; // Text
}
I have used CSS to float the image left. Therefore,the accompanying text appears to the right of the image.
However, the second image and accompanying text is NOT sitting below the first. It's trying to force itself into any space to the right of the first image
Can I use CSS to ensure the images are stacked??
I hope that above makes sense?
add clear:both to your images and it should work just fine
Related
Summary
I am trying to use the IMAP functions to fetch the email attachments. Also, I am trying to fetch the inline images and show them out to the screen by using <img> tag. In order not to occupy so much server space, I decided not to save those fetched inline images as files on the server and show them on the screen. My decision is that after fetching the content of one of the inline image, print it out by using echo function, then use <img> tag to show the printed content out one by one. The code may look like the following part:
Codes
show-inline-image.php
<?php
...(omit)...
echo $image_content; //The variable $image_content is the content of fetched inline image
?>
show-image.php
<?php
...(omit)...
echo "<img src='show-inline-image.php'>"; //Show the image
...(omit)...
?>
Though this way could print the inline images out successfully. But I am not sure whether it is alright to show the inline images in this way. Is there any other better ways to impove it?
P.S. The output result of show-inline-image.php may look like the image below:
I am running a while loop and generating a var called $features
while(blah) {
$features .= "<li><img src='/srv/sitename.com/htdocs/images/sid.gif'> $features_bullet_text</li>";
} // THIS LOOP WORKS FINE, PULLING CONTENT, IMAGE DOES NOT SHOW
Then I am putting this var inside the code below. The content being pulled works fine but the image does not display. The image marked below "IMAGE SHOWS UP" is there when the PDF is generated along with several others but for some reason the one I tacked on to the front of my <li> will not show up. Anyone have any suggestions?
It is not permissions, the file path is correct on the server but I need to generate this mysql/loop of <li>s prior to putting into this PDF. Hope this makes sense to someone.
$html = <<<EOF
PROPER HTML ABOVE
<!-- IMAGE SHOWS UP -->
<img src="/srv/sitename.com/htdocs/images/ordering_information.jpg">
<!-- IMAGE DOES NOT SHOW UP IN LI -->
<ul>
$features
</ul>
PROPER HTML BELOW
EOF;
All features working properly. Only the image inside the <li> will not show. Also I have tried using double quotes and escaping them and that did not work. Tried no quotes around image and currently have single quotes in place.
According to this page, the GD library may need to be installed to display GIF images.
If you can't install that, try replacing your GIF with a JPG or PNG and see if that solves things.
I have an ul with a li that cannot find a .PNG image associated with the list item 'li' in the code here:
$pngFilename= 'C:/xampp/htdocs/myProj/' . 'just_a.png';
echo 'pngFilename is "', $pngFilename, '" -- that was the .png image filename.';
// within a 'ul' is this li item that displays an image (the ul code is simplified
// to only show the item that (needs to but doesn't!) display a .PNG image.)
echo '<ul>';
echo '<li>';
echo '<a href="http://localhost/myProj/just_an.htm">';
echo '<img src="', $pngFilename, '"';
echo 'alt="http://localhost/myProj/the_other.png"';
// NOTE -- I left out the close /> to the img statement when I copied my code here but
// it was in fact in my source code.
echo '/>';
echo '</a>';
echo '</li>';
echo '</ul>';
Before I wrote the above php code, I tested just the raw html and it was fine -- my .PNG file called
C:/xampp/htdocs/myProj/just_a.png was displayed correctly.
But when I switched to php server-side generation of the html, the C:/xampp/htdocs/myProj/just_a.png image does not appear, only the 'cant find it' default small image appears that looks like a piece of paper torn horizontally.
Any ideas? The .png file exists and so does the directory and the html correctly displayed the image, but when I put the html into php 'echo' calls I must be screwing something up, just not sure what.
To make sure I have the correct path and filename you'll see I echo it out at the top of the code.
The php variable $pngFilename is displayed when I do 'View Source' in the browser as:
pngFilename is "C:/xampp/htdocs/myProj/just_a.png" -- that was the .png image filename.
The only other thing to mention is that the 'alt' link, the 'alt="http://localhost/myProj/the_other.png"' -- this link (not the image) shows as blue underlined link text.
Why did this work in my html but breaks when I use the 'echo' in php? After all, the 'echo' simply sends the html to the client side -- and that .png file is 100% definitely there and displays fine when I run the above html outside of php's "echo" command.
This is because the path to the image changes depending on how your viewing the page. in a local context or from a server context; and since you are using an absolute path instead of a Relative path the system can't adjust for the change in the location of the image. Unlike when using a PHP function that calls on the php file system functions that do use the internal file system. what your doing is having it send a text file to the browser which isn't rendered as HTML code until after PHP has finished. because of that it has no access to the php file system to resolve the path to the image on the server. the way to fix it would be to use the path to the image Relative to the PHP script or use the web accessible path to the image
$pngFilename= 'C:/xampp/htdocs/myProj/' . 'just_a.png';
Should for example be
$pngFilename= 'http://localhost/myProj/' . 'just_a.png';
or if the image and the php file are in the same directory you could just do
$pngFilename= 'just_a.png';
You should try to close your img tag:
echo '<img src="', $pngFilename, '"';
echo 'alt="http://localhost/myProj/the_other.png">';
You are generating a image tag like:
<img src="C:/xampp/htdocs/myProj/just_a.png" alt="http://localhost/myProj/the_other.png" />
You cannot use this path, you need to change it to http://localhost/myProj/just_a.png or something like file:///C:/xampp/htdocs/myProj/just_a.png.
I have an interesting question, or atleast I think it is.
I have this website http://21-card-games.com/best/casino-reviews/casino-casino-titan.asp. You will see the image and below it the content.
Is it possible to combine the image with the text and left align the image and make the text flow next to the image.
The pages are all dynamically created, The content on the page is a variable that I import from a mysql db...
Here is some of the coding:
<div id="yui-main"><div class="yui-b"><?php echo $g_page_content2 ?><br />
<?php include($_SERVER['DOCUMENT_ROOT'].'/includes/standard_images_screenshot_1.php');?><?php echo $g_content_text1 ?>
<?php /* This is the second banner for this page */ include($_SERVER['DOCUMENT_ROOT'].'/includes/banners/'.$row_rs_settings['g_sites_affiliate_ads2'].'.php');?></div>
The $g_content_text1 is the variable that pulls in the text, and the '/includes/standard_images_screenshot_1.php' is the image. The include image file is part of a script that creates the image on the fly (imagick).
However this is more or less what I where thinking:
to create a regex that replaces the first occurance of <p> with this include($_SERVER['DOCUMENT_ROOT'].'/includes/banners/'.$row_rs_settings['g_sites_affiliate_ads2'].'.php' but I am not sure if the php will still execute if I do that...
Any ideas on how I can accomplish this would be appreciated.
I don't get it.
Why you want to create a regexp to let the text flow on the left of the image?
This is a css issue.
Just add float:left to the image.
i have problem in displaying an image in textarea
please help me to solve it
thanks
Textareas can only hold plain text. Use contenteditable or a fully functional editor, like TinyMCE to save you the troubles.
As anothershrubery already mentioned, textarea can only hold plain text.
You can instead use a div element with the contenteditable attribute set to true.
<div contenteditable="true">
You can edit this text and also add images! <img src="smiley.jpg" alt=":)" />
</div>
There are also many different JavaScript WYSIWYG editors which uses the above method or an iframe in designmode.
Here's a couple of them:
Aloha Editor
MarkItUp
TinyMCE
Lightweight RTE
CKEditor
You cannot display images in a textarea. Textarea's just accept plain text.
Textarea support text only, if you want to display image/ link or any thing else, use WYSIWYG HTML Editor
You can try this, a really good one ;)
http://premiumsoftware.net/cleditor/
You can try this:
HTML:
<div id="image_txtarea" style="width:auto">
<img src="image/Example.jpg" id="image" style="position:absolute"/>
<textarea id="some" style="position:absolute;display:none"></textarea>
</div>
JQUERY
$('#image').click(function(){
var img = $('#image');
$(this).hide().next('textarea').show().css({'background':'url('+ img.attr('src') +') no-repeat center center','width':img.width(),'height':img.height()});
});
The answer is yes, image can be placed in textarea.
I placed an animated gif in textarea (worked in ie-6 and ff-13.0.1) with this technique:
Convert any image into a base64 string. (free online converters available, there is a limit to the base 64 file size - around 30k image size); a simple url() background statement did not show image for me.
The online converters usually output both an <img> tag and a CSS background property with the correct values from the uploaded image. Just copy and paste the CSS output into your own file. use url data statement - url(data:image/ext.....)
use the base64 css as a background in the style statement.
to change images, you'll have to change div id="" or class where you have base 64 defined as background-image in the class or id.
time consuming to do conversions so make sure that you really want an image in a textarea before you start.