cipherdevgroup / wp-featherlight Goto Github PK

View Code? Open in Web Editor NEW

56.0 56.0 20.0 1.02 MB

An ultra lightweight WordPress lightbox plugin.

CSS 7.15% PHP 29.61% JavaScript 63.24%

featherlight galleries lightbox wordpress wordpress-images wordpress-plugin

wp-featherlight's People

Contributors

Stargazers

Watchers

wp-featherlight's Issues

Improve save request validation

The current check on save_post is a little bit odd and incomplete:

The doc block for the method \WP_Featherlight_Admin_Meta::stop_save() says it return void. This makes the IDE complaining. :)

In \WP_Featherlight_Admin_Meta::save_meta_boxes() there is another check for the nonce. That belongs to the first method. There is at least no obvious reason to separate the checks.

There is no check for a switched multisite context: when a post is translated into another site of the network, save_post will be called on that other site again. This can lead to odd situations where data on other sites will be overwritten. See my explanation on the MultilingualPress developer blog.

Shouldn't there be a check for current_user_can( 'edit_post', $post_id )?

The checks in \WP_Featherlight_Admin_Meta::stop_save() should include all the tests mentioned above, each test should get its own return false for better readability (and cleaner commit messages).

Actually, I would move the request validation into a separate object, because that's a separate task. But for now, an improved check in the current class might be good enough.

Improve Jetpack Gallery Handling

The Tiled Gallery module in Jetpack rewrites the markup for embeded galleries, so we'll need to expand what we're searching for in our findGalleries() jQuery function.

I think this will probably be the last auto-handled gallery we add support for. Searching for more selectors will likely have a negative performance impact.

If other gallery plugins would like to integrate with WP Featherlight they'll need to add featherlight data attributes when our plugin is enabled.

image descriptions as captions

Hello,
I would like to display the descriptions of the used images as the caption in the featherlight lightbox view. Is there a way how I could customize your plugin to achieve this? If you consider this as useful for others, you could perhaps extend the filter setting for wp_featherlight_captions.

kind regards
stephan

CSS optionally included in the footer

Hi there,

This time I will rather ask first and implement later 😃

I would like to have the CSS of featherlight be included in the wp foot instead of head.

The reason? Prioritization of critical rendering path. The lightbox CSS will practically never be needed when the site first loads, so it is not critical to include this CSS in the <head>. It would make sense therefore, to include it at the end of HTML document (or at least give an option via filter).

I see two possible implementations:

Switch to the footer by default.

PROS: it will be smarter default for great majority of users. No extra work needed.
CONS: might break for themes which do use wp_head() but no wp_foot(). Potentially breaking backwards-compat.
Provide a filter to give the theme/plugin authors to opt-in for CSS loaded in footer.

PROS: everything stays the same for the current users.
CONS: this is worse default out of two. Probably only a small fraction of the theme developers will opt-in for this.

Implementation: wp_enqueue_style hooked to the wp_foot. I did it already, works great (from WP 3.3).

Please discuss and I can prepare the PR.

Do not load translation files on every admin request

\WP_Featherlight::run() loads the translation files for every admin request, including all AJAX requests, updates, dashboard and so on. This is a waste of resources. Much less than many other plugins, but still …

There are only two places where the files need to be loaded:

The plugin page, hook: admin_head-plugins.php.
When the checkbox label is displayed. This could be done directly in that place.

Enable ONLY if checked.

Hi and thank you for the great plugin (it is beautiful!),

I had similar idea as #53 ...but I'm willing to settle for something much easier...

I want default behavior to be DISABLED, and then ENABLED only when the checkbox is selected in document settings.
Can we have some like reverse behavior setting?

If not, I'll probably fork this plugin to do so but I prefer to have all credit and focus go to this original plugin.

Can't load lightbox in some custom page

Hi @robneu

Thanks for creating this helpful plugin. Really like this one.
I make a testing site for one of my web. All the image lightboxed well, and I try to check-recheck the GTMetrix with wp-featherlight and so does compared with other plugin. The winner in score is yours.

Btw, I have some problem for my custom page. The media setting has been linked to Media File, but when the thumbnail clicked, it goes to original media address. It just happen in this custom page.

You could see the link: http://seller.sepatumoo.com/gallery/mrs-aminah/

Please, need your help...

Make the deactivation checkbox translatable

There is a string for the deactivation per post in the current pot file:

Disable Lightbox on this %s

The problem is that each post type's name can be gendered in many languages. French and German are two examples. Depending on the gender of the post type – which is unknown for the translator – the this needs a different translation.

page is female in German (Seite), post is male (Beitrag). So the translation would be for:

page: Die Lightbox für diese Seite abschalten.
post: Die Lightbox für diesen Beitrag abschalten.

