Implement smart responsive image detection and content reprocessing task

- Enhance make_media_responsive to re-process existing picture tags
- Add context-aware size detection (e.g. .hero-section triggers :hero sizes)
- Add pwb:content:reprocess_responsive rake task to update stored HTML
- Update documentation with maintenance instructions
- Add spec for the new rake task

Author: etewiah

app/helpers/pwb/images_helper.rb

@@ -522,16 +522,27 @@ def make_media_responsive(html_content, options = {})
       sizes = ResponsiveVariants.sizes_for(options[:sizes] || :content)
 
       doc.css('img').each do |img_node|
-        # Skip if already inside a picture element
-        next if img_node.ancestors('picture').any?
-
+        # Handle images already inside picture tags (re-process them)
+        picture_ancestor = img_node.ancestors('picture').first
+        
         src = img_node['src']
         next if src.blank?
 
         # Ensure lazy loading
         img_node['loading'] ||= 'lazy'
         img_node['decoding'] ||= 'async'
 
+        # Determine sizes attribute based on context
+        current_sizes = sizes
+        
+        # Smart detection for hero sections if using default content sizes
+        if options[:sizes].blank? || options[:sizes] == :content
+          if img_node.ancestors('.hero-section').any? || img_node.ancestors('.pwb-hero').any?
+            current_sizes = ResponsiveVariants.sizes_for(:hero)
+          end
+        end
+
+
         # Check if we can upgrade to picture element with WebP support
         if trusted_webp_source?(src) && src.match?(/\.jpe?g$/i)
           # Create options for external_image_picture
@@ -543,16 +554,26 @@ def make_media_responsive(html_content, options = {})
             style: img_node['style'],
             width: img_node['width'],
             height: img_node['height'],
-            sizes: sizes,
+            sizes: current_sizes,
             responsive: true,
             data: img_node.keys.select { |k| k.start_with?('data-') }.each_with_object({}) { |k, h| h[k] = img_node[k] }
           }
 
           # Generates the picture tag string with WebP source
           picture_html = external_image_picture(src, pic_options)
 
-          # Replace the original img node with the new picture node
-          img_node.replace(picture_html)
+          # Replace identifying node (the picture tag if it existed, otherwise the img tag)
+          if picture_ancestor
+            picture_ancestor.replace(picture_html)
+          else
+            img_node.replace(picture_html)
+          end
+        else
+          # Even if not upgrading to picture, ensure sizes attribute is set
+          # Only set if it was calculated/changed from default
+          if current_sizes.present?
+             img_node['sizes'] = current_sizes
+          end
         end
       end
 

docs/RESPONSIVE_IMAGES_IMPLEMENTATION.md

@@ -307,3 +307,21 @@ Import external images to local storage:
 ```bash
 bundle exec rake images:import_external
 ```
+
+## Maintenance Tasks
+
+### Reprocessing Content
+
+If responsive image logic changes (e.g., new breakpoints or logic updates), you can reprocess all existing content blocks in the database using the provided rake task:
+
+```bash
+bundle exec rake pwb:content:reprocess_responsive
+```
+
+This task:
+1. Iterates through all `Pwb::Content` records.
+2. Checks all localized `raw_*` fields (e.g., `raw_en`, `raw_es`).
+3. Runs the content through `make_media_responsive`.
+4. Updates the record only if the HTML has changed (e.g., new `srcset`, updated `sizes`).
+5. Handles `Mobility` translations correctly.
+

lib/tasks/content_responsive.rake

