`figure` linking to external image and colorbox

[Mariano Draghi]

Hi,

I'm trying to link an image hosted on Flickr, like this:

```
.. figure:: https://farm1.staticflickr.com/176/428041211_009f451d70_o.jpg
   :target: https://www.flickr.com/photos/arenamontanus/428041211/
   :alt: Restart, human!
   :align: right

   Restart, human! por Anders Sandberg

```

I want to use the `figure` directive, because I want to be able to put a "caption". I'm using the direct link to the image in the size I want to display, and (as per Flickr guidelines [*]) I'm including the link to the photo's page on Flickr as the target. Basically, I want this:

```
<a href="https://www.flickr.com/photos/arenamontanus/428041211" title="Restart, human! by Anders Sandberg, on Flickr"><img src="https://farm1.staticflickr.com/176/428041211_009f451d70_o.jpg" width="344" height="170" alt="Restart, human!"></a>
```

... which is the HTML Flickr gives when you get the sharing code directly from a photo page. But I also want the caption.

Everything looks fine... except that colorbox seems to get in the middle, and when you click the image, instead of navigating to the specified target (the photo's Flickr page), colorbox tries to do its magic, and fails because it tries to pull the photo from the target, and
a) the target (https://www.flickr.com/photos/arenamontanus/428041211) is not a direct link to an image;
b) it's a cross-domain AJAX request

If I use the `image` directive everything works as expected, but I can't have a nice caption below the photo.

Am I doing something wrong here? Why is colorbox sticking its nose in a `figure` with an explicit target? Is there something I can put in the `figure` directive to disable colorbox for that particular image? Is there a better way to link an external image from reST with an explicit target and a caption?



--
[*] https://www.flickr.com/help/guidelines

[Roberto Alsina]

You can deactivate the colorbox thing by doing this trick (untested):

.. figure:: blah

   :figclass: islink

Basically: colorbox is applied to things that are images and have links but are not of class "islink" :-)

--
You received this message because you are subscribed to the Google Groups "nikola-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to nikola-discus...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Mariano Draghi]

On Monday, May 4, 2015 at 9:51:00 PM UTC-3, Roberto Alsina wrote:

You can deactivate the colorbox thing by doing this trick (untested):

.. figure:: blah

   :figclass: islink

Basically: colorbox is applied to things that are images and have links but are not of class "islink" :-)

It doesn't seem to work :(

The class "islink" is added to the div, not the link or the image. Maybe it doesn't work because of that:

<div class="islink figure align-right">
<a class="reference external image-reference" href="https://www.flickr.com/photos/arenamontanus/428041211/"><img alt="Restart, human!" src="https://farm1.staticflickr.com/176/428041211_009f451d70_o.jpg"></a>
<p class="caption">Restart, human! por Anders Sandberg</p>
</div>
<p>Testing a figure which links to Flickr.</p>
</div>

[Mariano Draghi]

I tried the common :class: option too. With that option the "islink" class is added to the <img> element, but colorbox doesn't care:

<div class="figure align-right">
<a class="reference external image-reference" href="https://www.flickr.com/photos/arenamontanus/428041211/"><img alt="Restart, human!" class="islink" src="https://farm1.staticflickr.com/176/428041211_009f451d70_o.jpg"></a>

<p class="caption">Restart, human! por Anders Sandberg</p>
</div>

[Roberto Alsina]

You may also need to update your theme a little. At the end of your page 
it should say:

<script>$('a.image-reference:not(.islink)').colorbox({rel:"gal",maxWidth:"100%",maxHeight:"100%",scalePhotos:true});</script>

[Mariano Draghi]

It's already there by default on the generated output, between the AddThis stuff and the fancy dates stuff:

"""
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4f7088a56bb93798"></script>
<!-- End of social buttons -->

    <script>$('a.image-reference:not(.islink)').colorbox({rel:"gal",maxWidth:"100%",maxHeight:"100%",scalePhotos:true});</script>

    <!-- fancy dates -->
    <script>
    moment.locale("");
    fancydates(0, "YYYY-MM-DD HH:mm");
    </script>
    <!-- end fancy dates -->

[Roberto Alsina]

And that's when you open the browser's JS debugger. Sorry :-(

[Mariano Draghi]

On Monday, May 4, 2015 at 10:49:13 PM UTC-3, Roberto Alsina wrote:

And that's when you open the browser's JS debugger. Sorry :-(

Why do you hate me? WHY? ;-)

The problem seems to be that we need the "islink" class applied to the link element. It does not work in the external figure's div element, nor in the img element.

If I use the :figclass: option, the class is applied to the div.
If I use the :class: option, the class is applied to the img.

Is there a sane/standard way to apply a class to the anchor?

I suppose there isn't, so I went with the :class: option, copied the base.tmpl template :( to my custom theme, and modified it like this:

    <script>$('a.image-reference:not(.islink) img:not(.islink)').parent().colorbox({rel:"gal",maxWidth:"100%",maxHeight:"100%",scalePhotos:true});</script>

I *hate* jQuery selectors, but I suppose that means "anchors with the image-reference class that don't have the islink class AND whose child img element does not have the islink class". And for some reason that selects the img node, so I put a parent() there too, to go back to the anchor and apply colorbox to it.

It solves my scenario, but:
- It seems a bit overkill to override base.tmpl (I consider it an important template...) in a custom theme just for that;
- I'm not sure if that jQuery selector is right
- I'm not sure if I'm not breaking other scenarios (I see that the islink trick was added more or less recently https://github.com/getnikola/nikola/issues/1536)

Ideas?

[Chris Warrick]

Your fix works (and apparently nobody tested reST input). We can just
use your code. Nothing should be broken by it.

https://github.com/getnikola/nikola/pull/1687

--
Chris Warrick <https://chriswarrick.com/>
PGP: 5EAAEA16

[Mariano Draghi]

On Tuesday, May 5, 2015 at 5:23:04 AM UTC-3, Chris Warrick wrote:

Your fix works (and apparently nobody tested reST input).  We can just
use your code.  Nothing should be broken by it.

https://github.com/getnikola/nikola/pull/1687

Awesome, thank you!