New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Disable Cover inside the article? To avoid images repeating twice within the article #57

Open
gabu69 opened this Issue Mar 12, 2016 · 15 comments

Comments

Projects
None yet
8 participants
@gabu69

gabu69 commented Mar 12, 2016

Some sites will use some internal images of the article for the features image/cover but Facebook doesn't allow this:

2) Article Formatting
Instant Articles must not contain formatting that creates a confusing experience or which makes articles appear broken. For example:

  1. Images or videos must not be repeated within the article. The image or video set as the cover in the article header may not appear a second time in the article body, unless you are granted a special exception by Facebook.

Have seen some pages disabled it i.e. CNN

How can I acomplish this? Should I remove from fb-instant-articles/template.php all this?:

<!-- The cover -->
                <?php $cover_media = $this->get_cover_media(); ?>
                <?php if ( 'image' === $cover_media->type ) : ?>
                    <figure>
                        <img src="<?php echo esc_url( $cover_media->src ); ?>" />
                        <?php if ( strlen( $cover_media->caption ) ) : ?>
                            <figcaption><?php echo esc_html( $cover_media->caption ); ?></figcaption>
                        <?php endif; ?>
                    </figure>
                <?php elseif ( 'video' === $cover_media->type ) : ?>
                    <figure>
                        <video>
                            <source src="<?php echo esc_url( $cover_media->src ); ?>" type="<?php echo esc_attr( $cover_media->mime_type ); ?>" />
                        </video>
                    </figure>
                <?php elseif ( 'slideshow' === $cover_media->type ) : ?>
                    <figure class="op-slideshow">
                        <?php foreach ( $cover_media->items as $item ) : ?>
                            <figure>
                                <img src="<?php echo esc_url( $item->src ); ?>" />
                            </figure>
                        <?php endforeach; ?>
                    </figure>
                <?php endif; ?>

@gabu69 gabu69 changed the title from Disable Cover in the article header? to Disable Cover inside the article? To avoid images repeating twice within the article Mar 12, 2016

@gabu69 gabu69 closed this Mar 14, 2016

@schneidan

This comment has been minimized.

Show comment
Hide comment
@schneidan

schneidan Apr 15, 2016

Curious why this one was closed? It does seem like a relevant choice, if only as an option for those who want to use it?

schneidan commented Apr 15, 2016

Curious why this one was closed? It does seem like a relevant choice, if only as an option for those who want to use it?

@jerclarke

This comment has been minimized.

Show comment
Hide comment
@jerclarke

jerclarke Feb 2, 2017

This definitely deserves a response if it's going to be closed. The behavior/rules are all over the place on this and it's very confusing.

