10 {{ upvoteCount | shortNum }}
10 {{ upvoteCount | shortNum }}

Hi, What is the easiest and most convenient way to cite images on Wordpress

by jvyzsy
8 replies
  • WEB DESIGN
    • |
Hi,

What is the easiest and most convenient way to cite images on Wordpress?

I would like to do it like this. As you can see there is a source section over the image. Is there any plugins or methods to do this?

Thanks
#cite #convenient #easiest #images #wordpress
  • Profile picture of the author clickbump
    WordPress has a built in captions input box on its media manager image editor screen. You can place your cite reference there. Here's a screenshot of what it looks like:



    If the theme you are using supports the display of captions, and assuming the caption is contained in an html5 compliant <figcaption> element, [you can see and example of this on the Speed Racer image on this page]...

    You can overlay your caption/cite on top of the image (as in your example) with this custom css:

    Code:
    figcaption{
position:absolute;
background:#333; //fallback for IE < 9
background:rgba(0,0,0,.25); //This creates a semi-transparent overlay effect in modern browsers, but you can just use a solid color if you prefer
color:#fff;
margin-top:5px;
padding:5px
}
    Here's what it looks like after applying the css above:



    For more on the figure and figcaption html5 elements, check out the "HTML5 Doctor" page for reference > http://html5doctor.com/the-figure-figcaption-elements/
    Signature
    {{ DiscussionBoard.errors[6843043].message }}
    • Profile picture of the author jvyzsy
      Hi,

      Thanks, this is a really good option. Is there a way to only show the caption if they are on the posts' url?(www example com / posturl). So it wont be on the homepage or in the archives(www example com).

      Also, if somebody likes/shares that post, they will automatically see this link and text on facebook. How can I modify this?
      {{ DiscussionBoard.errors[6843166].message }}
      • Profile picture of the author clickbump
        Originally Posted by jvyzsy View Post

        Hi,

        Thanks, this is a really good option. Is there a way to only show the caption if they are on the posts' url?(www example com / posturl). So it wont be on the homepage or in the archives(www example com).
        Yes, you can specify the content in which the caption should be displayed using the CSS display property.

        For example, if you only want captions to appear on images that are on the posts URL, you would use this CSS:

        Code:
        figcaption{display:none !important}
.single figcaption{display:block !important}
        Also, if somebody likes/shares that post, they will automatically see this link and text on facebook. How can I modify this?
        You can utilize "Open Graph" tags to customize the link, image and text that get's applied to Facebook likes and shares.

        I've included open graph support in my theme, but I don't have it enabled on this page since I'm ok with the default sharing settings in this case.

        If you need this, and your theme does not include/support open graph tags, you can use a plugin like this one to add the open graph tags to your pages.
        Signature
        {{ DiscussionBoard.errors[6843298].message }}
  • Profile picture of the author jvyzsy
    Hi,

    Started to work on it, I should add this code in style.css right? I've added it there but it still shows the caption on the front page :S.
    {{ DiscussionBoard.errors[6844982].message }}
    • Profile picture of the author clickbump
      Originally Posted by jvyzsy View Post

      Hi,

      Started to work on it, I should add this code in style.css right? I've added it there but it still shows the caption on the front page :S.
      Yes, in the style.css file found under "Appearance > editor".

      The CSS code I pasted above will need to be altered slightly to match your theme's caption element.

      If you can post or PM the url to your site, I can send you the theme-specific css you need.

      In my theme, I'm enclosing the caption element within a <figcaption> element. However, your theme may enclose the caption in another element (<p class="caption">...</p> for example) and the CSS will need to be altered to match that element.

      So, for example, if your theme encloses the caption in a paragraph tag that has class="caption", the code would become:

      Code:
      p.caption {display:none !important}
.single p.caption {display:block !important}
      And this would in turn hide the caption from view on all pages other than the post page.
      Signature
      {{ DiscussionBoard.errors[6845117].message }}
  • Profile picture of the author jvyzsy
    I've sent the url in PM.
    {{ DiscussionBoard.errors[6845220].message }}
  • Profile picture of the author jvyzsy
    I had to alter the code a little bit but now it's finally working!
    Man, you are a pro.

    Thanks
    {{ DiscussionBoard.errors[6847925].message }}

Trending Topics