I can just write Die Lightbox abschalten. This works, and it is clear enough. But I think it should be changed in the original string too, because other translators might run into the same problem.

Prepare for 1.0 release

This needs to be tested fairly thoroughly as this plugin has gotten pretty popular lately. I really don't want to have any regressions or major bugs when we release as people have been able to trust that the plugin will reliably work for the most part thus far.

Jetpack captions

Jetpack's stupid gallery markup is probably going to cause problems with the new captions feature.

Captions strip out HTML

I didn't even know that WordPress supported HTML within captions, but since it does we should probably stop using .text in favor of .html.

Improve Default Styling

One issue that's been pointed out more than once is that it's a little difficult to tell when a gallery item is actually part of a gallery. Until you hover an item, you really have no way of knowing. The mobile style could also use a bit of cleanup.

Screenshots

adding text on image

I would like to add text on top of an image is that possible?

Gallery caption class

Has an issue that captions were not showing for me because my captions did not have .wp-caption-text class as I was using 'cleaner-gallery' option from Hybrid framework that did not add this class. When I changed lines 84 and 89 in wpFeartherlight.js to look for .gallery-caption instead it worked again.

I guess issue may be with 'cleaner-gallery' in terms of which is preferred class?

WebP Support?

Any plans on introducing WebP support? Was considering forking and adding it myself. Seems line 19 of wpFeatherlight.js needs webp added to the regex and that'd be it, though I haven't looked through the entire code base yet.

Will it work together with RICG Responsive Images?

Hi,

I'm not sure if this type of question should be asked here, but I didn't find any other forum, so I thought I'd just try.

I've installed wp- featherlight today, and are very happy with it, it works very well! I also installed RICG Responsive Images, in an attempt to regulate the 'weight' of images that are served to small screens (such as mobile phones). Both plugins work fine, all thumbnails are light boxed by featherlight, and when not clicked on, are dynamically served (so large on large screens, smaller on mobile screens). But when checking and testing in Chrome (developers view), I noticed that an image that is opened in a (featherlight) lightbox is back to the original size, even on small mobile screens. This means that the effect of RICG Responsive Images (serving smaller native images according to screen size) is gone. Is this correct, or am I doing something wrong?

Thanks!

Cover Photo Being Loaded with Spinner

When using iframe with vimeo, the cover and play button is loaded in advance with the spinner or a cover image is spinning with the photo.

<a href="https://player.vimeo.com/video/373145202" data-featherlight="iframe" data-featherlight-iframe-height="480" data-featherlight-iframe-width="720" data-featherlight-iframe-style="width:100%"><img src="https://thumbs.dreamstime.com/b/woman-praying-free-birds-to-nature-sunset-background-woman-praying-free-birds-enjoying-nature-sunset-99680945.jpg" /></a></div>

I also tried data-featherlight-loading="Loading..." to replace the spinner but it doesn't seem to work as well

srcset support

This plugin should correctly add the native attachment/image markup -
or at least provide a srcset and sizes.
Currently the image of maximum available size is used which causes
incredible load times and bandwith usage.

Remove Expand Icon and Feature

When a thumbnail image is clicked on and the larger image opens in a new wp-featherlight window, there is an "expand the image" (X) icon in the upper right hand corner that looks like a "Close" this window icon (which is actually in the lower right hand corner). This is upper right icon is confusing our visitors, and the images on our site don't need to be expanded to full frame.

Is there a way to remove this icon (expand feature) so that our visitors don't get confused thinking that this is a "close" window icon?

Thanks.

Manage Scripts via Bower

Both of these scripts are still under fairly active development, so it would probably be best to manage them using Bower to make updating a little easier.

Improve the checkbox

There are a couple of minor issues with the current state of the deactivation checkbox:

It is placed way down on the right metabox column. Hard to find.
It has a title that shouldn't be there: a normal author shouldn't have to know anything about the name of the plugin. On the other hand, using just Lightbox as metabox title seems to be redundant.
You have to activate the checkbox to deactivate the feature. This is odd.

How about putting the checkbox into the Publish box (hook: post_submitbox_misc_actions) and setting it to activated by default with a label Lightbox active?

This would solve all these issues with very little code change.

SVG support missing

SVG images correctly cause the Featherlight box to open - but no SVG is shown - some HTML attributes / styles are missing. Easy FancyBox does this correctly, the code could be re-used by this plugin.

Allow External Images to be Lightboxed

Right now the lightbox only works on image URLs which match the current URL's hostname, IE internal images. This worked fine for our original use case but presents a problem for sites running a CDN or anyone who would like to lightbox an image from an outside site.

