Page 1 of 1
GALLERY og:graphs meta data
Posted: Mon Dec 14, 2015 10:43 pm
by Brandt
Hello CMS Made Simplers,
I am working on the Gallery Module; all is working great, though I would like to change something and this might be a future item for the module aswell.
In the Gallery, changing the template there are three text-areas:
1. Template code:
2. Template CSS-stylesheet:
3. Template JavaScript:
Now I don't need no JavaScript, but I would like some Facebook og:graphs meta data. So I copied some meta data and put it in the 'Template JavaScript:' text-area, saved and it worked. Tested it with the Facebook debugger and all is well.
Now I did this so I could have dynamically meta data. I wanted to achieve this using the Gallery tags like this for instance:
Code: Select all
<meta property="og:image" content="http://studiomik.nl/{$image->thumb|escape:'url'|replace:'%2F':'/'|replace:'thumb_':''}">
But the information is not changed, I see the tag instead. Is there a way I can change the text-area so it can read the tag? Or in which file should I look for in the Gallery Module folder?
Anyway, I think this might also be a great future item for the Gallery Module. So when a new page is created through the Gallery Module and if this page is shared on Facebook or Twitter it will get its own information.
Thanks in advance,
Joep
Re: GALLERY og:graphs meta data
Posted: Wed Dec 16, 2015 12:43 am
by velden
It can be done.
I would set some Smarty variables inside the gallery template and use those later on in your page template in the head section.
Don't use the javascript area.
Re: GALLERY og:graphs meta data
Posted: Wed Dec 16, 2015 7:45 pm
by Brandt
Hi Velden,
Thank you for your reply. I don't understand what you are saying here. How do I get the smarty variables in the head of my page using the Gallery Module?
Re: GALLERY og:graphs meta data
Posted: Wed Dec 16, 2015 8:58 pm
by Jeff
Re: GALLERY og:graphs meta data
Posted: Wed Dec 16, 2015 10:09 pm
by Brandt
Thank you Jeff. How can I combine this with the Gallery Module?
Re: GALLERY og:graphs meta data
Posted: Mon Dec 21, 2015 3:24 pm
by Brandt
I am experimenting, but without succes; I thought this might get me somewhere:
In the Gallery Module > Template:
In the <head> section of the page:
Code: Select all
<meta property="og:image" content="{$foo}" />
Can anybody put me on the right track? I want the url from the first image of a Gallery list to be as an og:image meta data.
Re: GALLERY og:graphs meta data
Posted: Mon Dec 21, 2015 3:26 pm
by velden
What version of CMSMS do you use?
Re: GALLERY og:graphs meta data
Posted: Mon Dec 21, 2015 3:59 pm
by Brandt
A classic: CMS Made Simple™ 1.11.6 “Merchant”
Re: GALLERY og:graphs meta data
Posted: Mon Dec 21, 2015 4:02 pm
by velden
In your 'example' try:
Code: Select all
{assign var=foo value=$images->file}
Re: GALLERY og:graphs meta data
Posted: Mon Dec 21, 2015 4:58 pm
by Brandt
Thank you Velden!
It works - though instead of the first image I get the last one of the list.
Code: Select all
<ul class="gallerylist">
{foreach from=$images item=image name=img}
<li>
<img src="{$image->thumb|escape:'url'|replace:'%2F':'/'|replace:'thumb_':''}" alt="{$image->titlename}" />
</li>
{assign var='g_prevdepth' value=$image->depth}
{/foreach}
</ul>
{assign var=foo value=$image->thumb|escape:'url'|replace:'%2F':'/'|replace:'thumb_':''}
And the same when using
Code: Select all
{assign var=foo value=$image->file}
But I am on the right track…
Re: GALLERY og:graphs meta data
Posted: Mon Dec 21, 2015 5:16 pm
by velden
Of course you get the last image.
Try (untested):
Code: Select all
<ul class="gallerylist">
{assign var=foo value=$images[0]->thumb|escape:'url'|replace:'%2F':'/'|replace:'thumb_':''}
{foreach from=$images item=image name=img}
<li>
<img src="{$image->thumb|escape:'url'|replace:'%2F':'/'|replace:'thumb_':''}" alt="{$image->titlename}" />
</li>
{assign var='g_prevdepth' value=$image->depth}
{/foreach}
</ul>
Note that using the thumb image might not be the best idea (depends on thumb size). Facebook and such want the Open Graph image to be rather large.
Consider using the $images[0]->file and e.g. CGSmartImage module to resize.
OR use a dedicated 'Open Graph' Gallery template for 'Template for module-calls to a single image' and set the appropriate thumbnail size for that specific template. Then store the image ID in your variable. In the <head>-section call the Gallery module using the img=<id> parameter and make sure the template itself outputs nothing.
Calling the module makes the $image variable available in the page template (cmsms 1.11.x !!)
Some ugly code from an older site I built:
Code: Select all
{* call gallery single image so we get IMAGE object *}
{Gallery img=<image ID>}
{root_url assign=rooturl}
{assign var=og_image value="`$rooturl`/`$image->thumb`"}
Note the ` around the variables are backticks and NOT single quotes. Probably just {} would work too:
Code: Select all
{* call gallery single image so we get IMAGE object *}
{Gallery img=<image ID>}
{assign var=og_image value="{root_url}/{$image->thumb}"}
Re: GALLERY og:graphs meta data
Posted: Mon Dec 21, 2015 6:40 pm
by Brandt
Thanks Velden!
The solution with
Code: Select all
{assign var=metaimage value=$images[0]->file}
works flawlessly.
I will look and try to understand exactly your 'single image' code.
Thanks again!
Joep