Add an imageBlockProcessor so core/image blocks can support cdn and s3fs modules

Created on 28 May 2024, 6 months ago
Updated 16 August 2024, 3 months ago

Problem/Motivation

The core core/image block stores and renders the url to the image in the body markup.

When using either the cdn module or the s3fs module (or both) The images uploaded with the core/image block are always using a local file path. If the cdn is enabled/disabled the image paths in nodes created with gutenberg are not updated.

Proposed resolution

1. Create an ImageBlockProcessor that will process the image block and generate the correct url to the image that other contrib modules may have a hand in altering.

✨ Feature request
Status

Needs review

Version

3.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States loze Los Angeles

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @loze
  • πŸ‡ΊπŸ‡ΈUnited States loze Los Angeles

    I think the answer is to make an imageBlockProcessor that regenerates the image url. Since it has already been viewed the first time in the editor, it presumably was pushed to s3 already, and getting the url the second time from the file entity thats stored in the block should get the s3 url.
    Then replace the image url in the src with this new url.

    Does this make sense? would this be the correct place to do this?

    If I go back into the node and switch the style and then switch back to what it was previously, it has the s3 url. Its just not getting it when it renders on the front end, or when it renders in the editor the 2nd time (unless you do what I described)

  • Status changed to Needs review 6 months ago
  • πŸ‡ΊπŸ‡ΈUnited States loze Los Angeles

    I think that was the way to go. I have this working on the frontend. But it still loads the local path in the editor.
    I also changed the image styles 'full' key to '_original_'

  • Pipeline finished with Success
    6 months ago
    Total: 248s
    #184192
  • Pipeline finished with Success
    6 months ago
    Total: 252s
    #184222
  • Pipeline finished with Success
    6 months ago
    Total: 1158s
    #186309
  • Pipeline finished with Success
    6 months ago
    Total: 1103s
    #186454
  • Pipeline finished with Success
    6 months ago
    Total: 250s
    #193853
  • πŸ‡ΊπŸ‡ΈUnited States loze Los Angeles
  • Pipeline finished with Canceled
    5 months ago
    Total: 52s
    #203274
  • Pipeline finished with Success
    5 months ago
    Total: 245s
    #203275
  • πŸ‡ΊπŸ‡ΈUnited States loze Los Angeles
  • πŸ‡ΊπŸ‡ΈUnited States loze Los Angeles
  • Pipeline finished with Success
    5 months ago
    Total: 402s
    #205566
  • Pipeline finished with Success
    5 months ago
    Total: 555s
    #205571
  • Pipeline finished with Success
    5 months ago
    Total: 377s
    #205574
  • Pipeline finished with Success
    5 months ago
    Total: 440s
    #205579
  • Pipeline finished with Success
    5 months ago
    Total: 342s
    #211497
  • Pipeline finished with Success
    5 months ago
    Total: 314s
    #211506
  • πŸ‡©πŸ‡ͺGermany szeidler Berlin

    @loze Should we maybe split up your two changes into a different issue? I think the change of the original image to `_original_` makes sense, but is quite independent from the image style URL rewrite for the CDN/s3f module.

  • πŸ‡©πŸ‡ͺGermany szeidler Berlin

    szeidler β†’ changed the visibility of the branch 3450325-alternative-image-style-url-processor to hidden.

  • πŸ‡©πŸ‡ͺGermany szeidler Berlin

    szeidler β†’ changed the visibility of the branch 3450325-alternative-image-style-url-processor to active.

  • πŸ‡©πŸ‡ͺGermany szeidler Berlin

    @loze I just added my alternative approach, that also catches images without the core/image imageSlug by constructing image style from the old derivate URL, so that it is able to rewrite also gallery + media+text blocks.

    Can you evaluate if it is further than your MR, we can decide on which one to continue then.

  • Pipeline finished with Failed
    5 months ago
    Total: 324s
    #214569
  • Pipeline finished with Success
    5 months ago
    Total: 245s
    #217296
  • Pipeline finished with Success
    4 months ago
    Total: 175s
    #222156
  • Pipeline finished with Success
    4 months ago
    Total: 201s
    #222176
  • Pipeline finished with Success
    4 months ago
    Total: 186s
    #222181
  • Pipeline finished with Success
    4 months ago
    Total: 156s
    #224805
  • Pipeline finished with Success
    4 months ago
    Total: 155s
    #224873
  • Pipeline finished with Success
    4 months ago
    #224879
  • Pipeline finished with Success
    4 months ago
    #224888
  • Pipeline finished with Success
    4 months ago
    Total: 249s
    #231486
  • Pipeline finished with Failed
    4 months ago
    #234499
  • Pipeline finished with Canceled
    4 months ago
    Total: 123s
    #236529
  • Pipeline finished with Success
    4 months ago
    Total: 165s
    #236534
  • Pipeline finished with Success
    4 months ago
    Total: 208s
    #240780
  • Pipeline finished with Canceled
    4 months ago
    Total: 76s
    #240790
  • Pipeline finished with Success
    4 months ago
    Total: 208s
    #240791
  • Pipeline finished with Success
    4 months ago
    Total: 268s
    #240987
  • Pipeline finished with Success
    4 months ago
    Total: 205s
    #240990
  • Pipeline finished with Success
    4 months ago
    #242563
  • Pipeline finished with Success
    4 months ago
    #242583
  • Pipeline finished with Success
    4 months ago
    Total: 200s
    #243310
  • Pipeline finished with Canceled
    4 months ago
    Total: 292s
    #243380
  • Pipeline finished with Success
    4 months ago
    Total: 200s
    #243383
  • Pipeline finished with Success
    4 months ago
    Total: 162s
    #243402
  • Pipeline finished with Success
    4 months ago
    Total: 257s
    #243592
  • Pipeline finished with Success
    4 months ago
    Total: 230s
    #245009
  • Pipeline finished with Success
    4 months ago
    Total: 213s
    #246690
  • Pipeline finished with Success
    4 months ago
    #246763
  • Pipeline finished with Success
    4 months ago
    Total: 216s
    #246916
  • Pipeline finished with Success
    4 months ago
    Total: 217s
    #247492
  • Pipeline finished with Success
    3 months ago
    Total: 245s
    #251786
  • Pipeline finished with Success
    3 months ago
    #251859
  • Pipeline finished with Success
    3 months ago
    #251897
  • Pipeline finished with Success
    3 months ago
    Total: 1027s
    #251976
  • Pipeline finished with Failed
    3 months ago
    #252008
  • Pipeline finished with Success
    3 months ago
    #252012
  • Pipeline finished with Success
    3 months ago
    Total: 274s
    #252020
  • Pipeline finished with Success
    3 months ago
    #252034
  • Pipeline finished with Success
    3 months ago
    Total: 294s
    #252505
  • Pipeline finished with Success
    3 months ago
    Total: 222s
    #252737
  • Pipeline finished with Success
    3 months ago
    Total: 258s
    #252746
  • Pipeline finished with Canceled
    3 months ago
    #254031
  • Pipeline finished with Success
    3 months ago
    Total: 848s
    #254036
  • Pipeline finished with Canceled
    3 months ago
    Total: 158s
    #255439
  • Pipeline finished with Canceled
    3 months ago
    Total: 134s
    #255442
  • Pipeline finished with Success
    3 months ago
    Total: 217s
    #255443
  • πŸ‡ΊπŸ‡ΈUnited States loze Los Angeles

    @szeidler
    1. you're right about splitting the 2nd part of my issue into a separate issue.
    2. I think your approach of loading the image by uuid is correct, as well as supporting image/gallery blocks.
    3. this module has a Drupal\gutenberg\Html\TagProcessor class that can handle what your doing with \DOMXpath and we should probably use that since the other block processors use it.

    Im going to try to combine the best of the two.

  • Pipeline finished with Success
    3 months ago
    Total: 218s
    #255467
  • πŸ‡ΊπŸ‡ΈUnited States loze Los Angeles

    On second look, this does work with gallery blocks, since they are just a group of image blocks, the size is set on each individual image

    Although there should probably be an option to set the size of all images in a gallery at once. there is an issue for that here πŸ› Images are not linked with core/gallery block Active

    I'm not a maintainer of this module, so lets see what someone else says.

    In the meantime, I've resolved the conflicts in MR!150. Here is a patch to use it in composer.

  • πŸ‡ΊπŸ‡ΈUnited States loze Los Angeles
  • πŸ‡ΊπŸ‡ΈUnited States loze Los Angeles
  • Pipeline finished with Success
    3 months ago
    Total: 342s
    #264739
  • Pipeline finished with Success
    3 months ago
    Total: 344s
    #264745
  • Pipeline finished with Success
    3 months ago
    Total: 428s
    #277091
  • Pipeline finished with Success
    3 months ago
    Total: 321s
    #277105
  • Pipeline finished with Failed
    about 1 month ago
    Total: 236s
    #304427
  • Pipeline finished with Success
    about 1 month ago
    Total: 240s
    #304434
  • Pipeline finished with Success
    about 1 month ago
    Total: 225s
    #304439
  • Pipeline finished with Success
    about 1 month ago
    Total: 171s
    #305302
  • Pipeline finished with Success
    about 1 month ago
    Total: 176s
    #305880
  • Pipeline finished with Canceled
    28 days ago
    Total: 125s
    #320128
  • Pipeline finished with Failed
    28 days ago
    Total: 374s
    #320132
  • Pipeline finished with Failed
    28 days ago
    Total: 540s
    #320140
  • Pipeline finished with Failed
    28 days ago
    Total: 705s
    #320147
  • Pipeline finished with Failed
    28 days ago
    Total: 590s
    #320149
  • Pipeline finished with Skipped
    23 days ago
    #325444
  • Pipeline finished with Success
    22 days ago
    Total: 1601s
    #326312
  • Pipeline finished with Success
    20 days ago
    Total: 193s
    #327796
  • Pipeline finished with Success
    20 days ago
    Total: 146s
    #327800
  • Pipeline finished with Success
    20 days ago
    Total: 219s
    #327818
  • Pipeline finished with Failed
    19 days ago
    Total: 386s
    #327901
  • Pipeline finished with Failed
    19 days ago
    Total: 312s
    #327903
  • Pipeline finished with Success
    19 days ago
    Total: 194s
    #327912
  • Pipeline finished with Success
    19 days ago
    Total: 199s
    #328318
  • Pipeline finished with Success
    15 days ago
    Total: 331s
    #331469
  • Pipeline finished with Success
    15 days ago
    Total: 168s
    #331477
  • Pipeline finished with Success
    9 days ago
    Total: 151s
    #337671
  • Pipeline finished with Success
    about 20 hours ago
    Total: 215s
    #346124
  • Pipeline finished with Success
    about 20 hours ago
    Total: 338s
    #346134
Production build 0.71.5 2024