When using a Token for a field that can have multiple images the Token (correctly) outputs all image urls something like fileurl1.jpg, file2url.jpg. However Meta tag module also puts all these urls in the og:image, and Facebooks debug tool does not like multiple file urls in one og:image.

Not sure if Meta tag should fix this by using only the first url (which would make this a feature request for Meta tag),

or that we can/should solve this with a Token (maybe generated by imagefield_tokens or token_custom module).

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

SilviuChingaru’s picture

Version: » 7.x-1.x-dev
Category: feature » bug
Priority: Normal » Major

From OpenGraph Array Documentation:

If a tag can have multiple values, just put multiple versions of the same tag on your page. The first tag (from top to bottom) is given preference during conflicts.

  <meta property="og:image" content="http://example.com/rock.jpg" />
  <meta property="og:image" content="http://example.com/rock2.jpg" />

Put structured properties after you declare their root tag. Whenever another root element is parsed, that structured property is considered to be done and another one is started.

For example:

  <meta property="og:image" content="http://example.com/rock.jpg" />
  <meta property="og:image:width" content="300" />
  <meta property="og:image:height" content="300" />
  <meta property="og:image" content="http://example.com/rock2.jpg" />
  <meta property="og:image" content="http://example.com/rock3.jpg" />
  <meta property="og:image:height" content="1000" />

means there are 3 images on this page, the first image is 300x300, the middle one has unspecified dimensions, and the last one is 1000px tall.

This is a bug in the module metatag_opengraph not properly handling multiple images.

I set the priority to major because the module does not meet opengraph standard and is practically unusable with multiple images.

SilviuChingaru’s picture

Status: Active » Needs review
FileSize
2.18 KB

My solution at first look...

SilviuChingaru’s picture

Version: 7.x-1.x-dev » 7.x-1.0-alpha4
FileSize
1.68 KB

Fixed patch mistake (patched .info file also) in patch from #2.

This is the correct patch.

SilviuChingaru’s picture

Component: Code » Open Graph
tempo22’s picture

this patch is working well

Thanks a lot

djschoone’s picture

Great patch. Saved my day!

DamienMcKenna’s picture

Assigned: Unassigned » DamienMcKenna
Status: Needs review » Needs work

At the very least this needs some tidying for Drupal's coding standards, but it's an interesting issue. I'll review this shortly.

mezitlab’s picture

Version: 7.x-1.0-alpha4 » 7.x-1.x-dev

this patch is working well with 7.x-1.0-alpha8 and 7.x-1.0-alpha8+10-dev (2012-Aug-26) too.

SilviuChingaru’s picture

FileSize
872 bytes

Until the core is fixed I made a helper module to fix this so you don't need to patch module after each update...

DamienMcKenna’s picture

What happens if you upload an image with a comma in the filename?

SilviuChingaru’s picture

Hmm... I don't upload files with comma in their name but this might be a problem... This was a temp patch to prove the concept not the final patch. Maybe I'll look deep into this when I'll have a little time... but I'm very busy right now...

aleksey.tk’s picture

Version: 7.x-1.x-dev » 7.x-1.0-beta4

I think all the patches here are a wrong approach - there should be a proper token, like s1l said in initial issue description.

DamienMcKenna’s picture

Version: 7.x-1.0-beta4 » 7.x-1.x-dev
DamienMcKenna’s picture

Assigned: DamienMcKenna » Unassigned
FiNeX’s picture

On beta5 using [node:field-image:file] returns a WSOD. This is the error on the log:

Notice: Undefined property: EntityListWrapper::$file in entity_token_tokens() (line 183 on /var/www/vhosts/example.com/sites/all/modules/contrib/entity/entity_token.tokens.inc).

I've found this reference: http://drupal.org/node/1440928#comment-7066230.

DamienMcKenna’s picture

@FiNexX: Thanks for referencing that bug, clearly there's a problem in Entity API.

GiorgosK’s picture

manoloka’s picture

