1. Fabrik 3.9 has been released. If you have updated Joomla to 3.9, this is a required update.
    Dismiss Notice

Add meta Property to Head from Fabrik Element?

Discussion in 'Community' started by talkinggoat, May 13, 2019 at 4:23 PM.

  1. talkinggoat

    talkinggoat Member

    Level: Community
    I need to add a meta og:image property for facebook into the head of a page. Is it even possible to add elements to the head of a document from a Fabrik element or what is the best way? I can write it in Javascript, but it does no good, because Facebook scrapes the page before the JS has run.

    Currently, I am adding the image into a textarea element and assigning it an ID tag of fb_image, to make things a little more dynamic.

    Adding the meta in JS


    Code (Javascript):
    var fbImage = document.getElementById('fb_image').src;
    var createMeta = document.createElement('meta');
    createMeta.setAttribute('property','og:image');
    createMeta.content = fbImage;
    document.getElementsByTagName('head')[0].appendChild(createMeta);
     
  2. lousyfool

    lousyfool Active Member

    Level: Community
  3. startpoint

    startpoint Active Member

    Level: Community
    Through form php plugin may be work properly. I use it in custom template.
    PHP:
    $metatitle = $this->data['table_name___meta_title_raw'];
    $metadesc = $this->data['table_name____meta_description_raw'];
    $metakeywords = $this->data['table_name___meta_keywords_raw'];
    $image = $this->data['table_name___image'];
    $mydoc = JFactory::getDocument();
    $mydoc->setMetadata('title', $metatitle);
    $mydoc->setDescription($metadesc);
    $mydoc->setMetadata('keywords', $metakeywords);
    $mydoc->setMetadata('og:image',$image, 'property');
     
    Last edited: May 13, 2019 at 5:57 PM
    talkinggoat and cheesegrits like this.
  4. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
    Yup, you should be able to do that in a form PHP plugin, on something like onLoad.

    -- hugh
     
    talkinggoat likes this.
  5. talkinggoat

    talkinggoat Member

    Level: Community
    Thank you. I set this to OnLoad in the Form's plugin section as PHP and it works wonderfully.


    PHP:
    $metaImage = $formModel->data["job_types___volunteer_application_image"]; //Gets the HTML for the image.
    $metaDesc = $formModel->data["job_types___position_description"]; //Gets description.
    $metaTitle = $formModel->data["job_types___position_title"];

    if (isset($metaImage)){
      $doc = new DOMDocument(); //Parses the HTML.
      $doc->loadHTML($metaImage); //Inserts the HTML from the image.
      $xpath = new DOMXPath($doc);
      $src = $xpath->evaluate("string(//img/@src)"); //Strips out the src property of the image.
      $baseURL= JURI::base(); //Gets the base URL
        $src = $baseURL.$src; //Combines the base with the image URL.
      $mydoc = JFactory::getDocument();
      $mydoc->setMetadata('og:image',$src, 'property');
    }

    if (isset($metaDesc)){
      $mydoc = JFactory::getDocument();
      $mydoc->setDescription($metaDesc);
    }

    if (isset($metaTitle)){
      $mydoc = JFactory::getDocument();
      $mydoc->setTitle("Volunteer Wanted: ".$metaTitle);
    }
     
     
  6. sunnyjey

    sunnyjey Active Member

    Level: Community
    Thank you for sharing your code. I was looking for it since long time.

    I have some listing which has just single Image and few have multiple images. How to modify the code to check whether if Image element contains single image or multiple images. If it contain multiple images, how to set it to pick up the First image ?
     
  7. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
    If it has multiple images, that's probably an array ...

    Code (Text):

    if (is_array($formModel->data["job_types___volunteer_application_image"]) {
       // get first item from array
       $metaImage = reset($formModel->data["job_types___volunteer_application_image"]);
    }
    else {
       $metaImage = $formModel->data["job_types___volunteer_application_image"];
    }
     
    However, note that if you are using AJAX uploads, I have a feeling that $metaImage may itself wind up being an array of data (crop details, etc), rather than a simple path string. SO if the above doesn't work, try var_dump()'ing $metaImage and see what it is.

    -- hugh
     
    talkinggoat likes this.

Share This Page