Social Gallery WordPress Plugin

Guide: Using Encoded HTML in Social Gallery SideBar

Apr
5
2013
Guide: Using Encoded HTML in Social Gallery SideBar

You can now use HTML in your image descriptions!

As of v2.1 you can now use Encoded HTML within your galleries/blog posts to add html elements to the descriptions of your images in Social Gallery!

If you take a look at the following example you can see Encoded HTML attributes in action:

social-gallery-encoded-html

Notice how on the right hand side there’s a little image and some red text (click it if you need to see it bigger) – that’s encoded html output into the image’s data-desc attribute. This allows you to put custom HTML to show in place of the description part of Social Gallery!

This is a much requested feature and will work in all modern browsers (that support data-attributes + HTML5!)

Here’s how you can try it:

Using WordPress’s esc_attr( function (if you know how) or a website like htmlentities.net you will need to encode some HTML which you want to show in the description.

For example:

encode-decode-encoded-html-example-social-gallery

… notice how the latter box has no common characters like < or ” or ‘ –

Next, copying your custom encoded HTML, add it to your image links in your post/page like the following example shows (click example image to see it larger.)

… by replacing *ENCODED HTML HERE* in that example with your encoded HTML you can choose what description HTML is shown with the linked image.

This is a hugely valuable feature for those who want to extend Social Gallery with their own HTML.

Notes:

  • By including both a “title” attribute and a “data-desc” attribute Social Gallery will use “title” for the bottom “basebar” and “data-desc” for the description – “data-desc” does not have to be encoded HTML, it can also be a standard text description that you want to include, rather than showing it in the bottom bar as well as the description area.
  • Including just a “title” attribute fills both the bottom “basebar” (if enabled) and the description area with the value in “title”
  • Including just a “data-desc” attribute fills the description area with the value in “data-desc” (HTML encoded or not) and does not affect the “basebar”.

Comments

  • Rachel
    April 5, 2013

    Hi,

    This all seems a lot more complicated than I’d expected. Up until now I’ve never had to learn anything about custom html or ‘Using WordPress’s esc_attr( function’, however, if it can work I will go ahead with it. Can you please tell me if this can work with large galleries with lot’s of images on one page or with format gallery plugins such as ‘Justified Grid gallery’, as I can’t use this if it doesn’t.

    Thanks

  • Social Gallery Plugin
    April 6, 2013

    Hi Rachel,

    You don’t have to use encoded HTML in your descriptions – this is just an extra feature for those who want to push Social Gallery even further!

  • April 6, 2013

    Hi,

    Yes I know encoded Html is optional 🙂 The thing is, I wanted to use it so I could add external links. It was mentioned before that it would be possible to add links (affiliate links) to Social Gallery through encoded HTML in the descriptions. I would like to know if I could do that, & do it with a large gallery on one page or with Justified Grid Gallery.

    I tried to add Nextgen galleries with Justified Grid & Social Gallery, for example, but the ‘custom text’ from Nextgen which would have allowed me to add a link didn’t work with Social Gallery. All my images are in galleries, not singular. I really would like to have the option of having both the Social Gallery lightbox & also the link in the description. Would it be possible with encoded HTML?

    Thanks

  • Social Gallery Plugin
    April 6, 2013

    Hi Rachel,

    As long as you can put out encoded html into the attribute “data-desc” against the image link then it’s possible to use this feature – that totally depends on the gallery you use and it’s capacities to output attributes against image links. I should think it’ll be possible via justified image grid and next gen, though I haven’t tested this myself yet (and it might take some editing.)

    Cheers

  • June 24, 2014

    Is there a way to do this using the Facebook Gallery function? In that case, i don’t have access to the image address within the post. is there somewhere on the media file I can add it?

  • June 24, 2014

    On my previous comment, I meant WordPress Gallery Function, not Facebook!

    Is there a way to do this using the WordPress Gallery function? In that case, i don’t have access to the image address within the post. is there somewhere on the media file I can add it?

Leave a Reply to JessicaB365 Cancel reply

Your email address will not be published. Required fields are marked *

©2012 Social Gallery Plugin - Please note: Social Gallery Plugin is in no way related to Facebook, Social Gallery is a Gallery Share Plugin for WordPress.