How to Autoload & Display Images in View (Codeigniter) - php

I am a newbie to codeigniter framework. I have created a PHP slider that load images automatically, it works fine in PHP only. Now I used codeigniter, the PHP code does not work well, just can't read the images in a folder.
PHP code:
<div class="slider-wrapper">
<div id="slider" class="phpSlider">
<?php $dir_handle='./slider/images/';
foreach(array_diff(scandir($dir_handle), array( '.', '..')) as $file) {
echo '<img src="./slider/images/'.$file. '" />';
}
?>
</div>
</div>
the code works fine without codeigniter. It reads all images in a specific folder "images" under "slider" folder. And the code when run on browser looks like below:
<div class="slider-wrapper">
<div id="slider" class="phpSlider">
<img src="slider/images/banner1.jpg">
<img src="slider/images/banner2.jpg">
<img src="slider/images/banner3.jpg">
<img src="slider/images/banner4.jpg">
<img src="slider/images/banner5.jpg">
</div>
</div>

It is looking like a path issue. Please use base_url() with img src. where base_url() is your project directory url where your index.php file exist.
echo '<img src="'.base_url().'path/to/images/'.$file. '" />';

Changing the folder path to absolute URL solved the problem.

Related

Image not showing when using PHP to link to SRC

Trying to use php to link to an image in a different folder than the file I am currently in but the image isn't showing.
Here's the path file:
<?php
if (!defined("ROOT_PATH")) define ("ROOT_PATH", realpath(dirname(__FILE__)));
if (!defined("BASE_URL")) define ("BASE_URL", "http://localhost/stnresp");
?>
Here's the code I am using at the moment:
<div class="logo-image">
<img class="header-logo" src="<?php echo ROOT_PATH . '/assets/images/stn-logo-cropped.png'; ?>" alt="">
</div>
I can't understand why the root path isn't taking the link to the root directory and then through to the image? What am I missing?
Thanks
realpath defines the physical path of the file, instead the src attribute of the image needs url path.
In your case you have to use BASE_URL instead of ROOT_PATH:
<div class="logo-image">
<img class="header-logo" src="<?php echo BASE_URL . '/assets/images/stn-logo-cropped.png'; ?>" alt="">
</div>

Problem in access image file from outside of script folder

Problem: Hard to synchronise image between 2 folder
My project has 2 image folder:
Home/user/public_html/image
Home/user/m.fruit.com/image
public_html serves the main page for desktop version
m.fruit.com serves the mobile page
Both version serves the same images.
When I have new fruit image, I need to put it into both folder. This becomes double work...
my way of accessing image for desktop version is: (index.php in public_html folder)
<img id="image" src="image/<?php echo $image; ?>.jpg">
my way of accessing image for mobile version is: (index.php in m.fruit.com folder)
<img id="image" src="image/<?php echo $image; ?>.jpg">
For mobile version, I did try to access image in public_html so that I don't need 2 image folder. But it seems like not possible:
<img id="image" src="public_html/image/<?php echo $image; ?>.jpg">
Is there any way to use only 1 image folder to serves these 2 version of website instead of 2 in this case?
Other better solution also welcomed.
First, you can set base URL: like
define('BASE_URL', 'http://example.com/');
then set image src:
<img src="<?php echo BASE_URL ?>image/imagename.jpg ">
or create a helper function:
PHP CODE
function asset(path){
return BASE_URL . path;
}
HTML CODE:
<img src="<?php echo asset('image/imagename.jpg'); ?> ">
This will work on both sides.
Try to change the image url scheme with this
<?php echo "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; ?>
define base_url();
define('base_url', 'http://Home/user');
and then call this base url where you want show image.
<img id="image" src="image/<?php echo base_url('/public_html/').$image; ?>">

Wordpress logo image in header.php