I think all the patches here are a wrong approach - there should be a proper token, like s1l said in initial issue description.

I think he is right and I thought that these tokens [node:field-fotos:?] were actually for that but they don't work

DamienMcKenna’s picture

If you've got Entity API installed too you should see two sets of tokens for each field - one using underlines and one dashes; try using the *other* token and see if that works.

manoloka’s picture

After trying the helper module at #9 and some research, I see that this is the right approach and the way the og:image tag must render images, 1 tag per image

Balbo’s picture

Should the code in #9 be ported in the module itself? Any news on this issue?

tfranz’s picture

#9 worked for me – thank you!

And even better: this module solves another problem, for me, too:

If there's an image-field, use the image-field as opengraph-image.
Empty image-field? Use the site-logo!

Just enter all possibilities separated by commas, for example:
[node:field_image],[node:field_teaserimage],http://drupal.org/logo.jpg

To avoid empty image-values, change line 25:

-      $output .= theme('metatag_opengraph', array('element' => $new_element));
+     if ($value != '') { $output .= theme('metatag_opengraph', array('element' => $new_element)); };
doitDave’s picture

Sorry, this here is in no detail about "guilt" or "fault" or "blame", this should be about improvement.

First of all, thanks to fiftyz for the simple and effective approach, this is pragmatism as I like it. Once you change

$values = explode(',',$element['#value']);

into

$values = explode(', ',$element['#value']);

you can upload as many images with comma filenames as you wish.

Then, for an as like pragmatic follow-up:

1) If og:image wants a single URL, it is clearly in the metatag module's scope to deal with "inappropriate" tokens. As long as there is no [node:field_yo_mama_image:n] (see below), the fixed theming approach above is clearly the best idea IMO.
2) If there really is not yet a way to get the n-th value out of a field with multiple values, this is of course an important gap in the entity API (or the token-related modules for it). I would intuitively expect [node:field_whatever_image:n] to deliver the n-th single value out of a field. It really made me stumble that this seems to not yet have occured to anyone else.

@21 (Balbo): Yes, it should. Asap. Any customer requests og:image to work and any customer with, say, an online shop where most nodes will have multiple image fields will never understand why it is not possible by default to just do so. And he'd be right.

I would suggest integrating the fix in metatags and after that moving this issue to the most related entity or token project, wherever the mentioned gap may be filled as quickly.

tia!

rvallejo’s picture

@fiftyz: Thanks for the code! I'm including it for now in a custom module I've made for commerce-related metatags (as well as a similar fix for the twitter:image tag).

I'll add some attribution to the code when I commit it later today. It's a necessary fix if you wanna do anything with Pinterest rich pins or Twitter Cards, which is exactly what I'm trying to do with a Drupal Commerce-based site and is why I've included the code in the module for now. I assume the code should make it into the appropriate Metatag submodules eventually though.

If you want to take a look at the sandbox module, it's at https://drupal.org/sandbox/rvallejo/2102725.

DamienMcKenna’s picture

Title: Single image url for image field with multiple images » Single image URL for image field with multiple images

@rvallejo: Excellent! I've submitted a few issues for your sandbox, we can discuss them over there.

Also, I've added a new issue to help drive Commerce integration further: #2103321: Identify new/missing/incomplete ecommerce-related meta tags

Now, back to the topic on hand - how to handle multiple images.

eigentor’s picture

So here is another temporary solution for those stumbling upon this issue.
Put this in the template.php file of your theme, replace YOURTHEME with the name of your theme.

function YOURTHEME_html_head_alter(&$head_elements) {
  // The metatag module prints all images into the og:image metatag if there is 
  // a multiple value imagefield. Use only the first image.
  $images = $head_elements['metatag_og:image']['#value'];
  $head_elements['metatag_og:image']['#value']; = $variable = substr($images, 0, strpos($images, ", "));
}

It uses the comma and space after each image as a delimiter and strips all images from the og:images metatag but the first.
Not the solution this issue is heading for, but sure helpful for people who want to use the metatag module and need a solution on their site now.