[EDIT: Just realized it was closed by OP not the devs, sorry for misunderstanding, still think it's an important issue]

This forum post highlights one aspect of it, which is that there is sometimes an error for almost-duplicate images, but never an error for completely-the-same images. Very strange and if FB genuinely has a rule against duplicating images, the error should show when the images are the same.

https://wordpress.org/support/topic/general-warningrepeating-cover-image-and-first-image/#post-8731646

On top of that the actual behavior of iA posts seems erratic (as I describe in that thread). When I preview posts in the FB Pages app I sometimes see both cover and first image, sometimes see only cover and sometimes only see first image. All in cases where I used the same image at the start of a post and as the featured image.

Clarity on this would be very valuable and mentioning whatever the best practice is in the plugin docs is important.

NOTE: I have submitted a site for review that violates the "rule" quoted above but not recieved a response yet. Not sure if they will reject me for my violation or not, but the behavior where they automatically correct the duplication implies to me that they are accepting it.

jerclarke commented Feb 2, 2017

This definitely deserves a response if it's going to be closed. The behavior/rules are all over the place on this and it's very confusing.

[EDIT: Just realized it was closed by OP not the devs, sorry for misunderstanding, still think it's an important issue]

This forum post highlights one aspect of it, which is that there is sometimes an error for almost-duplicate images, but never an error for completely-the-same images. Very strange and if FB genuinely has a rule against duplicating images, the error should show when the images are the same.

https://wordpress.org/support/topic/general-warningrepeating-cover-image-and-first-image/#post-8731646

On top of that the actual behavior of iA posts seems erratic (as I describe in that thread). When I preview posts in the FB Pages app I sometimes see both cover and first image, sometimes see only cover and sometimes only see first image. All in cases where I used the same image at the start of a post and as the featured image.

Clarity on this would be very valuable and mentioning whatever the best practice is in the plugin docs is important.

NOTE: I have submitted a site for review that violates the "rule" quoted above but not recieved a response yet. Not sure if they will reject me for my violation or not, but the behavior where they automatically correct the duplication implies to me that they are accepting it.

@everton-rosario

This comment has been minimized.

Show comment
Hide comment
@everton-rosario

everton-rosario Feb 17, 2017

Collaborator

Reopening the issue.
@jeremyclarke How was your submission?

Collaborator

everton-rosario commented Feb 17, 2017

Reopening the issue.
@jeremyclarke How was your submission?

@jerclarke

This comment has been minimized.

Show comment
Hide comment
@jerclarke

jerclarke Feb 17, 2017

My submission was accepted, I think when there were still some cases of duplicated heading. So I think they may be accepting submissions without being too strict about it but I'm not totally sure.

In the end I figured out the filters to remove the cover image and have settled on that as my final solution. Most of our posts would have "duplicate cover and first image" and when FB DOES show them both (still not sure of what triggers it) the result is just awful. The result is by the time my sites are getting approved I already had the no-cover-image code running so I'm not totally sure.

FWIW IMHO the iA design works great with a big image below the title, it's not a huge flaw as long as you tend to include the image near the top of the post.

Here's code to disable the featured image->cover image relationship:

/**
 * Filter for Facebook Instant Articles that disables the featured image 
 * as "cover image" for all instant articles.
 *
 * By default FB uses the WP featured image as the "Cover Image" for ia, 
 * which shows above the headline.  * FB forbids having that image repeat
 * in the post, and especially when it's at the top of the post, it looks
 * terrible to have two copies in a row. 
 * 
 * This code disables the Cover Image entirely, and is useful if you 
 * usually have the featured image inserted at thetop of your posts so you
 * don't need the cover image. 
 * 
 * Note: This has no effect on the FB share display, which is driven by
 * the Open Graph og:image tag and not iA. 
 *
 * @param array $image_data
 *
 * @return array
 */
function gh_example_filter_instant_articles_remove_featured_image($image_data) {
	return array(
		'src' => '',
		'caption' => '',
	);
}
add_filter('instant_articles_featured_image', 'gh_example_filter_instant_articles_remove_featured_image');

jerclarke commented Feb 17, 2017

My submission was accepted, I think when there were still some cases of duplicated heading. So I think they may be accepting submissions without being too strict about it but I'm not totally sure.

In the end I figured out the filters to remove the cover image and have settled on that as my final solution. Most of our posts would have "duplicate cover and first image" and when FB DOES show them both (still not sure of what triggers it) the result is just awful. The result is by the time my sites are getting approved I already had the no-cover-image code running so I'm not totally sure.

FWIW IMHO the iA design works great with a big image below the title, it's not a huge flaw as long as you tend to include the image near the top of the post.

Here's code to disable the featured image->cover image relationship:

/**
 * Filter for Facebook Instant Articles that disables the featured image 
 * as "cover image" for all instant articles.
 *
 * By default FB uses the WP featured image as the "Cover Image" for ia, 
 * which shows above the headline.  * FB forbids having that image repeat
 * in the post, and especially when it's at the top of the post, it looks
 * terrible to have two copies in a row. 
 * 
 * This code disables the Cover Image entirely, and is useful if you 
 * usually have the featured image inserted at thetop of your posts so you
 * don't need the cover image. 
 * 
 * Note: This has no effect on the FB share display, which is driven by
 * the Open Graph og:image tag and not iA. 
 *
 * @param array $image_data
 *
 * @return array
 */
function gh_example_filter_instant_articles_remove_featured_image($image_data) {
	return array(
		'src' => '',
		'caption' => '',
	);
}
add_filter('instant_articles_featured_image', 'gh_example_filter_instant_articles_remove_featured_image');
@jerclarke

This comment has been minimized.

Show comment
Hide comment
@jerclarke

jerclarke Feb 17, 2017

In terms of what to do, a setting that affects this might be welcomed by a lot of users who have this problem.

Ideally it would be something like "[x] If cover+first image are duplicates (i.e. that error comes up) disable featured image!"

But something like this would also be useful "[x] Don't use WP Featured Image as iA Cover Image (Avoids duplication)"

Potentially a per-post setting would be useful, so we could just have this apply to posts that start with their featured image, but that's probably "too many options".

jerclarke commented Feb 17, 2017

In terms of what to do, a setting that affects this might be welcomed by a lot of users who have this problem.

Ideally it would be something like "[x] If cover+first image are duplicates (i.e. that error comes up) disable featured image!"

But something like this would also be useful "[x] Don't use WP Featured Image as iA Cover Image (Avoids duplication)"

Potentially a per-post setting would be useful, so we could just have this apply to posts that start with their featured image, but that's probably "too many options".

@schneidan

This comment has been minimized.

Show comment
Hide comment
@schneidan

schneidan Feb 17, 2017

I, too, had not realized it was closed by OP. I will give your filter suggestion a try when I get a chance, @jeremyclarke -- thank you!

As for the checkbox options, the second one you suggested is exactly what I had in mind. I use the WP Featured Image for social media cards and the like, so it is sometimes different than the lead image in a post, and other times not. Either way it does look sub-par in iA with both, and mine have the double in every post because I always lead with an image, although my site was also accepted (beforehand my first post in this thread, even).

Thanks for digging into this.

schneidan commented Feb 17, 2017

I, too, had not realized it was closed by OP. I will give your filter suggestion a try when I get a chance, @jeremyclarke -- thank you!

As for the checkbox options, the second one you suggested is exactly what I had in mind. I use the WP Featured Image for social media cards and the like, so it is sometimes different than the lead image in a post, and other times not. Either way it does look sub-par in iA with both, and mine have the double in every post because I always lead with an image, although my site was also accepted (beforehand my first post in this thread, even).

Thanks for digging into this.

@rondavilar

This comment has been minimized.

Show comment
Hide comment
@rondavilar

rondavilar Feb 18, 2017

@jeremyclarke I'm completely new to programming and at the student level. Where does one insert the code to disable the cover image. Is it in the custom transform rules or in one of the elements .php. If so, which?

rondavilar commented Feb 18, 2017

@jeremyclarke I'm completely new to programming and at the student level. Where does one insert the code to disable the cover image. Is it in the custom transform rules or in one of the elements .php. If so, which?

@jerclarke

This comment has been minimized.

Show comment
Hide comment
@jerclarke

jerclarke Feb 20, 2017

@rondavilar To start, avoid editing plugins or the core of WordPress at all costs, it makes it impossible to update them.

The correct place for my code is either in a custom plugin (not that hard but maybe not what you need), or the functions.php file of your theme.

functions.php is what I'd recommend.

jerclarke commented Feb 20, 2017

@rondavilar To start, avoid editing plugins or the core of WordPress at all costs, it makes it impossible to update them.

The correct place for my code is either in a custom plugin (not that hard but maybe not what you need), or the functions.php file of your theme.

functions.php is what I'd recommend.

@rondavilar

This comment has been minimized.

Show comment
Hide comment
@rondavilar

rondavilar Feb 23, 2017

@jeremyclarke Thanks much! Is it normal for plugins not to have basic features? Eg. A global footer or to disable the kicker? I'm having a really hard time figuring this out.

rondavilar commented Feb 23, 2017

@jeremyclarke Thanks much! Is it normal for plugins not to have basic features? Eg. A global footer or to disable the kicker? I'm having a really hard time figuring this out.

@jerclarke

This comment has been minimized.

Show comment
Hide comment
@jerclarke

jerclarke Feb 23, 2017

Plugins and WordPress core often follow a "less options is better" approach to keep things simple for users to understand and simple to maintain. The more settings you add the more likely you break things for some users and not others in the future etc.

Plugins like this tend to get the basics done for you, then rely on advanced users to use the API to do what they need (like adding footers/kicker etc). One nice thing is someone could make an add-on plugin to this one, that did things like that if they wanted because it's all done with the API. Right now I haven't seen anything like that, but it's totally possible, and that plugin could exist without the author having to re-do all the work of having the core iA features set up.

Anyway, this isn't really the place for plugin philosophy ;)

jerclarke commented Feb 23, 2017

Plugins and WordPress core often follow a "less options is better" approach to keep things simple for users to understand and simple to maintain. The more settings you add the more likely you break things for some users and not others in the future etc.

Plugins like this tend to get the basics done for you, then rely on advanced users to use the API to do what they need (like adding footers/kicker etc). One nice thing is someone could make an add-on plugin to this one, that did things like that if they wanted because it's all done with the API. Right now I haven't seen anything like that, but it's totally possible, and that plugin could exist without the author having to re-do all the work of having the core iA features set up.

Anyway, this isn't really the place for plugin philosophy ;)

@gabu69

This comment has been minimized.

Show comment
Hide comment
@gabu69

gabu69 Apr 24, 2017

Yea I think this needs to be a feature, facebook is now inboxing whoever uses cover image and the same image inside the article.

Any idea aside of the code to implement this fast and batch update articles?

gabu69 commented Apr 24, 2017

Yea I think this needs to be a feature, facebook is now inboxing whoever uses cover image and the same image inside the article.

Any idea aside of the code to implement this fast and batch update articles?

@nabeelmoeen

This comment has been minimized.

Show comment
Hide comment
@nabeelmoeen

nabeelmoeen Aug 17, 2017

hi Jeremy,
thanks for sharing the code to add filter. unfortunately, when i added this to my functions.php file my site stopped working, after some trial and error I changed the name of the function to remove the leading "57_" and it seems to have done the trick.

I wanted to ask if it is ok to modify the function name? and secondly, any ideas why my theme crashes when i use the name with leading numbers.

nabeelmoeen commented Aug 17, 2017

hi Jeremy,
thanks for sharing the code to add filter. unfortunately, when i added this to my functions.php file my site stopped working, after some trial and error I changed the name of the function to remove the leading "57_" and it seems to have done the trick.

I wanted to ask if it is ok to modify the function name? and secondly, any ideas why my theme crashes when i use the name with leading numbers.

@jerclarke

This comment has been minimized.

Show comment
Hide comment
@jerclarke

jerclarke Aug 17, 2017

Sorry everyone, I updated the example code to not have a number in the function name.

jerclarke commented Aug 17, 2017

Sorry everyone, I updated the example code to not have a number in the function name.

@VanasriJithendar

This comment has been minimized.

Show comment
Hide comment
@VanasriJithendar

VanasriJithendar Mar 19, 2018

Where to paste the code @jerclarke

VanasriJithendar commented Mar 19, 2018

Where to paste the code @jerclarke

@jerclarke

This comment has been minimized.

Show comment
Hide comment
@jerclarke

jerclarke commented Mar 19, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment