Support » Plugin: Better Image Credits » Help needed with the template and shortcodes

  • Resolved h4stur

    (@h4stur)


    Hi,

    I like this image credit plugin the best, but maybe you could give some advice configuring it.

    I append the credits to the image captions enclosed with [caption] shortcodes. This works fine.

    as Template I am using this:
    <a href="[link]" target="_blank">&copy [source]</a><a href="[license_link]" target="_blank">| [license]</a>

    It shows a copyright sign with the Source as a hyperlink and after that a vertical bar | with [license] and the licenselink.

    The credits only show up when there is a value present for “Credits”. But the hyperlink to “Link” always shows up, no matter if a link was stated or not, like this in the output html:
    <a href="" target="_blank">© John Doe</a>
    So that just opens a blank new page, since an empty href was given.

    Is there a better way for a template, to only show the hyperlink, if a link is available? Same goes for the license. Any suggestions? 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Claude Vedovini

    (@cvedovini)

    Hi,
    It’s a simple system where the variables are just replaced by their values in the template, if they have no value a blank appears. In your case if you don’t want a blank page to open up when the link is empty then remove the target="_blank" attribute (it’s a bad practice anyway) the link will still appear but the browser won’t navigate anywhere if the href is left empty.

    Hi Claude,

    thanks for your answer. I did what you recommended, but wasn’t satisfied with that. So as a (dirty?) little workaround I played with some CSS for the Template.

    I want to share that Template here, for other users to adapt for their needs, or maybe someone even could add and share some improvements.

    The Template has following features:

    • The Image Credits are appended after the Image Caption
    • if a [link] is present, [source] is shown in “red”
    • if no [link] is present, [source] is shown in “grey”
    • if a [license] is given, it shows a vertical bar followed by the license after [source]
    • if no [license] is given, it does not show the vertical bar as well
    • if a [license_link] is given, [license] shows it red, if not in grey (similar to source link)

    My template (minus the line breaks):

    <style>#media-credit-a[href=""]{color: grey !important;};</style>
    <span class="media-credit">
    <a id="media-credit-a" href="[link]" rel="noopener noreferrer" style="font-style: italic; font-size: 70%; color: red;">
    &copy [source]
    </a></span>
    <style>#media-credit-l:not(:empty):before{content: " | ";font-style: normal;};</style>
    <style>#media-credit-l[href=""]{color: #grey !important;};</style>
    <span class="media-credit-l">
    <a id="media-credit-l" href="[license_link]" rel="noopener noreferrer" style="font-style: italic; font-size: 70%; color: red;">
    [license]</a></span>

    Maybe that is not the most elegant solution code-wise (looks a little bit bloated), but it’s a solution. It produces a nice looking result. I am open for any criticism or suggestions. Thanks 🙂

    Plugin Author Claude Vedovini

    (@cvedovini)

    good idea but you should use css classes instead of ids and put the css in your stylesheet, otherwise it’s repeated each time there’s a credit line which is not good especially is you use !important directives

    Yep, this is the dirty part 😉 My theme annoys me, overriding this custom CSS in the stylesheet…This is why I used inline CSS – for now. But you’re totally right about that!

    If someone would like to have a template like that, please stick to Claude’s advice before.

    Plugin Author Claude Vedovini

    (@cvedovini)

    you can use the custom css feature that comes with Jetpack if you’re using it, otherwise I am sure there are other plugins and you don’t have to modify your theme

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.