I'm trying to create a custom theme in Wordpress, and currently I'm working on my header.php file. However, I'm unable to display my logo image. Here's the code for the same:
<body>
<div class = "container">
<div class = "five columns">
<img src = "<?php bloginfo('template_url'); ?>/img/sem.jpg" title = "<?php bloginfo('title'); ?>">
</div>
</div>
</body>
The sem.jpg image is stored inside the img folder inside my root project directory. However, the logo doesn't seem to be displayed on my webpage. I have also tried using images of other formats, but none of them seems to work. I have also called the get_header() function inside my index.php.
What seems to be wrong in my code?
The reason seems a permissions problem.
You can set permission 777 to the logo image via command line, typyng:
chmod 777 /path_to_your_file
or set using right click on the logo file, and change properties.
You can't view your image because you have got set wrong permissions on your image. Open your FTP client, connect to your site and find your image, right click it and chosse Change file permissions and change them to 644.
File permissions should look like this:
http://s12.postimg.org/rxb25ziy5/Untitled.png
Try This.
<body <?php body_class(); ?>>
<div class = "container">
<div class = "five columns">
<img src="<?php echo get_template_directory_uri(); ?>/img/sem.jpg" alt="<?php bloginfo('title'); ?" />
</div>
</div>
</body>
Enjoy..!!
user this wordpress plugin
it will help yo upload logo using wordpress admin and you can change any time with edit header.php file.
Use below function to print logo
echo theme_logo();

How to correctly use get_template_directory_uri() WordPress function to load an image that is in a subfolder of my theme?

I am pretty new in WordPress and I have the following doubt about how to insert in my homepage an immage that is in a subfolder into my theme directory.
So I have the following situation: Into my custom theme directory I have the following folder that contains a jpg immage: /assets/img/flexslider/flex-1.jpg
Now in my header.php file I have something like this:
<li>
<img src="assets/img/flexslider/flex-1.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
Obviously, when I load the page, the immage flex-1.jpg is not loaded because there is not the right path (infact using FireBug I obtain that it try to load the assets/img/flexslider/flex-1.jpg immage) so I think that I could use the absolute path but this is pretty orrible !!!
So I am thinking to use the get_template_directory_uri() function provided from WP to do this and I have try to change the previous code in this way:
<li>
<img src=<?php get_template_directory_uri().'/assets/img/flexslider/flex-1.jpg' ?>>
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
But don't work and using FireBug I can see that load nothing, infact in my brower source code I have:
<img src="">
Why don't work? What am I missing?
Tnx
Andrea
I hope it will work:
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/flexslider/flex-1.jpg" />
If your assets folder inside theme.
please try :
<img src="<?php print(get_template_directory_uri()); ?>/assets/img/flexslider/flex-1.jpg" />
just check for slash, if double before "assests", remove static one.
You can also use:
<img src="<?php bloginfo('template_url'); ?>/images/yourimage.jpg">

Display image using absolute path

I am using uploadify to upload img to server at the time of upload i saved absolute path to the data base its like:
/var/www/html/workbench/photogallery/uploads/logo2.jpg
now I want to display the same in browser the following method does not work
<div id="photos">
<h3>Photo title</h3>
<P class="like">Like </P>
<p class="date">date </p>
<p class="pclear" />
<div id="image">
<img src="<?php echo $result_set['path']; ?>" />
</div>
<p class="about">about image goes here</p>
</div>
above code doesn't work. when I edit the path manually to uploads/logo2.jpg it works perfectly
how can I resolve this problem?
You need to use an url, not a path.
This:
/var/www/html/workbench/photogallery/uploads/logo2.jpg
is a physical path, the address on that server where the image is found. You need to use an url available for your visitors. I guess that you have a name mapped to that server (something like localhost or www.example.com).
From the structure I guess that your url would be something like
http://www.example.com/photogallery/uploads/logo2.jpg
where www.example.com is the base url you are using to get to that application
Try this:
<img src="/photogallery/uploads/<?php echo basename($result_set['path']) ?>" />
Try this it works for me and keeps the location of the images hidden from the browser.
<img src='fake.php' style='max-width:90px;'/>
Create a file called fake.php as follows
<?php
$thePic = "/var/www/html/workbench/photogallery/uploads/logo2.jpg";
$image = imagecreatefromjpeg($thePic);
// Output image and free up the memory
header("Content-type: image/jpeg");
imagejpeg($image);
imagedestroy($image);
?>
You can adjust the code in the fake.php file to retrieve the location of $thePic from posted data or database, etc.

Categories