Перенаправить изображение на ссылку

Question

Я видел некоторые сайты в изображениях Google, когда вы нажимаете "открыть изображение в новой вкладке", он перенаправляет на URL исходного сообщения.

У меня есть мой сайт, на котором есть много изображений, созданных с помощью php gd, которые берут данные из поста и создают изображение, URL-адрес которого похож на этот:

example.com/img/(number-post-id)-some-text.jpg

и пост его

example.com/post/(number-post-id)

Есть ли способ перенаправить изображения в исходное сообщение, когда кто-нибудь открывает изображение в новой вкладке?

Спасибо

Answer 1

/* add a little bottom space under the images */
.thumbnail {
 margin-bottom:7px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"/>
<div class="container">
  <h1>Image Grid</h1>
  
 <b> NOTE: </b> Try To Open With <kbd>`Right Click`</kbd> <b> > </b> <kbd> `Open Link In New Tab`</kbd>  Or .. With  
  
  <kbd>Ctrl<kbd> + <kbd> Click<kbd>
  
  <hr>
  
  
  <div class="row">
    <div class="col-xs-3">
        <a href="https://www.google.com" class="thumbnail"> Google
             <img src="http://placehold.it/350x150" class="img-responsive">
        </a>
    </div>
     <div class="col-xs-3">
        <a href="https://www.facebook.com" class="thumbnail"> facebook
             <img src="http://placehold.it/350x150" class="img-responsive">
        </a>
    </div>
    <div class="col-xs-3">
        <a href="https://www.stackru.com" class="thumbnail"> stackru
             <img src="http://placehold.it/350x150" class="img-responsive">
        </a>
    </div>
    <div class="col-xs-3">
        <a href="www.yahoo.in" class="thumbnail"> yahoo.in
             <img src="http://placehold.it/350x150" class="img-responsive">
        </a>
    </div>
    <div class="col-xs-3">
        <a href="#" class="thumbnail">
             <img src="http://placehold.it/350x150" class="img-responsive">
        </a>
    </div>
    <div class="col-xs-3">
        <a href="#" class="thumbnail">
             <img src="http://placehold.it/350x150" class="img-responsive">
        </a>
    </div>
    <div class="col-xs-3">
        <a href="#" class="thumbnail">
             <img src="http://placehold.it/350x150" class="img-responsive">
        </a>
    </div>
    <div class="col-xs-3">
        <a href="#" class="thumbnail">
             <img src="http://placehold.it/350x150" class="img-responsive">
        </a>
    </div>
    <div class="col-xs-3">
        <a href="#" class="thumbnail">
             <img src="http://placehold.it/350x150" class="img-responsive">
        </a>
    </div>
    <div class="col-xs-3">
        <a href="#" class="thumbnail">
             <img src="http://placehold.it/350x150" class="img-responsive">
        </a>
    </div>
    <div class="col-xs-3">
        <a href="#" class="thumbnail">
             <img src="http://placehold.it/350x150" class="img-responsive">
        </a>
    </div>
    <div class="col-xs-3">
        <a href="#" class="thumbnail">
             <img src="http://placehold.it/350x150" class="img-responsive">
        </a>
    </div>
  </div>
 
  <hr>
</div>

Answer 2

Из того, что я понял, это фрагмент кода, который должен решить ваш вопрос:

<a href="http://example.com/imagelink" target="_blank"> <!-- target _blank opens in new tab-->
  <img src="http://example.com/image.extension">
</a>