Instagram Feeds within a Paragraph Override All Feeds on a Page

We have just updated the Dev release of Simple Instagram Feed to successfully embed Feeds via a paragraph entity field. You will need the Block Field contrib module to do this.

This brings with it a new issue and that is:

If we embed multiple instances of an Instagram Feed Paragraph, or if we have a Paragraph Embedded Feed with another Instagram feed Block on a page with regular Instagram feed blocks they will all use the same Instagram feed account and settings as that of the Paragraph. The Paragraph Instagram Feed Block overrules all other Instagram Feed Blocks on the page.

Steps to reproduce

  • Install the Simple Instagram Feed module, Install Paragraphs, Install Block Field.
  • Create a Paragraph with a block field that allows the user to select one or more Simple Instagram Feed blocks.
  • Add the Paragraph Field to a content type.

When a single Instagram Feed Block paragraph is added, it works as expected. If another feed is added to the same page, the first Paragraph Instagram Feed Block overrides all others and they will all show the same Instagram content.

If a Paragraph embedded feed is on a page with feed blocks that are embedded via the layout builder or the Blocks Overview Page, the Paragraph embedded block will overrule all of the blocks.

Proposed resolution

It appears that the loop that handles instantiating multiple Instagram Feed Blocks is not running when presented with a Paragraph Embedded Instagram Feed Block. We will need to extend the Javascript to recognize Paragraph Embedded Instagram Feed Blocks and loop through them to respect the individual Feed accounts and settings.

Remaining tasks

It occurs to me that instead of adding the feed as a block, it needs to be able to be added as a full fledged Paragraphable field entity. I've done this with 3rd party forms so I'll borrow from that experience and build this out as a new feature.

User interface changes

N/A

API changes

TBD

Data model changes

TBD

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

awasson created an issue. See original summary.

awasson’s picture

Issue summary: View changes
awasson’s picture

Assigned: Unassigned » awasson
Category: Bug report » Feature request
Issue summary: View changes

Just updating the bug report and turning it into a feature request.

alegacy99’s picture

I want to mention that it is not possible to add multiple feeds from different accounts via layout builder. The different feeds use a single instagram feed details.

awasson’s picture

@alegacy99, thanks for that. We'll look into that on the issue that you mentioned it on earlier.

Cheers,
Andrew

droath’s picture

I needed this module to work with the block field module and layout builder for a project that I'm working on. Attached is the first iteration of the implementation. Hope this is useful!

droath’s picture

Status: Active » Needs review
awasson’s picture

Status: Needs review » Active

@droath,
Can you describe to me what you're patch is supposed to do? It doesn't appear to be related to implementing an Instagram Feed in a Paragraph, which is the focus of this particular issue.

If this is about Layout Builder, we tackled using Instagram feeds in Layout Builder here https://www.drupal.org/project/simple_instagram_feed/issues/3110895 and as far as I know, they are working in Layout Builder. If not or if something needs to be tweaked, can you please reopen that issue and describe the issue that you are having. We can build upon the existing approach that way and keep the issues organized.

Thanks,
Andrew

EDIT: @droath, I should add that if your patch is handling the paragraph issue as well as a layout builder issue then by all means let's leave things as they are and we can just relate it to the earlier issue. I'm just looking at your patch and I think I see what you're doing and yeah this could resolve the paragraph issue but I need more info, if you don't mind.

Cheers,
Andrew

alegacy99’s picture

I applied the patch @droath put and I am able to view multiple feeds in 1 page.

awasson’s picture

Status: Active » Reviewed & tested by the community

@droath,
Sorry about the lack of action on this and thanks for the patch. The long-weekend took me away from attending to this but I have gone back to the layout builder situation and discovered that like paragraphs, one instance overrides all instances. I've applied your patch and it seems to resolve the layout builder issue as well as the paragraph issue.

It's a nice bit of code and I've tested it every way I know how so I'm inclined to push it to the Dev and then deploy to the stable.

Cheers,
Andrew

  • awasson committed 224cbb1 on 8.x-3.x authored by droath
    Issue #3166619 by droath: Instagram Feeds Within a Paragraph Override...
awasson’s picture

Status: Reviewed & tested by the community » Fixed

Done and done.

Big thanks to @droath for the patch. I know you submitted it as a first iteration of the implementation but I couldn't see anything to improve upon so I've deployed it to the stable release.

Cheers,
Andrew

paulocs’s picture

Nice!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.