How to generate an image that is a link?

Question

Right now my image links look like this:

links show as text

I need them to look like this:

links show as images

My Images are stored in APP/uploads/userid/images/filename.jpg

This is my view at the moment:

  <?php foreach($file as $files){?>

      <?php  echo $this->Html->link($files['Image']['filename'], array('controller' => 'images', 'action' => 'downloadImages', $files['Image']['filename']), array('class' => 'frame'));}?>

It works and clicking the link shows the relevant image correctly.

Controller snippet for reference:

    public function downloadImages($filename) {


    $download = !empty($_GET['download']);
    $idUser = $this->Auth->user('idUser');
    $folder_url = APP.'uploads/'.$idUser.'/'.'images'.'/'.$filename;

    $this->response->file($folder_url, array('download' => $download, 'name' =>   $filename));

    return $this->response;
}

What do I need to do to make images display as links instead of the name of the file?

i want to show an image instead of a link ... hope you understand ... write now online file name is echoing out on the view page not the image ... — hellosheikh, Jul 27 '13 at 16:27
well anyway thanks for helping me sir ... really thanks to you ..i apologize if anything i did wrong — hellosheikh, Jul 27 '13 at 18:50
sorry @AD7six it works ... well i didnt see your updated answer ... thankyou i tried it.. it works.. the code which was in middle .. — hellosheikh, Jul 27 '13 at 18:53
k that was confusing - answer undeleted then, and downvote removed. — AD7six, Jul 27 '13 at 19:07

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

How to generate an image link

In the question there is this line (paraphrased for clarity):

$downloadUrl = array('controller' => 'images', 'action' => 'downloadImages', $files['Image']['filename'], '?' => array('download' => true));
$imageUrl = array('controller' => 'images', 'action' => 'downloadImages', $files['Image']['filename']);

echo $this->Html->link(
    $files['Image']['filename'], 
    $downloadUrl,
    array('class' => 'frame')
);

Instead of linking to the filename - link to the image:

echo $this->Html->link(
    $this->Html->image($imageUrl),
    $downloadUrl,
    array('class' => 'frame', 'escape' => false)
);

OR use the image function directly, since the image function supports that:

echo $this->Html->image(
    $imageUrl,
    array(
        'url' => $downloadUrl
    )
);

score 0 · Answer 2 · answered Jul 27 '13 at 16:24

Here is a copy of y GemsImageComponent that I use to push images to the browser from disk. It handles caching, and uses the file timestamp to see if the image should sent again, or if the browser's current cached version is up to date.

Please up-vote if you find this useful.

<?php

/**
 * $settings['cache'] string (optional) How long the browser should cache
 * images.
 * $settings['expires'] string (optional) If all images should expire after a
 * given period from the browsers cache.
 */
class GemsImageComponent extends Component
{

    /**
     *
     * @var array The default settings for the component.
     */
    protected $defaults = array(
            'cache' => '+7 days',
            'expires' => false
    );

    /**
     *
     * @var Controller The controller using this component.
     */
    protected $controller;

    /**
     *
     * @see Component::__construct()
     */
    public function __construct(ComponentCollection $collection,
            $settings = array())
    {
        parent::__construct($collection,
                Hash::merge($this->defaults, $settings));
    }

    /**
     *
     * @see Component::startup()
     */
    public function startup(Controller $controller)
    {
        $this->controller = $controller;
    }

    /**
     * Sends an image from disk to the browser.
     *
     * @param string $file The full path to the image file.
     * @return mixed The value that the View should return.
     */
    public function send($file)
    {
        $response = $this->controller->response;
        $settings = $this->settings;

        // the file has to exist
        if(! file_exists($file))
        {
            throw new NotFoundException();
        }

        // set browser cache options
        if($settings['cache'] !== false)
        {
            $response->cache('-1 minute', $settings['cache']);
        }
        if($settings['expires'] !== false)
        {
            $response->expires($settings['expires']);
        }

        // mark this image with a timestamp of when it last changed.
        $timestamp = filemtime($file);
        $response->modified($timestamp);

        // generate a unique ID that browser cache engines can use to track this
        // resource.
        // TODO: Add GEMS version number to the hash tag.
        $unique = sha1(sprintf('%s-%d', $file, $timestamp));
        $response->etag($unique);

        // check if we can abort sending this resource
        if(! $response->checkNotModified($this->controller->request))
        {
            $response->file($file, array(
                    'download' => false
            ));
        }

        return $response;
    }
}

?>

I'm not sure exactly what the question is - but I don't think this answers it. — AD7six, Jul 27 '13 at 16:29
@AD7six I thought he wanted to push an image file to the browser without triggering the `save as..` prompt? but the question is hard to understand. — Reactgular, Jul 27 '13 at 16:36
@hellosheikh oh, use $this->Html->image instead of $this->Html->link — Reactgular, Jul 27 '13 at 16:37
@hellosheikh http://book.cakephp.org/2.0/en/core-libraries/helpers/html.html#HtmlHelper::image — Reactgular, Jul 27 '13 at 16:38
@MathewFoscarini i try this too as well .. but then now the url in img src becomes like this localhost/cakephp/img/picture1.jpg which is wrong actually. — hellosheikh, Jul 27 '13 at 16:41
@hellosheikh read the docs, it says to set `url` in the html attributes. — Reactgular, Jul 27 '13 at 16:43
still not showing the image ..but when i click the image then it shows the image which surely i dont want — hellosheikh, Jul 27 '13 at 16:50

How to generate an image that is a link?

2 Answers2

How to generate an image link