Fullwidth captions don't expand link syntax

[niallrmurphy]

So, e.g. {% fullwidth 'blah/img/blah' 'Hi there this is a source' %} will just be printed as plain text.

[ghost]

Is the fullwidth tag on it's own line? It needs to be the only text on that line in your Markdown document.

blah blah

{% fullwidth 'assets/img/rhino.png' 'A caption for the image' %}

blah blah

[niallrmurphy]

The source HTML looks something like this:

"""

{% fullwidth 'assets/img/internet_eireann_feb_1995_p.jpeg' "A 1995 paper leaflet advertising IE's services (via http://brandnewretro.ie/2012/08/23/old-adverts-88-internet-eireann-1995/" %}

This leaflet advertises a number of wonderful facilities, ... """

which results in the following screenshot:

https://www.dropbox.com/s/6yv8nm1qne8hqno/Screenshot%202015-12-31%2023.42.08.png?dl=0

(in this screenshot I use the syntax, but it was the same when it was []()

[clayh53]

And that looks like we need to use something to clear the float on that full-width image.

I hope everyone realizes that this CSS came from the Tufte-CSS repo.

If I had written it all, it would be much, much worse.

On Dec 31, 2015, at 6:56 PM, niallrmurphy notifications@github.com wrote:

Source HTML looks like:

The source code looks something like this:

"""

{% fullwidth 'assets/img/internet_eireann_feb_1995_p.jpeg' "A 1995 paper leaflet advertising IE's services (via http://brandnewretro.ie/2012/08/23/old-adverts-88-internet-eireann-1995/" %}

This leaflet advertises a number of wonderful facilities, ... """

which results in the following screenshot:

https://www.dropbox.com/s/6yv8nm1qne8hqno/Screenshot%202015-12-31%2023.42.08.png?dl=0

(in this screenshot I use the syntax, but it was the same when it was

— Reply to this email directly or view it on GitHub.

[ghost]

@niallrmurphy try escaping your apostrophe in IE's - Jekyll sees that extra single quotation mark and tries to parse it since it occurs within a special tag... any quotation marks inside these tags have a special meaning and escaping them removes that meaning.

{% fullwidth "assets/img/internet_eireann_feb_1995_p.jpeg" "A 1995 paper leaflet advertising IE\'s services (via http://brandnewretro.ie/2012/08/23/old-adverts-88-internet-eireann-1995/)" %}

Or you can replace the single quotation mark with the HTML entity for the apostrophe

{% fullwidth "assets/img/internet_eireann_feb_1995_p.jpeg" "A 1995 paper leaflet advertising IE's services (via http://brandnewretro.ie/2012/08/23/old-adverts-88-internet-eireann-1995/)" %}

[ghost]

@clayh53 I think this is just a matter of proper escaping... should probably add something to the Readme about that. I forgot to do so when I submitted the plugin patches. I'll see about a PR.

[niallrmurphy]

Thank you gentlemen for your excellent support!

[niallrmurphy]

Hmm, nope.. seems like it just prints:

A 1995 paper leaflet advertising IE's services (via brandnewretro.

It doesn't seem to spot the []() syntax even after escaping the quote (with \ to be clear).

[ghost]

Please try this line and tell me what happens

{% fullwidth "assets/img/internet_eireann_feb_1995_p.jpeg" "A 1995 paper leaflet advertising IE's services (via http://brandnewretro.ie/2012/08/23/old-adverts-88-internet-eireann-1995/)" %}

[niallrmurphy]

Nope, sorry; quote gets rendered okay (as it has been the past few iterations) but no link. It's as if the line is not being passed to the markdown parser or is not exiting it with the link correctly identified...

[ghost]

Interesting. can you upload the exact image somewhere for me? I'll prep a fresh jekyll build and test with your image & tag. You can just load the image in here in the comments if you want.

[niallrmurphy]

https://www.dropbox.com/s/y2mitrk7bh13zwg/Screenshot%202016-01-01%2010.34.34.png?dl=0

Surrounding code is now:

Internet Éireann made some crucial decisions at the right time: they were betting on a growth market, which it was, and an ability to sweat their assets. In the mid-1990s ISP business, this meant running their modem pool "hot", i.e. having too few of them for the number of customers, as discussed above. It was a straightforward value-for-money consumer play, whose appeal was certainly based on cost, but also the even then staggeringly large array of services available to anyone at the other end of a dial-up connection. (See, for example, the below image, which shows a leaflet advertising Internet Éireann’s services.)

{% fullwidth "assets/img/internet_eireann_feb_1995_p.jpeg" "A 1995 paper leaflet advertising IE's services (via http://brandnewretro.ie/2012/08/23/old-adverts-88-internet-eireann-1995/)" %}

This leaflet advertises a number of wonderful facilities, the majority of which have now perished, or been swallowed up by the hypergrowth of the web in general: “File Transfer”, “Telnet”, “Archie”, “Gopher”, and so on.

[ghost]

Thanks! I'll test right now on a fresh install. I'm curious why this isn't working. :wink:

[ghost]

Ok, I was wrong, you usually don't need to escape anything. The Liquid plugins for Jekyll are intelligent enough that if you use double quotes, it auto-escapes single quotes. Or if you use single quotes, it should auto-escape double quotes.

For example, using the following tag:

{% fullwidth "assets/img/rhino.png" "A 1995 paper leaflet advertising IE's services (via http://brandnewretro.ie/2012/08/23/old-adverts-88-internet-eireann-1995/)" %}

This is my result:

http://fullwidthtest.surge.sh/test/

So the Liquid tags are working correctly, the text is rendering properly.

However as you can see the captions are not clearing properly. They don't clear properly in any of the page layouts (page, post or full-width) @clayh53 I wonder if this has been fixed upstream in tufte-css silly me, these are tufte-jekyll specific.

[niallrmurphy]

Yep, I see; does it link-ify for you if you use angle brackets or the []() notation as a matter of interest?

[ghost]

And @niallrmurphy yes, if you correctly escape the double quotes in the href tag it should create a hyperlink for you:

{% fullwidth "assets/img/rhino.png" "A 1995 paper leaflet advertising IE's services (via <a href=\"http://brandnewretro.ie/2012/08/23/old-adverts-88-internet-eireann-1995/\">http://brandnewretro.ie/2012/08/23/old-adverts-88-internet-eireann-1995/</a>)" %}

Or you can use single quotes in the href tags, either way works great.

{% fullwidth "assets/img/rhino.png" "A 1995 paper leaflet advertising IE's services (via <a href='http://brandnewretro.ie/2012/08/23/old-adverts-88-internet-eireann-1995/'>http://brandnewretro.ie/2012/08/23/old-adverts-88-internet-eireann-1995/</a>)" %}

[niallrmurphy]

Understood, thanks!

[ghost]

Here's what I think is a good fix, put this into your tufte.scss and replace the existing entry for figure.fullwidth figcaption

figure.fullwidth figcaption {
  float: left;
  margin-right: 0%;
  margin-left: 36%;
}

Here's a preview: http://fullwidthtest.surge.sh/test/ using this tag:

{% fullwidth "https://brandnewretro.files.wordpress.com/2012/08/internet_eireann_feb_1995_p.jpg" "A 1995 paper leaflet advertising IE's services (via <a href='http://brandnewretro.ie/2012/08/23/old-adverts-88-internet-eireann-1995/'>http://brandnewretro.ie/2012/08/23/old-adverts-88-internet-eireann-1995/</a>)" %}

[niallrmurphy]

Excellent, thanks!

[ghost]

Cool, if this is fixed for you feel free to close the issue. I put in a pull request #26 to help fix this issue.

[clayh53]

Thanks Nick. I have merged the pull request into the master.

I appreciate the help on this. On Jan 1, 2016, at 7:42 AM, Nick notifications@github.com wrote:

Cool, if this is fixed for you feel free to close the issue. I put in a pull request #26 to help fix this issue.

— Reply to this email directly or view it on GitHub.

[ghost]

Thanks, and You're welcome!