Put <figcaption> outside <a>?

bobrocke commented 5 years ago

If the image has a link to the image (to use a lightbox), the default behavior appears to be to write the

tag within the tag. I'd like the

tag to be outside the tag.

Is there a configuration change that would make that possible?

rhukster commented 5 years ago

I need to test this...

rhukster commented 5 years ago

Just tried it and it works fine.. make sure you have the latest version installed.

![Sample Image](ico.png?lightbox=600,400&resize=200,200&classes=caption "My lightbox caption")

bobrocke commented 5 years ago

Hmmm. I'm running Grav 1.6rc1, if that makes any difference. And the current Image Captions v2.0.0.

This markdown:

![Process Recipe](process-recipe.jpg?lightbox "Process Recipe Settings"){.caption .image-left .image-33}

generates this HTML: 2019-02-05 at 7 58 am

The caption wants to be within the <a>.

rhukster commented 5 years ago

That's not going to work, that's using markdown extra which is SUPER buggy.. use my syntax provided.

![Process Recipe](process-recipe.jpg?lightbox&classes=caption,image-left,image-33 "Process Recipe Settings")

bobrocke commented 5 years ago

Grrrrr.

I switched away from Markdown Extra and now have it:

![Process Recipe](process-recipe.jpg?lightbox&classes=caption,image-left,image-33 "Process Recipe Settings")

but I'm still getting the caption inside the <a>:

2019-02-05 at 9 59 am

What else could I be doing wrong?

rhukster commented 5 years ago

Running version 2.0 of this plugin? Cleared cache?

I posted your code above (with my test image) and it worked fine:

<a rel="lightbox" href="/grav-demo-sampler/user/pages/04.test/03.figcaption/ico.png">
<figure class="image-caption">
<img title="Process Recipe Settings" alt="Process Recipe" class="caption image-left image-33" src="/grav-demo-sampler/user/pages/04.test/03.figcaption/ico.png">
<figcaption class="">Process Recipe Settings</figcaption>
</figure>
</a>

bobrocke commented 5 years ago

Yes and Yes.

But your code is "not fine," at least it's not what I want. The <figcaption> is inside the <a>. I'm wanting it outside.

Like this:

<figure class="image-caption">
     <a rel="lightbox" href="/grav-demo-sampler/user/pages/04.test/03.figcaption/ico.png">
           <img title="Process Recipe Settings" alt="Process Recipe" class="caption image-left image-33" src="/grav-demo-sampler/user/pages/04.test/03.figcaption/ico.png"></a>
     <figcaption class="">Process Recipe Settings</figcaption>
</figure>

Maybe that's just not how it works? I don't want the caption to be a link, I just want it to be text.

rhukster commented 5 years ago

Ah that is how it's supposed to work (at least in this plugin). It simply replaces the <image> tag with the appropriate <figure></figure><figcaption></figcaption> syntax. So anything wrapping that, like an <a> link is untouched. There's just too many complexities with how the output might be, and navigating up a DOM structure and rearranging things is more prone to issues.

bobrocke commented 5 years ago

OK, so it's "expected behavior;" I'm good with that.

I can override the CSS styling for the link so that it's not visually noticeable.

trilbymedia / grav-plugin-image-captions

Put <figcaption> outside <a>? #12