GALLERY og:graphs meta data

Brandt · Post by **Brandt** » Mon Dec 14, 2015 10:43 pm

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

Post by **velden** » Wed Dec 16, 2015 12:43 am

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.

Brandt · Post by **Brandt** » Wed Dec 16, 2015 7:45 pm

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?

Jeff · Post by **Jeff** » Wed Dec 16, 2015 8:58 pm

You could use CGHeadMaster.
http://dev.cmsmadesimple.org/projects/cgheadmaster

Brandt · Post by **Brandt** » Wed Dec 16, 2015 10:09 pm

Thank you Jeff. How can I combine this with the Gallery Module?

Brandt · Post by **Brandt** » Mon Dec 21, 2015 3:24 pm

I am experimenting, but without succes; I thought this might get me somewhere:

In the Gallery Module > Template:

Code: Select all

{$images->file assign=foo}

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.

Post by **velden** » Mon Dec 21, 2015 3:26 pm

What version of CMSMS do you use?

Brandt · Post by **Brandt** » Mon Dec 21, 2015 3:59 pm

A classic: CMS Made Simple™ 1.11.6 “Merchant”

Post by **velden** » Mon Dec 21, 2015 4:02 pm

In your 'example' try:

Code: Select all

{assign var=foo value=$images->file}

Brandt · Post by **Brandt** » Mon Dec 21, 2015 4:58 pm

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…

Post by **velden** » Mon Dec 21, 2015 5:16 pm

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}"}

Brandt · Post by **Brandt** » Mon Dec 21, 2015 6:40 pm

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

CMS Made Simple Forums

GALLERY og:graphs meta data

GALLERY og:graphs meta data

Re: GALLERY og:graphs meta data

Re: GALLERY og:graphs meta data

Re: GALLERY og:graphs meta data

Re: GALLERY og:graphs meta data

Re: GALLERY og:graphs meta data

Re: GALLERY og:graphs meta data

Re: GALLERY og:graphs meta data

Re: GALLERY og:graphs meta data

Re: GALLERY og:graphs meta data

Re: GALLERY og:graphs meta data

Re: GALLERY og:graphs meta data