No bug Custom Image

Hi John,

so here is what I did. You can easily add an image (but also title / description) the the dpcalendar event by adding the {ochopengrap tag.
ochOpenGraph makes use of ochElements, a free extension I offer to subscribers to extensions that have support for ochElements.
(The automatic selection of intro / full text etc. images in com_content / articles only)

with ochElements you get an editor button that when clicked opens a modal where you can then select the tag you want to insert into the description. The default tags are the ones that I have made in code.
 

I have added a tag in event 14.1. Please note that checking if the og: tags are set can best be done not by sharing the page to Facebook (as facebook will cache what you shared, so changing that page will then not reflect the changes) but in the page source: there you can see the og: / twitter card metatags with their values

here is a blog describing how awesome ochElements is (at least, I find it awesome )  onlinecommunityhub.nl/best-practice/how-...elements-integration
Note that ochOpenGraph doesn't have the support for the ochElements integration tab, so it only displays the default tag.

Hi Ruud,
Thank you! So, I see the new ochElements plugin, I see the button on the DPcalendar event and I see the code on 14.1 and I see the tags in the source. When I go to 14.2 and click the button however, I see the popup and I select ochOpenGraph, but nothing happens. Strange. I'll try another browser.

Hi John,
strange as the logic is the same as for e.g. inserting modules etc.
When you open the browser console, do you see an error that is preventing the pasting of the code?

Hi Ruud,

Thank you,

Initially, there was nothing showing in the console, but in the 'issues' tab, this:

A form field element should have an id or name attribute
A form field element has neither an id nor a name attribute. This might prevent the browser from correctly autofilling the form.
To fix this issue, add a unique id or name attribute to a form field. This is not strictly needed, but still recommended even if you have an autocomplete attribute on the same element.
12 resources

Learn more: The form input element

And this:

Incorrect use of <label for=FORM_ELEMENT>
The label's for attribute doesn't match any element id. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly.
To fix this issue, make sure the label's for attribute references the correct id of a form field.

...see also image attached.

 

Good morning John,
unable to reproduce the issues you are seeing, tried with both FireFox and Chrome. All working correct on your site. The selected tag just inserts into the editor without errors / issues / warnings in the browser console log?

I simply missed it Ruud. I was looking at the bottom of the code and didn't see that it had been placed at the top. I didn't know what the behavior was and was expecting a popup or something for me to enter the info. If I don't place a cursor, it automatically gets placed at the top. Sorry!

I thought there was a way to simply enter  and the tags would get generated based on the content (in this case, the events) and it would pick up the title, description and intro image (image priority set in ochOpenGraph). Could I set that in the OpenGraph advanced section using ?

Or, could I specify that in the code that I place in those events ...essentially, so that this gets picked up based on what I set up in the event itself. I was hoping there would be a way to set this so that when I duplicate an event, the OpenGraph code is duplicated also and picks up the new date, time, title. The intro image is going to stay the same from event to event.
Sorry if I'm asking for more than what can be done out of the box. It's okay if not, I just have to remember to edit the code from event to event.

Thank you!
 

Hi John,
okay so i did a slightly different approach to adding the tag, even easier
the dpcalendar menu - 'calendar' has a setting 'content after' in both the [Options] and [Event] tab. I have added there the tag and now the ochOpenGraph plugin is executed via dpcalendar setting the correct title and description.

I think the difference here is that in this case the complete event is pushed to ochopengraph where in what we did before (the tag in the description), only the description was pushed so the title etc. was not available.

Can you check if this is working better?

the dpcalendar menu - 'calendar' has a setting 'content after' in both the [Options] and [Event] tab. I have added there the tag and now the ochOpenGraph plugin is executed via dpcalendar setting the correct title and description.
 

I think what you meant here is in the [Options] settings, in both the [Calendar] and [Events] tab, yes? In other words, the global settings for the component, not the individual calendar or event options?

...and if that is the case, I'm not seeing any tags there in the global settings (images attached). (I'm clearing browser cache and site cache ...am I missing something?).

Meanwhile, in event 14.2 for example, there is no og code in the description at all, but the tags are showing up in the source code. I am confused!

In event 15.1, where I have set the og code in the description with an explicit path to the image, the source code shows: ...but, the title and description are working great (see third image attached).

I removed the fallback images for both open graph and twitter as they were being called instead of the intro image in the events. I was hoping the fallback image would only be used if there was no intro or full image present. I'm not sure why, in 15.1, the source isn't showing the image call from the og code.

 

Okay I just realized there are strange things going on with this subdomain. I had been having issues with the time zone converter of dpcalendar and the developer had me clone the site to another directory, which I did ("staging3.mindfulnest..."), and with an update to the component, everything worked great. Then, when I updated the component in staging2, it didn't work. Something may be corrupt or missing in the staging2 which might explain why I'm not seeeing what you are seeing and the strange behavior of the images showing on the home page. I'm going to clone staging3 to the root of the site now as I'm basically ready to go, and see how things look there. I'll report back when that is done. From there, we could test in staging 3 and if we get it all right, I can then apply the same to the root.

Sorry for the craziness Ruud!