image-source-control / image-source-control Goto Github PK

See https://wordpress.org/support/topic/option-to-remove-the-sources-from-a-static-landing-page/

Review https://github.com/webgilde/image-source-control/blob/master/admin/assets/js/post.js if we still need it, especially after so many changes on how media is handled and the block editor.

When the general option to add the source list below the content of posts is disabled, the source list is still showing up when the option "Display sources list below full posts" is enabled in the Archive Pages settings.

I see two solutions here:

1. allow injecting the post list automatically below the content of posts on archive pages even when the general option is disabled. In that case, it should still not show on single posts
2. both options need to be enabled to show source lists on archive pages

In any way, a change in the behavior might lead to some users not seeing sources below the content anymore.
Adding a change of behavior to the 2.0 release might raise enough awareness to users checking the output and noticing the issue.

Rewrite https://github.com/webgilde/image-source-control/blob/master/public/assets/js/front-js.js to use plain JavaScript only since WordPress is discouraging the usage of jQuery by default.

Here https://github.com/webgilde/image-source-control/blob/master/public/assets/js/front-js.js#L69

//caption horizontal margin
var tml = 5;

//caption vertical margin
var tmt = 5;

is some margin hardocded. Please make this editable in Options or remove it.

Especially settings in admin/admin.php

While we are at it, we could improve the templates by separating the HTML of the layout for the sections with the HTML that just renders the individual options.

While the options we show for image sources are showing up in the image block, I have the feeling that the code might not be 100% valid and could be improved.

I have added sources, URLs or checked the "It's mine" checkbox on several images that are used on published pages.

Whenever I insert one of the shortcodes [isc_list] or [isc_list_all] into a page, the shortcode is executed (the literal shortcode is not showing anymore), but no content is generated on the page. How can I make the sources display?

(If that has any influence: The site uses Visual Composer elements.)

As reported on wordpress.org, ISC gives an error and prevents features from working in various editors after upgrading to WordPress 5.5.

While I couldn’t reproduce a critical issue that prevented me from using any of the features in these editors, I saw a JavaScript warning that might indicate the problem saying TypeError: jQuery(...).live is not a function which pointed to https://github.com/webgilde/image-source-control/blob/7d15a3f654a099202fdeb8b0c900dcb6221766d7/admin/assets/js/post.js#L182.

The live() function is deprecated and with jQuery migrate being disabled by default in the WP backend since 5.5, this sounds like a possible explanation for issues. As the documentation states, it would need to be replaced with on().

What confuses me is that the error described above happens only with the current release of 1.10.4 but not with master, which contains the same script.

Sometimes, the image-post relation seems to be broken. Especially after a bug or when indexing failed for other reasons.

ISC should have a method to remove the indexes so that ISC could re-set them.

Setting up the image-post relation should happen when the post is called in the frontend so indexing happens with every page load.

For testing, we could set up a few images and posts, then remove the index and see if they show up a) in the source list on the pages and b) in the full list.

ISC is currently listing image sources for images uploaded to a specific post. However, when the image is removed from that post and used in another, the image source list (the full one) still gets it wrong.

I need to rewrite indexing of images so that it is independent of the "Uploaded to" information stored in Wordpress. Might also be related to #39

This is how my featured image is displayed. I want to add the $source_string manually without the p-markup and source-pretext to my figcaption (maybe add other markup by myself), but I really don't know, how to get that $source_string for my featured image.

<figure>
 <img ...>
 <figcaption>
   caption text - $imagesourcecontroloutput
 </figcaption>
</figure>

Output of isc_thumbnail_source()

return '<p class="isc-source-text">' . $options['source_pretext'] . ' ' . $source_string . '</p>';

Looking forward to a hint and a little help

ISC restricts sources to known image formats. .webp and the very new AVIF format are not among them. I need to test them (especially, if they work with the WP media library) and whitelist them if that is the case.

For sites with many images, it should be possible to change sources in bulk from a simple list on a dedicated page

When first installed, the plugin scans images and posts to create the list of missing sources. I wasn’t able to reproduce an issue, but it could theoretically break sites with many images and posts. We might need to change the index process to something working in batches and using a dedicated page.

