ideag / content-cards Goto Github PK

A WordPress plugin to display links as "cards" based on OpenGraph information

Home Page: https://wordpress.org/plugins/content-cards

PHP 83.25% CSS 6.87% JavaScript 9.88%

content-cards's Introduction

=== Content Cards ===

Contributors: ideag, khromov
Tags: opengraph, open graph, oembed, link cards, snippet, rich snippet, content card
Donate link: http://arunas.co#coffee
Requires at least: 4.1.0
Tested up to: 4.9
Stable tag: 0.9.7
License: GPLv2
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Embed any link from the web easily as a beautiful Content Card.

== Description ==

Content Cards make ordinary web links great by making it possible to embed a beautiful Content Card to link to any web site.

By using OpenGraph data, Content Cards grabs the title, description and associated image to the links you embed - it's similar to how you can embed other websites, such as YouTube, Twitter, SoundCloud and more.

For individual links, You can insert a Content Card via shortcode `[contentcards url="http://yoursite.com/article-1"]`. If you often use Content Cards for some website, you can register the domain name (for example: `yoursite.com`) as an oEmbed provider via Plugin's Settings page and then it will behave the same way other oEmbed providers do - you will just have to paste plaintext link to a separate paragraph an Content Card will be generated automatically.

This plugin was built by [Arūnas Liuiza](http://arunas.co) and [Stanislav Khromov](http://snippets.khromov.se/). It is being developed on [GitHub](http://github.com/ideag/content-cards). If you have any questions, issues, need support, or want to contribute, please let us know [here](http://github.com/ideag/content-cards/issues).

We are machines that convert coffee into code, so feel free to [buy us a cup](http://arunas.co#coffee). Or two. Or ten.

Also, please check out our other plugins:

* Arūnas: [Gust](http://arunas.co/gust), [tinyCoffee](http://arunas.co/tinycoffee), [tinySocial](http://arunas.co/tinysocial), [tinyTOC](http://arunas.co/tinytoc), [tinyIP](http://arunas.co/tinyip) (premium) and [Post Section Voting](http://arunas.co/gust)
* Stanislav: [WordPress Instant Articles](http://wordpress.org/plugins/instant-articles), [Content Template Widget for Toolset Views](https://wordpress.org/plugins/view-template-widget-for-toolset-types-views/), [Email Obfuscate Shortcode](https://wordpress.org/plugins/email-obfuscate-shortcode/), [English WordPress Admin](https://wordpress.org/plugins/english-wp-admin/), [Distraction Free Writing mode Themes](https://wordpress.org/plugins/distraction-free-writing-mode-themes/), [Thumbnail Upscale](https://wordpress.org/plugins/thumbnail-upscale/), [WP Users Media](https://wordpress.org/plugins/wp-users-media/) and [Views Output Formats](https://wordpress.org/plugins/views-output-formats/)

== Frequently Asked Questions ==

There are two ways of inserting Content Cards into WordPress posts - shortcode and oEmbed.

= Shortcode =

Shortcode is the simplest way - You just put `[contentcards url="http://yourdomain.com/article/1"]` into your post content and it gets replaced with a content card.
The shortcode accepts two attributes:

* `url` (requried) - link to the site you want to display Content Card for.
* `target` (optional) - if you want force links to open in new tab, use `target="_blank"` the same you would in actual links. This overrides the global option in Content Cards Settings page.

You can also insert the shortcode via a button in your visual editor. Start by pressing the Content Cards icon in WordPress visual editor's (TinyMCE) toolbar. If no other plugins are adding their buttons, our button should be the last one in the top toolbar.

= oEmbed =

If You find that you are adding a lot of Content Cards from some single domain, You can save yourself some work, by white-listing that website as oEmbed provider in Content Card Settings page.

White-listed sites work the same way any other oEmbed provider in WordPress (YouTube, Twitter, SoundCloud, etc.) - You just need to put a plaintext link in a separate line in the WordPress editor and it will be replaced with a Content Card.

In Content Cards Settings page you can provide a list of white-listed sites. Put only domain name (`example.com`), one domain per line.

= Skins =

Content Cards come with two default skins - `Default` and `Default Dark` - created by Stanislav Khromov. These skins are designed to provide minimal structural styling and blend in nicely with active theme by inheriting the font from the theme.

All skin template files can be found in `content-cards/skins/*` directory and they can be overwritten by providing the same template in active theme. For example, if you want to overwrite Content Cards stylesheet, You should add `content-cards.css` to Your theme directory.

Main skin template is `content-cards.php`. If no other skin templates are defined, Content Cards will fall back to this one, the same way WordPress falls back to `index.php`. If you want more granular templates, you can provide `content-cards-{$type}.php` templates, (`content-cards-website.php`, `content-cards-article.php`, etc.). `$type` is based on `og:type` meta data provided by website.

Content Cards provides five new template tags: `get_cc_data()`, `the_cc_data()` and `the_cc_target()`:

* `get_cc_data( $key, $sanitize = false )` - **returns** `$key` OpenGraph data field (i.e. 'title', 'description', etc.). If valid `$sanitize` function is provided, the data is escaped using it.
* `the_cc_data( $key, $sanitize = false )` - according to WordPress tradition, it **prints** the same data that `get_cc_data()` would return.
* `the_cc_target()` - a special helper function, that prints ` target="_blank"` to links if needed (according to plugin/shortcode settings). Usage: `<a href=""<?php the_cc_target() ?>>`.
* `get_cc_image( $size, $sanitize = false )` - *new in v0.9.1* - returns a link to image if there is one. Defaults to image, cached in Media Library, then to remote image. For cached images, you can use `$size` parameter to get specific WordPress image size.
* `the_cc_image( $size, $attrs = array() )` - *new in v0.9.1* - prints an image tag. Uses `get_cc_images()`.
* `the_cc_css_classes( $classes )` - *new in v0.9.4* - a filterable template tag to print out CSS classes for the main div of Content Card. Custom CSS classes can also be passed via `class` attribute in the shortcode

Also since `v0.9.1` you can use `'favicon'` key in `get_cc_data()/the_cc_data()` to display favicon if the remote site provides one.

= Adding CSS classes to the content card container

**Filter** Adding a class is easy thanks to the `content_cards_css_classes` filter.

    add_filter('content_cards_css_classes', function($classes) {
        $classes[] = 'my_class';
        return $classes;
    });

**Shortcode** You can also add custom CSS classes on card-by-card basis using `class` attribute in the shortcode:

`[contentcards url="http://arunas.co" class="my_class"]`

= Requirements =

This plugin requires WP_Cron to be in proper working order.

= Override the default options =

If you are running this plugin on a multisite, you may wish to set site-wide settings and disable the Content Cards settings page on each separate blog.

To do this, you can use the `content_cards_options` hook, like this:

    add_filter('content_cards_options', function($data) {

        //Disable admin page
        $data['enable_admin_page'] = false;

        return $data;
    });

You can also override a number of other options using this hook. For example, here we set the theme to "default-dark":

    add_filter('content_cards_options', function($data) {

        //Disable admin page
        $data['skin'] = 'default-dark';

        return $data;
    });

== Installation ==

* Go to your admin area and select Plugins -> Add new from the menu.
* Search for "Content Cards".
* Click install.
* Click activate.

== Screenshots ==

1. A Content Card embedded in post content
2. Content-cards are fully integrated with the visual editor
3. The dialog to insert Content Cards shortcode into post content
4. The Content Cards settings page
5. The Content Cards appearance on the official "Twenty" family of WordPress themes

== Changelog ==

= 0.9.7 =

* added sanitization for OpenGraph data to prevent possible XSS attack (reported by Vahid Nameni)
* added some fixes for WordPress autopeeing on our snippet code.

= 0.9.6 =

* add textdomain
* fix [] not supported on strings error

= 0.9.5 =

* improved handling of non UTF-8 encoded websites

= 0.9.4 =

* bugfix - WordPress 4.4 breaks relative requires/includes, so converted them to absolute ones
* enhanced OpenGrahp image detection - uses first image if more than one is available
* cached images are now removed on plugin deactivation/removal
* added a toggle to disable local image caching

= 0.9.3 =

* bugfix 'undefined' `download_url()` function.
* bugfix `force_absolute_url()` method to work correctly with protocol-agnostic (//domain.com) URIs.
* enhanced favicon detection mechanism.

= 0.9.2 =

* fixes a bug where `wp-admin` became unaccessible due to 'undefined' `get_current_screen()` function

= 0.9.1 =

* New feature - Content Card images are now cached in Media Library.
* Added `'favicon'` key to display site icon.
* Content Cards' `max-width` limited to 600px via CSS.
* Added an option to limit how many words should be displayed in `'description'`.
* Fixed a bug where non absolute URIs were provided for favicon and/or image in OG:data
* Added an icon for TinyMCE editor button.
* Shortcode loading screen now is configurable via Skins.

= 0.9.0 =

* initial release to `WordPress.org`

content-cards's People

Contributors

Stargazers

Watchers

Forkers

digideskio emanuelst delt-stl iimmbiz ipublicis weatherforddigital

content-cards's Issues

HTTPS URLs don't work

Hi,

first of all, thank you for your plugin :)
I'm trying to use it on my personal blog but seems it doesn't work for any HTTPS urls.
HTTP version of the same URL is ok. No errors on error log.

I use PHP 7 over nginx with PHP-fpm.

Any idea about the problem?

OpenGraph data storage

Better OpenGraph data storage.

To Do:

store OG data in postmeta
update OG data via WP_Cron
add an option to Plugin Settings UI for update interval.
cleanup postmeta fields if link gets removed from post
? add a cool down interval before retrying to get initial OG data if first attempt was unsuccessful

Ideas:

Optional expiration time for the opengraph oembeds and refresh them in the background. (Maybe possible to piggyback on core WP functions.) via @khromov

save the og data as a custom field into postmeta. That way it minimizes delays due to link rot and page load times waiting for embeds. via @lincourtl

Grab data parsed and generate custom post with metadata?

Hi all,
What if the parser already being used could populate a wp_post and its metadata? The way it would work would be the same as now: a button in tinymce where user can put an url. But after url is passed, the content, description and metadata could be populated with the data grabbed. So we would not have a simple card, but a full post.

Problematic URLs

A list anyone can contribute to.

URL http://shaminnong.blog.sohu.com/309687253.html
Problem Broken encoding in title field. (Probably description too if there was one.)

Use Content Cards logo in TinyMCE button instead of the "CC" text.

As description.

Ability to set max width of Content Card

I tried this across some themes and some of them have very large columns, which means the content gets stretched to 1000px or more.

If we have an option for the max width of the content card and then center it, we would be able to let the user decide.

Validation and template functions

Right now we're using esc_url() for some variables in the template functions, I propose instead that we create dedicated functions that are escaped properly ahead of time:

the_cc_url();
the_cc_title();
the_cc_description();
the_cc_site_name();
the_cc_domain(); //New suggestion! Example: domain.com, like Facebook does it

These would also need to have versions starting with get_ as well.

It would imho simplify templating quite a bit.

CPT support + custom TinyMCE locations

As per:
https://wordpress.org/support/topic/script-not-loading-with-acf-wysiwyg-editor?replies=1#post-7454794

Make sure Content Cards work with custom post types.
See if we can support the most common use cases of TinyMCE outside the post editor:
- In ACF (on posts)
- In ACF (on settings pages)
- In the Black Studio TinyMCE Widget plugin

Loading icon for dark theme

Right now, the light theme loading gif is always used. We need to make a separate dark gif that matches the dark color schemes, add in the proper filters etc.

v0.9.6

It is way, way past time to release a new version. There are a couple of bugs that need to be fixed and some feature requests to be considered. I'll use this ticket to keep track of all the things that need to be done for the next release.

#83 Caching setting (PR #88)
#82 Optimize for AMP (PR #90)
#86 Conflict with other plugin due to OpenGraph class (PR #91)
#85 Custom themes for specific shortcodes (PR #95)
#84 Linkedin links
#89 Check compatibility with Twenty Seventeen

Are Content Cards Tagable? (ifSoHow?)

Hello! I was wondering if it's possible to categorize a content card by tags so a user could pull up all cards under whatever category tag they may be interested in?

Thank you!

Damon K.

Toggle for local image cache

I can imagine some sites don't want to cache OG images locally so being able to toggle it would be nice

WP Site Images displaying too large next to site names

Wow, this plugin has come so far in so short a time! Thanks for all your work on Content Cards. I can't believe nobody hasn't done this before now.

Just a note that it seems the new WordPress site images are being shown at too large a size next to content_cards_site_name.

You can see an example here: http://leolincourt.com/cc-card-demo/

The regular news sites, and the one WP site which isn't using the new site images, display at icon size. Meanwhile the two WP sites using the new site images are being displayed too large.

<div class="content_cards_site_name">
  <img scale="0" src="//subpanda.com/wp-content/uploads/2015/03/62881.png.jpg" alt="Subsequent Panda Creation" class="content_cards_favicon">
  Subsequent Panda Creation
</div>

Encoding issues for cached image filename

There seems to be some encoding issues if the cached filename contains special characters, try embedding this link:
http://www.aftonbladet.se/nyheter/article21396018.ab

The result in a 404 image:
http://site.dev/wp-content/uploads/2015/09/BEDR%C3%84GERI.jpg

However, the og:image is correctly placed:
http://gfx.aftonbladet-cdn.se/image/21396163/300/imageColumn/ffa13d83b9807/BEDR%C3%84GERI.JPG

TinyMCE button

TinyMCE button that prints a shortcode to to embed an url

Button - done
To Do: localize dialog strings

Can't change "Open in new tab" setting after it has been set initially

Create new Content Card
Click OK in the modal
Edit the modal, the "Open in new tab" setting is gone

Rename repository

Before this moves much forward, I'd like to rename the repo to ideag/content-cards to mirror the name on the WP.org repo.

Uninstall hook

Add an uninstall hook to cleanup postmeta if plugin is deleted.

Create multiple skins

So, the skins are now PHP-enabled. You can use get_cc_data($key) and the_cc_data($key) to get OpenGraph data and the_cc_target() to insert target="_blank" if it was turned on via settings / shortcode arguments.

Also, the skins are now autodetected via a header in the CSS file (not unlike plugins/themes in WordPress). The only required and used value at the moment is Skin Name.

v1.0.0

Generic Light
Generic Dark

Future releases

Bug with non-absolute image paths

To reproduce:

Embed the following URL via shortcode:
http://www.dramaten.se/Repertoar/Beckomberga/

Result: The image is broken and links to:
/Global/Repertoar/Beckomberga/BOB_lans_P_940X608b.jpg

Here is that meta property:

<meta property="og:image" content="/Global/Repertoar/Beckomberga/BOB_lans_P_940X608b.jpg" />

If we find a non-absolute path, we need to prepend the domain to it.

Text wrapping inconsistent on Twenty Fifteen

Sometimes the text in the default skin goes outside the Content Card box on the frontend on Twenty Fifteen.

PHP support in templates

Allow PHP in templates, making them more in WordPress style and flexible.
Instead of file_get_contents(), use includes and output buffering.
Instead of %%title%% use <?php the_og_value('title'); ?> to insert OpenGraph data.

Conflict with other plugin using OpenGraph class

https://wordpress.org/support/topic/conflict-with-another-plugin-26/

Simplify oEmbed white list rules

User should only need to enter a domain (ie. google.com) and the rest of the regexp rules get added internally.

1.0.0

#69 A widget
#67 CPT support
#51 Caching issues

Add max number of links processed per batch and add a weekly schedule

We're going to be rolling this out on a WP network where thousands of content cards will be inserted, processing all of them every day would take a really long time. So I suggest we set a max number of links to be checked every time the cron job runs, something like 30 (can be user configurable).

A "Weekly" schedule would also be nice.

Finally, if the OG is working fine, but on the next check-up, the site is down, we still keep the old data, right @ideag ?

Script to remove cached images from Media Library

Critical issue with image caching

After updating to 0.9.1 and trying to add a content card, it went into an infinite loop and started downloading images infinitely. It created 1000 images before I managed to manually stop the web server.

Aside from that, these images were not properly hidden from the media library.

Here's an example:

I suggest retracting the 0.9.1 upgrade for now. @ideag

Optimize rendering on AMP pages

Great work on the plugin! There is one thing that bothers me a bit though. I've recently installed the AMP plugin and since the AMP standard features a very limited subset of HTML/CSS, cards look suboptimal on my AMP pages.

Normal rendering

With AMP-restrictions turned on

I am raising this issue, looking for an advice, and potentially hoping to help you guys solve this issue. I think that eventually, card layout should simply fall back to a Blockquote style, similar to how Embedly cards get displayed, when JavaScript gets turned off

Allow for choosing a custom theme in the shortcode

A possible solution for: https://wordpress.org/support/topic/how-to-clone-this-plugin-to-have-2-of-them-installed-simultaneously/

Skin detection system

Skin detection system, similar to Themes (based on a comment block in stylesheet)

Ideas for future features

multiple people have requested a skin where image is smaller and on the side of the text, not at the top.
allow people to choose the image if site provides several options WordPress.org
"Flush cache" button to flush all cached card data.
Cache favicon (Maybe? For consistency?)
#56 grid layout for cards WordPress.org - we decided to allow custom CSS classes via shortcode/filters, but not to implement grid layout ourselves.
#56 Filterable CSS classes
#55 Toggle for local image cache. I can imagine some sites don't want to cache OG images locally so being able to toggle it would be nice
Multisite support (in terms of access control. has to be discussed which was is the best to do this)

Coming from feedback on Facebook, WP.org, etc. Will be split to separate issues when/if we decide to pursue them.

fill and update `readme.txt`

Update readme.txt:

Ability to not cache images locally

As per:
https://wordpress.org/support/topic/legal-worries?replies=1

Add a Content Cards widget

As per:
https://wordpress.org/support/topic/content-cards-in-sidebar-widgets?replies=1#post-7614559

Shouldn't be too hard, just a standard width with a text input that runs the CC shortcode callback.

Doesn't work with "umlaute" (in german)

Hi,

obviously your plugin can't handle german sites with umlaute in the headlines. It stopps to read the headlines exactly at the umlaut.

That should be easy to fix, shouldn't it?

THANK YOU!

Better image handling

From AWP post:

Looks great guys, just put it to the test. One little request would be to limit the image size pulled from the OpenGraph data (or perhaps even give a choice). I just did a test and the site I pulled in had a HUGE image set as OpenGraph.

We really have to introduce some consistency here. Maybe even return to the idea of caching images in the Media Library.

disable wpautop on oembed of content-cards

Why does one url work but another one doesn't?

I used the following shortcodes with Content Cards. The first one embeds with no problem but the second is invalid. Can you decipher the reason why one would work but not the other? It's an https website: https//:ncmountains.net

[contentcards url="http://www.edinarealty.com/marc-cutter-realtor/homes-for-sale/707-River-Street-Taylors-Falls-MN-55084-154138266"]
[contentcards url="http://www.navicamls.net/displays/?n=253&i=1765214&k=2yff"]

Thx!

Controlling og:description length

Saw some site with huge OG descriptions.
Would be great if we could have something like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed enim augue, ullamcorper sed ornare vitae, porta vitae odio. Quisque porttitor ut ipsum id ornare. Praesent urna ipsum... (250 more words)

The setting could be controllable through the options page?

Use first og:image declaration if multiple are returned

Reference:
https://wordpress.org/support/topic/content-card-not-displaying-correct-image-on-own-site?replies=1

Example:

...
<meta property="og:image" content="http://margeburkell.com/wp-content/uploads/2015/09/How-to-Get-Started-on-Low-Carb-Checklist.jpg" />
<meta property="og:image" content="http://margeburkell.com/wp-content/uploads/2015/09/90_Days_cropped.png" />
<meta property="og:image" content="http://margeburkell.com/wp-content/uploads/2015/09/2012-to-2014-valentine-party-300x300.jpg" />
<meta property="og:image" content="http://margeburkell.com/wp-content/uploads/2015/08/Marge-Burkell-Trimmed.png" />
...

Fetch favicon and add it to the skin

Something like this would spice up the default template. 😄

Proposed roadmap

done

Feel free to add more suggestions or discuss the existing ones.

Fallback to <title> and <meta> description

A proposal from #18

If the site does not have OG, maybe we should fall back to use the <title> tag and the name="description"> tag for description text if it exists? Would make this work fairly ok on most sites even if they don't implement OG.

@ideag Thoughts?

New LinkedIn URLs not displaying as content cards

I have successfully added content cared from many different sources to my site http://www.galiadigital.co.uk. However, the last couple of LinkedIn posts I have tried to add have simply displayed as a link with the text as just http://www.linkedin.com and the link itself going to the correct URL. Old cards are not affected.
I have tried making a new card with an older URL from May and the card works. Anything prior works. Anything from July onwards does not, which makes me think this is LinkedIn change.

https://wordpress.org/support/topic/new-linkedin-urls-not-displaying-as-content-cards/

List of popular non oEmbed websites

A default list of popular sites not currently having native oEmbed support in WP.

caching option won't turn off

Like others, I cannot switch off caching (which takes up a lot of space and might also create legal problems).

https://wordpress.org/support/topic/caching-function-php-ignored/