idealdesigns’s picture

Modification for #26 solution:
to check if 'metatag_og:image' exists to avoid php errors and to alter only multiple field images, for field with single image the If statement will skip it

function YOURTHEME_html_head_alter(&$head_elements) {

 // The metatag module prints all images into the og:image metatag if there is
    // a multiple value imagefield. Use only the first image.

    if(isset($head_elements['metatag_og:image'])){
   $images = $head_elements['metatag_og:image']['#value'];

    if(strpos($images, ", ") != FALSE)
            $head_elements['metatag_og:image']['#value'] = substr($images, 0, strpos($images, ", "));

    }
}
Clint Eagar’s picture

Hi @idealdesigns how would I make this work for <link rel="image_src" ???

Metatags module has the same problem with this advanced field.

surfgatinho’s picture

Issue summary: View changes

Thanks - #26 , #27 worked for me
Surprised more people haven't encountered this issue...

jofitz’s picture

FileSize
1.65 KB

Here is the patch from #3 re-rolled for beta7.

Frederic wbase’s picture

Patch from #30 works like a charm.
Time to change status to RTBC?

cs_shadow’s picture

Status: Needs work » Needs review
cs_shadow’s picture

Patch #30 works for me. Can RTBC.

cimo75’s picture

Hi
i ve installed the patch but I still get all the images URLs comma separated

leewoodman’s picture

Is this patch available for the current release version?

cimo75’s picture

The patch did its thing on beta9 but I can t see any useful output.

GuillaumeDuveau’s picture

Thanks for #27

leewoodman’s picture

#27 worked for me. I also had the same issue with link rel="image_src" so i did the same as #27

    if(isset($head_elements['metatag_og:image'])){
   $images = $head_elements['metatag_og:image']['#value'];
    if(strpos($images, ", ") != FALSE)
            $head_elements['metatag_og:image']['#value'] = substr($images, 0, strpos($images, ", "));
    }

    if(isset($head_elements['metatag_image_src'])){
   $image_src = $head_elements['metatag_image_src']['#value'];
    if(strpos($image_src, ", ") != FALSE)
            $head_elements['metatag_image_src']['#value'] = substr($image_src, 0, strpos($image_src, ", "));
    }
Lukas von Blarer’s picture

Status: Needs review » Needs work

The re-roll affects og:description as well.

GuillaumeDuveau’s picture

Same problem with Twitter Cards

DamienMcKenna’s picture

Category: Bug report » Feature request
DamienMcKenna’s picture

Status: Needs work » Closed (duplicate)

Thank you for the patches, but we're going to make this a general API change in #1282636: Support meta tags that allow multiple values (repeated tags).

DamienMcKenna’s picture

FYI I've committed some code in #1282636: Support meta tags that allow multiple values (repeated tags) that supports this feature - even though I didn't use the work from this issue I really do appreciate the effort everyone put into it!

haysuess’s picture

I have tons of products with multiple images. The committed code in #43 puts multiple og:image tags in my source code, but adds the images in alphabetical order.

I need one of the two:

  1. To be able to add all images as og:image, but in the same order as they are shown in Drupal.
  2. To be able to show just the Delta 0 (first) image, like this: [node:field_image:0]

Can anyone help?

DamienMcKenna’s picture

@hayseuss: Lets move your bug into #2281833: Multi-item fields should output in the same order as input, thanks for reporting it.

kopeboy’s picture

Has the working patch in #30 been included in any stabe release?

Facebook sharer still isnt working with images cause all my product nodes have multiple images..
This cause facebook to automatically load images from the page, which can be the wrong ones and with wrong resolutions

manoloka’s picture

Have you tried the approach at #9 ... as I see it, right now is the best way to go.

It worked for me.

DamienMcKenna’s picture

Please stop replying to this issue, please use the current -dev release (or the next beta / RC release) and open up a new issue to discuss any other problems you have with the functionality. Thank you.