@@ -0,0 +1,74 @@
+namespace :pwb do
+  namespace :content do
+    desc "Reprocess all content blocks to ensure responsive images are correctly generated"
+    task reprocess_responsive: :environment do
+      require 'pwb/responsive_variants'
+      
+      # Helper class to mixin the helper methods
+      class ContentProcessor
+        include ActionView::Helpers::TagHelper
+        include ActionView::Helpers::AssetTagHelper
+        include ActionView::Helpers::UrlHelper
+        include ActionView::Context
+        include Pwb::ImagesHelper
+        
+        # Mock request/controller for helpers that need it
+        def request
+          @request ||= ActionDispatch::TestRequest.create
+        end
+        
+        def controller
+          @controller ||= ActionDispatch::TestRequest.create
+        end
+      end
+      
+      view = ContentProcessor.new
+      processed_count = 0
+      updated_count = 0
+      
+      puts "Reprocessing Pwb::Content for responsive images..."
+      puts "============================================================"
+      
+      Pwb::Content.find_each do |content|
+        processed_count += 1
+        changed = false
+        
+        # Iterate through available locales to check translated fields
+        # Pwb::Content uses Mobility with JSONB backend
+        I18n.available_locales.each do |locale|
+          col = "raw_#{locale}"
+          
+          # Skip if the model doesn't respond to this locale method
+          next unless content.respond_to?(col)
+          
+          html = content.send(col)
+          next if html.blank?
+          
+          # make_media_responsive is in Pwb::ImagesHelper
+          # It detects .hero-section classes and applies :hero sizes
+          # It also upgrades img tags to picture tags for detailed responsive behavior
+          new_html = view.make_media_responsive(html)
+          
+          if new_html != html
+            content.send("#{col}=", new_html)
+            changed = true
+            puts "  Fixed #{col} for Content ##{content.id} (#{content.page_part_key})"
+          end
+        end
+        
+        if changed
+          if content.save
+            updated_count += 1
+          else
+            puts "  FAILED to save Content ##{content.id}: #{content.errors.full_messages.join(', ')}"
+          end
+        end
+      end
+      
+      puts "============================================================"
+      puts "Done!"
+      puts "Processed: #{processed_count}"
+      puts "Updated:   #{updated_count}"
+    end
+  end
+end

spec/lib/tasks/content_responsive_rake_spec.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+require 'rake'
+
+RSpec.describe 'pwb:content:reprocess_responsive', type: :task do
+  before(:all) do
+    Rails.application.load_tasks if Rake::Task.tasks.empty?
+  end
+
+  let(:task) { Rake::Task['pwb:content:reprocess_responsive'] }
+
+  before do
+    task.reenable
+  end
+
+  # Create a content record that needs updating
+  let!(:hero_content) do
+    Pwb::Content.create!(
+      key: 'heroes/hero_centered',
+      page_part_key: 'heroes/hero_centered',
+      raw_en: '<div class="hero-section"><img src="https://example.com/image.jpg" /></div>'
+    )
+  end
+
+  let!(:standard_content) do
+    Pwb::Content.create!(
+      key: 'about_us_content',
+      page_part_key: 'about_us_content',
+      raw_en: '<div class="content"><img src="https://example.com/image.jpg" /></div>'
+    )
+  end
+
+  it 'updates hero content with hero sizes' do
+    # Verify initial state
+    expect(hero_content.raw_en).not_to include('sizes=')
+
+    # Capture stdout to avoid cluttering test output
+    expect { task.invoke }.to output(/Processed: 2/).to_stdout
+
+    hero_content.reload
+    
+    # Should have sizes attribute for hero
+    # exact string depends on Pwb::ResponsiveVariants::SIZE_PRESETS[:hero]
+    expect(hero_content.raw_en).to include('sizes="(min-width: 1280px) 1280px, 100vw"')
+    
+    # Should be upgraded to picture tag (mocked helper behavior)
+    # Note: make_media_responsive uses trusted_webp_source? which defaults to false for example.com
+    # UNLESS we stub it or use a trusted domain.
+    # But wait, make_media_responsive ONLY upgrades to <picture> if trusted.
+    # However, it ALWAYS adds `sizes` to the <img> tag if it's not there.
+  end
+
+  context 'with trusted image source' do
+    let!(:trusted_content) do
+      Pwb::Content.create!(
+        key: 'trusted_hero',
+        page_part_key: 'trusted_hero',
+        raw_en: '<div class="hero-section"><img src="https://seed-assets.propertywebbuilder.com/image.jpg" /></div>'
+      )
+    end
+
+    it 'upgrades trusted images to picture tags' do
+      expect { task.invoke }.to output.to_stdout
+
+      trusted_content.reload
+      expect(trusted_content.raw_en).to include('<picture>')
+      expect(trusted_content.raw_en).to include('type="image/webp"')
+    end
+  end
+end