I'm not totally sure if there could be any unforeseen problems with lightboxing external images aside from possible timeouts and slow performance. It does seem like it will be a pretty common issue though, so we should probably change the way this works.

Add a Visible Loader

Featherlight allows for a loader to be displayed while content is being fetched, but doesn't use anything other than a class name change by default.

We should probably add a font icon or SVG loader to make it obvious when there's a problem fetching content. This is particularly true if we're going to implement #6.

Arrows being handled as Emoji by WordPress 4.2+

The arrows Featherlight uses by default are being replaced by Emoji styling. This causes a strange blue background on Chrome and other webkit browsers.

I think we can continue using the same character if we insert it using CSS rather than letting Featherlight insert the literal character in the markup.

Add grunt config

I made this pretty quickly, so I haven't automated the script or style build processes yet. I'd like to add a few basic options to the plugin eventually so this would probably be helpful.

Image URLs with query strings aren't matched

This was originally reported as a bug on WordPress.org. It looks like if an image has a query string appended to the end of it, our current matching pattern won't catch the URL as being an image link. In order to work around this, I think we'd need to strip the query string before testing our URLs.

My main hesitation here is adding more regex on what's already a pretty wide-reaching search. I think the following JS would do the job, but I'll need to do some testing on both the actual matching as well as any possible performance issues.

/**
 * Strips query strings and hash elements from a given string.
 *
 * @since  0.2.1
 * @return string
 */
function stripQuery( index, element ) {
    return element.replaceAll( ( '(\\?.*|\\#.*)' ), '' );
}

/**
 * Checks href targets to see if a given anchor is linking to an image.
 *
 * @since  0.1.0
 * @return mixed
 */
function testImages( index, element ) {
    var $href = $( element ).attr( 'href' ).toLowerCase();
    return /(png|jpg|jpeg|gif|tiff|bmp)$/.test( stripQuery( $href ) );
}

Option in Gutenberg Gallery "Media File"

Sad to see that the last release is already two years ago. I really like the plugin and with the "new" Gutenberg Editor it is indispensable.

It would be great if someone do some updates (e.g. admin boxes are not visble anymore in Gutenberg) and consider this two options:

open lightbox by default in galleries (not only when "link to media file" is set)
adjustable size of the lightbox

Thanks

Consider Loading Unpacked Scripts by Default

Right now we load a packed and minified version of our scripts by default. You can see how this is done here.

The main reason for this is in my experience, most WordPress users don't do anything to combine scripts. There are plugins which can do it, but most of them are kind of confusing and somewhat ineffective. The vast majority of websites out there just load scripts in whatever way they're set up to load in their theme or plugins.

Loading our scripts this way means most users will have a better, faster experience with our plugin. The unfortunate side effect is that some may experience conflicts with other plugins that use Featherlight. The issue was discussed on the Google Maps Builder repo but I'd like to hear some arguments either for or against the method we're using.

I feel that the way we're loading scripts benefits users and creates a slight obstacle for other developers, but not one that should really be a big deal since we have so many filters available to them. I could be wrong about this though.

Thoughts? Opinions? Arguments? FLAME WARS??!

calling https

Mixed content error. Can anyone point to why?

Auto-disable assets where no lightboxable images

Hi. Loading too much unnecessary JS is always a concern. Human-curated meta box configuration is not sustainable.

I'm thinking we could scan via the_content filter, or possibly output buffer the whole page output, for a heuristic on whether to load our JS/CSS assets at all.

Your thoughts?

Improve Readme & Documentation

The readme says:

When installed, the plugin will automatically display all standard WordPress images and galleries in a simple, minimalistic lightbox popup.

This isn't true for standard galleries.

Using WordPress 4.4-alpha-33702 and Twenty Ten, I have created a simple gallery: [gallery ids="570,569,568"].

While other images on the same page are shown in the lightbox, the gallery images are not. Clicking them leads to the attachment page.

There are no errors in the browser console, no other conflicting plugins are active.

Tested in:

Opera Presto 12.17
Firefox Developer Edition 42.0a2 (2015-08-15)
Vivaldi 1.0.219.50 (Blink 537.36)

WordPress Galleries

This plugin doesn't seem to add Lightbox support to (native) WordPress galleries.

Setting overflow: auto on .featherlight-content

I've stripped out the styles from wp-featherlight to use in my new site design, just so I can bundle the styles in a single file.

I also use featherlight to display a few modals with HTML content, like my pricing tables. For this, .featherlight-content should scroll when content exceeds viewpoint height as it does in the demo. But using the stripped down styles here I found that it didn't.

It turns out that you use overflow: visible on .featherlight-content here:

https://github.com/wpsitecare/wp-featherlight/blob/develop/css/src/partials/_base.scss#L40

The featherlight CSS uses overflow: auto instead and it looks like it's been that way for a long time:

https://github.com/noelboss/featherlight/blob/master/src/featherlight.css#L54

I've changed it for my own needs but I was curious if you remember why you made that change, if there's a reason I ought to avoid overflow: auto in this case.

Match images case insensitvely

Right now if an image URL isn't lowercase it won't be matched. This will likely lead to missed matches, so the link filter needs to be made case insensitive.

Can't zoom and scroll properly on mobile devices

Hi, if you look at the table in my article here:

https://paulpmark.com/2018/02/15/a-look-at-the-most-dominant-eras-in-vfl-afl-history/

On your phone, can you read all of the the enlarged table ok? I can't

Paul

Gallery with <a> element in caption causes extra navigation clicks/swipes

When I add an element to a caption an extra navigation click is added between the slide with the caption and whatever is next in the gallery.

Here a gallery with an attribution link in the first caption that is adding a click

Is there a way to limit navigation to only the first per gallery item?

Compability with Latest Wordpress 4.9.4?

Hi there, are you planning to release an update for the latest WP release? It doesn't show that it's been tested with latest WP in the plugin repository.

Single image and galleries in post

It's possible to show single images and galleries in post in one lightbox.
In this old thread are no answer and here is an hack, but I don't want to change the code.

(I create a thread in wordpress.com forum, but I don't know if anyone is reading this)

Add Admin Notice for Conflicing Plugins & Themes

It might be worth adding an admin notice for any known plugin conflicts like other lightbox popups or anything that's known to cause a problem.

Obviously we should do what we can to mitigate as many conflicts as possible, but I don't really want to add a bunch of code overhead on the front end for dealing with these issues.

In cases where it doesn't make sense to work around an issue, it would be good to at least let people know why the plugin isn't working.

Disable on specific image/links?

Hello,

It is any way to disable the lightbox on specific images and links, like as data-featherlight="off" or something like that?

PS: I use the WordPress plugin for this script.

Image matching gives a false positive on slugs with image extensions in the URL

As reported by a user on WordPress.org:

This is an amazing plugin, however, I observed the following problem: a simple link on my site that goes href="http://www.smashingmagazine.com/2015/1/5/freebie-dashel-icon-set-svg-psd-png" is interpreted as an icon. The lightbox opens, the wheel is spinning shortly, eventually - depending on the browser used - a questionmark or an empty field is displayed in the center. Of course, the link should just open the linked page, not trigger an overlay. Problem occurs both in Firefox and Safari.

Admin Metabox String Translation

This was pointed out in #4 and should be fixed to ensure translations can be made accurately.

Gallery transition could be smoother

By default, featherlight transitions by fading the current image out but doesn't perform a fade-in when the next image loads. This is a little odd, although it's never bothered me.

One of our users reported this as an issue, so I think it's probably worth improving the transition a bit.

Compatible with Wordpress 5.2.3?

Hi,

Is the wp-featherlight wordpress plugin compatible with Wordpress 5.2.3?
I'm asking this because it was working fine until the update to 5.2.3.
In the meantime I'm using a another plugin to minimize the 'damage' on my website.

Current behaviour: Wordpress native gallery doesn't open in gallery mode, each picture is opened separately when clicked.
Stand alone pictures don't open in a lightbox anymore.

Thanks for looking into this issue.

Kind regards,

Luc

How can I disable this plugin for woocommerce?

How can I disable this plugin for woocommerce?
$('.woocommerce-main-image').removeAttr('data-featherlight');
it doesn't work

I don't want to use featherlight for product images, but want to use in product description images.

Make styles a bit more aggressive

I don't want to go as far as adding !important in the default styles, but there are some areas where we're probably being too relaxed and letting themes override things unnecessarily.

Issues noticed so far:

No line height set on captions
No background color defined on arrow icons

Lightbox background doesn't load on first click

I have a media gallery with 6 items in it. When I click for the first time on an image I get the larger image, but I don't get the semi transparent black background. When I click where the background overlay should be the lightbox closes and I can go back to the media gallery and choose a different photo, now the overlay loads. Doesn't matter if it's the first photo in the gallery or the last, but it's only with the first one I click. I've tried reloading the page several times, I've even tried incognito mode, nothing seems to resolve the issue.

I'm running 4.7.5 and a custom developed theme from underscores. I don't have any other lightbox type plugins installed.

share social media

Any plan to add icons of social media to share the images ?

cipherdevgroup / wp-featherlight Goto Github PK

wp-featherlight's People

Contributors

Stargazers

Watchers

Forkers

wp-featherlight's Issues

Recommend Projects

Recommend Topics

Recommend Org