Jump to content


Photo
Gridly

Gridly shortcode



  • Please log in to reply
7 replies to this topic

#1 caspersjan

caspersjan

    Super Member

  • Members

  • 156 posts
  • Country: Country Flag

Posted 26 May 2013 - 06:50 PM

Dear Nick, I hope you are in good spirits and all the family is in good health. For a change a simple question: I can't figure out the GRIDLY shortcode. In the demo, it says this:

 

[gridly layout="13" lightbox="on"]
<img src="" data-highres="" alt="">
<img src="" data-highres="" alt="">
<img src="" data-highres="" alt="">
<img src="" data-highres="" alt="">
[/gridly]

 

At the danger of betraying my ignorance in these matters, what exactly do I enter between the [gridly layout="13" lightbox="on"] and [/gridly] brackets? Could you give me give an example with real-life Media Library file names? I am sure it is very simple, but yet again I need assistance.

 

 

Yours faithfully, Jan.

 

 



#2 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 27 May 2013 - 01:39 PM

Hi Jan,

This operates in the same way as you setup the section. 13. That's 1 image on the first row, 3 images on the last row, so you'll need 4 images. You have the shortcode correct. If you are having layout issues, take out the img breaks. So 

 

<img src=""><img src=""><img src=""> 

 

instead of

 

<img src="">

<img src="">

<img src="">

 

For data-highres="" you can put the same URL to the image, or you can use a larger size of the same image and link that there.



#3 caspersjan

caspersjan

    Super Member

  • Members

  • 156 posts
  • Country: Country Flag

Posted 27 May 2013 - 01:58 PM

Dear Nick, I think I am beginning to understand, but can't get it to work. This is what I have so far:

 

http://www.animating...ss/?page_id=187

 

The layout is very clear, 13, 246, it is a very neat idea. I am struggling with the exact place to insert the images into the shortcode. Am I right in assuming that the image URL goes between the two inverted commas, i.e. normal resolution into img src="", high resolution into data-highres="", something else into alt="" (the latter I omitted)? I am trying to do this but nothing comes out, as you can see from the linked page above. I must still be doing something wrong. BA Shortcodes has me spoiled with easy to insert option...

 

In the visual editor my page looks like this:

 

[gridly layout="13" lightbox="on"]

<img src="http://www.animating...TORYTELLING.jpg" data-highres="http://www.animating...TORYTELLING.jpg" alt="">
<img src="http://www.animating...TORYTELLING.jpg" data-highres="http://www.animating...TORYTELLING.jpg" alt="">
<img src="http://www.animating...TORYTELLING.jpg" data-highres="http://www.animating...TORYTELLING.jpg" alt="">
<img src="http://www.animating...TORYTELLING.jpg" data-highres="http://www.animating...TORYTELLING.jpg" alt="">
[/gridly]

 

 

I hope you can make sense of all this and that perhaps the solution is easy. Thank you for your help.

 

Faithfully, Jan.

 



#4 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 27 May 2013 - 04:41 PM

That looks right. 

 

If you are having layout issues, take out the img breaks. So 

 

<img src=""><img src=""><img src=""> 

 

instead of

 

<img src="">

<img src="">

<img src="">



#5 caspersjan

caspersjan

    Super Member

  • Members

  • 156 posts
  • Country: Country Flag

Posted 27 May 2013 - 09:06 PM

Dear Nick,

 

I worked it out, though I don't understand it completely. The shortcode must be entered in text editor - when the image URL is entered in the visual editor, it all just comes up as text in a grey box (see attachment Attached File  SCREENGRAB Gridly Woes.tiff   244.27KB   0 downloads). It confused me because in other shortcodes, such as BAD ASS Styled Images, image URL is entered in visual editor. But then it is inside the square brackets, maybe that is the difference. Anyway, perhaps I should have known, and I did figure it out so all is good now. Gridly shines, in all its glory. A true delight!

 

The only thing that is still missing (for me) are the captions. I tried to enter them after the "alt" as I couldn't figure out what else that was good for:

 

alt="Animatic exercise"

 

But nothing comes up. Is there an easy way to include captions when using shortcodes? Let me know.

 

Once again, I am grateful for your patience (in looking after a customer) and your passion (in crafting elegant sections)!

 

Yours faithfully, Jan.

 

 



#6 caspersjan

caspersjan

    Super Member

  • Members

  • 156 posts
  • Country: Country Flag

Posted 27 May 2013 - 09:28 PM

P.S.: (One last observation: Playing with Gridly, I entered a portrait format image in a set of landscape formats. The image is cropped. Could it not just be there, with the same height as its neighbours? That would strike me as the most useful option. When all images are in portrait format, all is well again, but not always is everything matching...)



#7 caspersjan

caspersjan

    Super Member

  • Members

  • 156 posts
  • Country: Country Flag

Posted 27 May 2013 - 09:49 PM

P.P.S.: (Is there a maximum of five images per row? It doesn't seem to work with six images (e.g. 366 doesn't work while 455 works). That may well be to prevent things being to small, although six is a nice number, a half dozen. Not to worry, the world is going metric anyway. It might still be useful to mention this kind of thing in the documentation, as I for one am prone to presume that I am doing something wrong).



#8 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 28 May 2013 - 01:17 PM

Ya do not ever use the visual editor for shortcodes. No there is no limit, you just define the total in the layout.

 

12, is 3.

1 image on first row, 3 images on last row

 

35 is 7.

3 images on first row, 5 images on last row

 

66 is 12.

6 images in first row, 6 images on last row

 

For the caption, try just filling out the ALT tags.







Also tagged with one or more of these keywords: Gridly