In WordPress 5.3, the function wp_get_original_image_path() was introduced to get the original URL or an image. We might use that in ISC if it also helps to resolve image URLs from the frontend.

When I understand it correctly, it will only work with images uploaded after 5.3. They need the original_image value in the attachment meta.

See https://make.wordpress.org/core/2019/10/09/introducing-handling-of-big-images-in-wordpress-5-3/

Add an option to automatically inject the full source list to a page that already exists (or is created dynamically).

It should be listed below existing content, if there is any.

Remember to automatically disable the output of the automatic image source list below the content for the selected page. One can do this in can_add_list_to_content.

Is it possible to import IPTC fields which are embedded in XMP while importing the image to WordPress? I think it would be the field "Credit Line" out of IPTC.

We modifiy the src-URL of the images to use relative URLs instead of absolute URLs. With this, captions are no longer displayed.
The reason for this is that the caption is build by the function get_source_by_url. This tries to identify the image-id from the URL and the renders the caption using render_image_source_string. Since the URLs are relative, get_image_by_url can not identify the image.
I'm curious what the reasoning behind using get_source_by_url is. The regex already returns the image-id. It is used to check if the image has a source: get_post_meta($id, 'isc_image_source_own', true).
So why not call render_image_source_string directly?

Needs reproducing.

Mentioned in https://wordpress.org/support/topic/nimmt-lastige-arbeit-ab/

We might just fall back to the list below the content on AMP pages since the overlay is not going to work.

On smaller devices, the table of image sources might be cut off. The following CSS rule would help with that and at least allow mobile users to see everything.

.isc_all_image_list_box { overflow: scroll; }

The setup for the sources of images that have the "this is my image" is not self-explanatory enough.

It does not explicitly say that the "image source" input is ignored when that checkbox is enabled.

When one does not enable the "Use authors names" or enter anything into "Custom text for owned images" in the main settings, the output for "own" images is empty even if "Exclude own images" is unchecked.

Some ideas:

• have a default text for "Custom text for owned images" – don’t allow this to be cleared
• use "(c) + URL" as the default text in that field and also when it was left empty or does not, yet, exist
• improve the labels and explanation in the ISC image settings to better highlight that "image source" is more like an "external" source and link to the general settings next to the "this is my image" option

ISC does already look for some class types to get the attachment ID instead of looking for the URL in https://github.com/webgilde/image-source-control/blob/7d15a3f654a099202fdeb8b0c900dcb6221766d7/isc.class.php#L226.

We should maybe add the image ID to all attachments, if that is even possible, dynamically using some hooks so that we can read it from there directly. This could speed up the lookup process.

See Line https://github.com/webgilde/image-source-control/blob/v1.10/public/public.php#L108

my link tags have no rel attribute (perhaps because it's an ACF field, perhaps it's because we have a lightbox plugin as well).

this should still be matched correctly. At the moment I changed this line to:

$pattern = '#(<[^>]*class="[^"]*(alignleft|alignright|alignnone|aligncenter).*)?((<a [^>]*(href="([^"]*)"[^>]*)>)? *(<img [^>]*[^>]*src="(.+)".*\/?>).*(</a>)??[^<]*).*(<\/figure.*>)?#isU';

and I have set $id to false in line 121.

With this change, it can find Links withouth rel attribute as well.

New posts cannot be saved or existing ones auto-updated when the [isc_list] is used in the post content of the block editor. I added it using the /shortcode block and having images in the content as well. It doesn’t break all the time so I might be missing something.

At the same time, I can see a PHP issue raised in debug.log:

PHP Fatal error:  Uncaught Error: Maximum function nesting level of '256' reached, aborting! in /isc/wp-includes/class-wp-block-parser.php:83
Stack trace:
#0 /isc/wp-includes/class-wp-block-parser.php(477): WP_Block_Parser_Block->__construct(NULL, Array, Array, '\n\n', Array)
#1 /isc/wp-includes/class-wp-block-parser.php(548): WP_Block_Parser->freeform('\n\n')
#2 /isc/wp-includes/class-wp-block-parser.php(359): WP_Block_Parser->add_block_from_stack(456)
#3 /isc/wp-includes/class-wp-block-parser.php(236): WP_Block_Parser->proceed()
#4 /isc/wp-includes/blocks.php(521): WP_Block_Parser->parse('<!-- wp:paragra...')
#5 /isc/wp-includes/blocks.php(533): parse_blocks('<!-- wp:paragra...')
#6 /isc in /Users/thomas/Entwicklung/wp-testumgebungen/isc/wp-includes/class-wp-block-parser.php on line 83

Some tests I could do:

• unregister the shortcode
• log if the shortcode is actually interpreted while using the block editor

We should show a list of images related to a specific post/page on the post edit page. Could be useful for debugging.

Alternatively, we just add a link to the "Images Sources" page where we already show lists of image-post relations, but show them for a particular post, only. This way we don’t need to rewrite a lot of logic.

In the list of missing sources ( upload.php?page=isc_missing_sources_page ) the media title is linked to the page
( /wp-admin/media.php?attachment_id={$ID}&action=edit ) on which an unnecessary button (insert post) is and does not allow me to delete the medium, among other things. It would be better to link to the media editing page from the title
/wp-admin/upload.php?item={$ID}

Instead of saving the source information and the post-image relation in post meta, we should have a dedicated index table. It would be much simpler to debug.

We could still keep the image source relation in post meta, but at least the image source information should move to a custom table. That might also be much faster.

I get this error

And on top it says
Missing Sources
No empty sources found!

The plugin does not recognize images that have dimensions in the basic name, like ad-300x250.pnp. get_image_by_url() strips the 300x250 part.

We would probably need to look for the original URL as well.

The plugin seems to include block editor related files in the frontend.

Find a way to place the source also below images.
Could just use the current overlay logic, but without the placing part.

Taken from https://wordpress.org/support/topic/great-timesaver-21/

If you think about a PRO/Paid Version: I use the same Image Sources often so it would save me even more time if I could pick one from a dropdown boy and/or set a default.

If possible, we should add source options to Gutenberg blocks directly.

That would be great when using WP 5.0 and ongoing and much quicker as well.

As set in https://github.com/webgilde/image-source-control/blob/7d15a3f654a099202fdeb8b0c900dcb6221766d7/admin/admin.php#L678 and also remove the output code.

Add block options to the Gutenberg image block to handle image sources from there.

Notice: Undefined variable: content_after in path\to\plugins\image-source-control-isc\public\public.php on line 166 when using the shortcode [isc_list].

Image list is missing completely.

WordPress v4.9.6 based on Bedrock with Twenty SeventeenVersion v1.6
Image Source Control v1.9.5
PHP v7.1.12

As discussed on wordpress.org, it might be useful to not show the source overlay for certain images. In this case, it breaks the Revolution Slider script.

There are a couple of alternatives to resolve this:

• changing the priority of the the_content hook function in ISC to run before the other images are injected
• ignore images with certain classes or in certain containers when creating the overlays (as in this PR)
• allow admins to show/hide image sources manually per page or in general

The second solution sounds most useful here and should work without any additional options since we can assume that overlays will always break the slider. It should be built in a way that allows extending it dynamically.

A todo list could look like this:

• rewrite the content filter code to detect all classes
• check the classes against a list for those that should not receive overlays
• should we also check the img tags for dedicated classes – at least draft a solution for that?
• include option to allow admins to add blocker-classes manually

The challenge is to think about what users might expect here. Imagine, one chose the overlay method to show sources. The solution above would cause the sources of images in the slider to not being displayed, anywhere. Is this what most users would expect?

In that case, they would probably also have to use the source list under the content or the full source list embedded on a dedicated page.

We still create a wrapper, but maybe it isn’t needed if the image is wrapped in <figure> and we can just give it our class to save on some HTML clutter.

Show a tooltip so that new users know where the ISC pages are in the WP menu.

The block editor gives a warning when it tries to save a post.

How to reproduce this: Create a new post or update an existing one (with an image in it?) and wait until the block editor tries to store an autosave.

A red warning will come up saying that updating failed.

