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).

Files: 
CommentFileSizeAuthor
#30 metatag-1305402.patch1.65 KBJo Fitzgerald
PASSED: [[SimpleTest]]: [MySQL] 73 pass(es).
[ View ]
#9 metatag_opengraph_imgfix.zip872 bytesfiftyz
#3 multiple_image-1305402-1.patch1.68 KBfiftyz
PASSED: [[SimpleTest]]: [MySQL] 15 pass(es).
[ View ]
#2 multiple_image-1305402-1.patch2.18 KBfiftyz
PASSED: [[SimpleTest]]: [MySQL] 15 pass(es).
[ View ]

Comments

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.

Status:Active» Needs review
StatusFileSize
new2.18 KB
PASSED: [[SimpleTest]]: [MySQL] 15 pass(es).
[ View ]

My solution at first look...

Version:7.x-1.x-dev» 7.x-1.0-alpha4
StatusFileSize
new1.68 KB
PASSED: [[SimpleTest]]: [MySQL] 15 pass(es).
[ View ]

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

This is the correct patch.

Component:Code» Open Graph

this patch is working well

Thanks a lot

Great patch. Saved my day!

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.

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.

StatusFileSize
new872 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...

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

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...

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.

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

Assigned:DamienMcKenna» Unassigned

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.

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

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

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.

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

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

#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:

<?php
-      $output .= theme('metatag_opengraph', array('element' => $new_element));
+     if (
$value != '') { $output .= theme('metatag_opengraph', array('element' => $new_element)); };
?>

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

<?php
$values
= explode(',',$element['#value']);
?>

into

<?php
$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!

@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.

Title:Single image url for image field with multiple imagesSingle 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.

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.

<?php
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.

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

<?php
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, ", "));
    }
}
?>

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

Metatags module has the same problem with this advanced field.

Issue summary:View changes

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

StatusFileSize
new1.65 KB
PASSED: [[SimpleTest]]: [MySQL] 73 pass(es).
[ View ]

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

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

Status:Needs work» Needs review

Patch #30 works for me. Can RTBC.