cipherdevgroup / wp-featherlight Goto Github PK
View Code? Open in Web Editor NEWAn ultra lightweight WordPress lightbox plugin.
An ultra lightweight WordPress lightbox plugin.
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.
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.
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
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.
\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:
admin_head-plugins.php
.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...
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.
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...
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.
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's stupid gallery markup is probably going to cause problems with the new captions feature.
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
.
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.
I would like to add text on top of an image is that possible?
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?
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.
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!
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
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.
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.
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.
There are a couple of minor issues with the current state of the deactivation checkbox:
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 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.
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.
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.
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.
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.
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 ) );
}
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:
Thanks
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??!
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?
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:
This plugin doesn't seem to add Lightbox support to (native) WordPress galleries.
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.
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.
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
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?
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.
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)
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.
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.
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.
This was pointed out in #4 and should be fixed to ensure translations can be made accurately.
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.
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?
$('.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.
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:
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.
Any plan to add icons of social media to share the images ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.