Looking into the browser console, I see a couple of issues mentioning ISC:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `IscWithSourceControl(WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit))))`. See https://fb.me/react-warning-keys for more information.
    in TextControl (created by IscWithSourceControl(WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit)))))
    in IscWithSourceControl(WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit))))
    in Unknown (created by WithDispatch(Component))
    in WithDispatch(Component)
    in Unknown (created by WithMultipleValidation(IscWithSourceControl(WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit))))))
    in WithMultipleValidation(IscWithSourceControl(WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit))))) (created by WithFilters(Edit))
    in WithFilters(Edit) (created by BlockEdit)
    in BlockEdit (created by block_BlockListBlock)
    in BlockCrashBoundary (created by block_BlockListBlock)
    in div (created by ForwardRef)
    in ForwardRef (created by block_BlockListBlock)
    in block_BlockListBlock (created by (block_BlockListBlock))
    in (block_BlockListBlock) (created by WithFilters(block_BlockListBlock))
    in WithFilters(block_BlockListBlock) (created by IfCondition(WithFilters(block_BlockListBlock)))
    in IfCondition(WithFilters(block_BlockListBlock)) (created by WithDispatch(IfCondition(WithFilters(block_BlockListBlock))))
    in WithDispatch(IfCondition(WithFilters(block_BlockListBlock)))
    in Unknown (created by WithSelect(WithDispatch(IfCondition(WithFilters(block_BlockListBlock)))))
    in WithSelect(WithDispatch(IfCondition(WithFilters(block_BlockListBlock))))
    in Unknown (created by Pure(WithViewportMatch(WithSelect(WithDispatch(IfCondition(WithFilters(block_BlockListBlock)))))))
    in Pure(WithViewportMatch(WithSelect(WithDispatch(IfCondition(WithFilters(block_BlockListBlock)))))) (created by BlockList)
    in div (created by ForwardRef(RootContainer))
    in div (created by InsertionPoint)
    in InsertionPoint (created by ForwardRef(RootContainer))
    in ForwardRef(RootContainer) (created by BlockList)
    in BlockList
    in Unknown (created by VisualEditor)
    in div (created by CopyHandler)
    in CopyHandler (created by WithDispatch(CopyHandler))
    in WithDispatch(CopyHandler) (created by VisualEditor)
    in div (created by ObserveTyping)
    in ObserveTyping (created by WithSafeTimeout(ObserveTyping))
    in WithSafeTimeout(ObserveTyping) (created by VisualEditor)
    in div (created by WritingFlow)
    in div (created by WritingFlow)
    in WritingFlow (created by VisualEditor)
    in div (created by CopyHandler)
    in CopyHandler (created by WithDispatch(CopyHandler))
    in WithDispatch(CopyHandler) (created by VisualEditor)
    in div (created by Typewriter)
    in Typewriter
    in Unknown (created by WithSelect(Typewriter))
    in WithSelect(Typewriter) (created by VisualEditor)
    in div (created by BlockSelectionClearer)
    in BlockSelectionClearer (created by WithDispatch(BlockSelectionClearer))
    in WithDispatch(BlockSelectionClearer)
    in Unknown (created by WithSelect(WithDispatch(BlockSelectionClearer)))
    in WithSelect(WithDispatch(BlockSelectionClearer)) (created by VisualEditor)
    in VisualEditor (created by Layout)
    in div (created by EditorSkeleton)
    in div (created by EditorSkeleton)
    in div (created by EditorSkeleton)
    in EditorSkeleton (created by NavigateRegions(EditorSkeleton))
    in div (created by NavigateRegions(EditorSkeleton))
    in NavigateRegions(EditorSkeleton) (created by Layout)
    in div (created by FocusReturnProvider)
    in FocusReturnProvider (created by Layout)
    in Layout (created by Editor)
    in ErrorBoundary (created by Editor)
    in BlockEditorProvider (created by WithDispatch(BlockEditorProvider))
    in WithDispatch(BlockEditorProvider)
    in Unknown (created by Context.Consumer)
    in WithRegistryProvider(WithDispatch(BlockEditorProvider)) (created by EditorProvider)
    in EntityProvider (created by EditorProvider)
    in EntityProvider (created by EditorProvider)
    in EditorProvider (created by WithDispatch(EditorProvider))
    in WithDispatch(EditorProvider)
    in Unknown (created by WithSelect(WithDispatch(EditorProvider)))
    in WithSelect(WithDispatch(EditorProvider))
    in Unknown (created by Context.Consumer)
    in WithRegistryProvider(WithSelect(WithDispatch(EditorProvider))) (created by Editor)
    in div (created by DropZoneProvider)
    in DropZoneProvider (created by Editor)
    in slot_fill_provider_SlotFillProvider (created by SlotFillProvider)
    in SlotFillProvider (created by Editor)
    in StrictMode (created by Editor)
    in Editor (created by WithDispatch(Editor))
    in WithDispatch(Editor)
    in Unknown (created by WithSelect(WithDispatch(Editor)))
    in WithSelect(WithDispatch(Editor))

and

Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components
    in input (created by TextControl)
    in div (created by BaseControl)
    in div (created by BaseControl)
    in BaseControl (created by TextControl)
    in TextControl (created by IscWithSourceControl(WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit)))))
    in div (created by PanelBody)
    in PanelBody (created by ForwardRef(PanelBody))
    in ForwardRef(PanelBody) (created by IscWithSourceControl(WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit)))))
    in bubbles_virtually_fill_Fill (created by slot_fill_Fill)
    in slot_fill_Fill (created by InspectorControlsFill)
    in InspectorControlsFill (created by Context.Consumer)
    in IfBlockEditSelected(InspectorControlsFill) (created by IscWithSourceControl(WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit)))))
    in IscWithSourceControl(WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit))))
    in Unknown (created by WithDispatch(Component))
    in WithDispatch(Component)
    in Unknown (created by WithMultipleValidation(IscWithSourceControl(WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit))))))
    in WithMultipleValidation(IscWithSourceControl(WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit))))) (created by WithFilters(Edit))
    in WithFilters(Edit) (created by BlockEdit)
    in BlockEdit (created by block_BlockListBlock)
    in BlockCrashBoundary (created by block_BlockListBlock)
    in div (created by ForwardRef)
    in ForwardRef (created by block_BlockListBlock)
    in block_BlockListBlock (created by (block_BlockListBlock))
    in (block_BlockListBlock) (created by WithFilters(block_BlockListBlock))
    in WithFilters(block_BlockListBlock) (created by IfCondition(WithFilters(block_BlockListBlock)))
    in IfCondition(WithFilters(block_BlockListBlock)) (created by WithDispatch(IfCondition(WithFilters(block_BlockListBlock))))
    in WithDispatch(IfCondition(WithFilters(block_BlockListBlock)))
    in Unknown (created by WithSelect(WithDispatch(IfCondition(WithFilters(block_BlockListBlock)))))
    in WithSelect(WithDispatch(IfCondition(WithFilters(block_BlockListBlock))))
    in Unknown (created by Pure(WithViewportMatch(WithSelect(WithDispatch(IfCondition(WithFilters(block_BlockListBlock)))))))
    in Pure(WithViewportMatch(WithSelect(WithDispatch(IfCondition(WithFilters(block_BlockListBlock)))))) (created by BlockList)
    in div (created by ForwardRef(RootContainer))
    in div (created by InsertionPoint)
    in InsertionPoint (created by ForwardRef(RootContainer))
    in ForwardRef(RootContainer) (created by BlockList)
    in BlockList
    in Unknown (created by VisualEditor)
    in div (created by CopyHandler)
    in CopyHandler (created by WithDispatch(CopyHandler))
    in WithDispatch(CopyHandler) (created by VisualEditor)
    in div (created by ObserveTyping)
    in ObserveTyping (created by WithSafeTimeout(ObserveTyping))
    in WithSafeTimeout(ObserveTyping) (created by VisualEditor)
    in div (created by WritingFlow)
    in div (created by WritingFlow)
    in WritingFlow (created by VisualEditor)
    in div (created by CopyHandler)
    in CopyHandler (created by WithDispatch(CopyHandler))
    in WithDispatch(CopyHandler) (created by VisualEditor)
    in div (created by Typewriter)
    in Typewriter
    in Unknown (created by WithSelect(Typewriter))
    in WithSelect(Typewriter) (created by VisualEditor)
    in div (created by BlockSelectionClearer)
    in BlockSelectionClearer (created by WithDispatch(BlockSelectionClearer))
    in WithDispatch(BlockSelectionClearer)
    in Unknown (created by WithSelect(WithDispatch(BlockSelectionClearer)))
    in WithSelect(WithDispatch(BlockSelectionClearer)) (created by VisualEditor)
    in VisualEditor (created by Layout)
    in div (created by EditorSkeleton)
    in div (created by EditorSkeleton)
    in div (created by EditorSkeleton)
    in EditorSkeleton (created by NavigateRegions(EditorSkeleton))
    in div (created by NavigateRegions(EditorSkeleton))
    in NavigateRegions(EditorSkeleton) (created by Layout)
    in div (created by FocusReturnProvider)
    in FocusReturnProvider (created by Layout)
    in Layout (created by Editor)
    in ErrorBoundary (created by Editor)
    in BlockEditorProvider (created by WithDispatch(BlockEditorProvider))
    in WithDispatch(BlockEditorProvider)
    in Unknown (created by Context.Consumer)
    in WithRegistryProvider(WithDispatch(BlockEditorProvider)) (created by EditorProvider)
    in EntityProvider (created by EditorProvider)
    in EntityProvider (created by EditorProvider)
    in EditorProvider (created by WithDispatch(EditorProvider))
    in WithDispatch(EditorProvider)
    in Unknown (created by WithSelect(WithDispatch(EditorProvider)))
    in WithSelect(WithDispatch(EditorProvider))
    in Unknown (created by Context.Consumer)
    in WithRegistryProvider(WithSelect(WithDispatch(EditorProvider))) (created by Editor)
    in div (created by DropZoneProvider)
    in DropZoneProvider (created by Editor)
    in slot_fill_provider_SlotFillProvider (created by SlotFillProvider)
    in SlotFillProvider (created by Editor)
    in StrictMode (created by Editor)
    in Editor (created by WithDispatch(Editor))
    in WithDispatch(Editor)
    in Unknown (created by WithSelect(WithDispatch(Editor)))
    in WithSelect(WithDispatch(Editor))

The source overlay doesn’t display above images outside the content, like also the featured image. Maybe, we find a way to place all image sources anywhere on a site.

I noticed that the Cover-Image available in the Gutenberg editor will not be recognized.

Some ideas to improve the settings page.

• using the WP meta box layout for the boxes instead of our own with large headlines
• turn the first box into an overview of how to add sources list to the frontend; this would include also a note about the full image source list. See also #62
• hide the options for the source overlay if that method is not enabled (skip for now to see if the new layout is already helping or there is still confusion)
• improve descriptions for "archive pages" since not every user might know what that means
• add the size of the pre-defined thumbnail sizes to the options
• show a preview of the layout of the sources lists, if possible, and react on changes

Hey, is there any Option to get a compatibility to Elementor page builder?
For now the Plugin doesn't recognize any Image which is coming from Elementor so far.
Or is there any Option for a function.php or something similar to get the ISC-Information out of Elementors Image-Galleries, Background-Images or the simple Image-Element?

Right now, ISC removes the plugin options on uninstall by default. The desired behavior should be:

• create an option to remove all data (options and sources) on uninstall and uncheck it by default
• remove plugin options when the checkbox is enabled
• remove post meta fields when the checkbox is enabled

E.g., to exclude gravatars automatically

Edit: gravatars don’t use an image file extension, so that shouldn’t be an issue.

Practically, a source would not show up if not given.
The background of this "feature" is rather to prevent unnecessary queries for sources to the database, e.g., profile pictures of authors or other cases in which there are many images, including images from other plugins (blacklist wp-content/plugins/?

The challenge here would be to properly explain what this is doing and how users can verify that it works properly.

After enabling ISC, add a link to the plugin settings below the plugin name.