module QuestionsHelper def decorate_divs_for_typewriting_effect(html) doc = Nokogiri::HTML.fragment(html, 'utf-8') doc.xpath('./*').each do |div| div['class'] = 'typewriter-text' end doc.to_html.html_safe end def image_orientation(file_attachment) return nil unless file_attachment&.attached? metadata = file_attachment.blob.metadata width = metadata[:width] || 0 height = metadata[:height] || 0 if width > height :landscape elsif height > width :portrait else :square end end def responsive_picture_tag_for_question(question) # assets = question.assets.includes(file_attachment: :blob).to_a assets = question.assets.includes(file_attachment: :blob).select{ |asset| asset.file.image? }.to_a # Find one landscape and one portrait image landscape_asset = assets.find { |asset| image_orientation(asset.file) == :landscape } portrait_asset = assets.find { |asset| image_orientation(asset.file) == :portrait } # Fall back to any image if specific orientation not found landscape_asset ||= portrait_asset portrait_asset ||= landscape_asset # If we have at least one image if landscape_asset || portrait_asset primary_asset = landscape_asset || portrait_asset # If we have both orientations, create a responsive picture tag if landscape_asset && portrait_asset && landscape_asset != portrait_asset render_responsive_picture(landscape_asset, portrait_asset) else # Just one orientation available, create a simple picture tag render_simple_picture(primary_asset) end else # No images available content_tag(:div, "No images available", class: "no-images") end end private def render_responsive_picture(landscape_asset, portrait_asset) content_tag(:picture) do concat( content_tag(:source, "", media: "(orientation: portrait)", srcset: rails_storage_proxy_path(portrait_asset.file.variant(resize_to_limit: [800, nil])) + " 800w, " + rails_storage_proxy_path(portrait_asset.file.variant(resize_to_limit: [1600, nil])) + " 1600w, " + rails_storage_proxy_path(portrait_asset.file.variant(resize_to_limit: [2400, nil])) + " 2400w", sizes: "100vw" ) ) concat( image_tag( rails_storage_proxy_path(landscape_asset.file.variant(resize_to_limit: [800, nil])), srcset: rails_storage_proxy_path(landscape_asset.file.variant(resize_to_limit: [800, nil])) + " 800w, " + rails_storage_proxy_path(landscape_asset.file.variant(resize_to_limit: [1600, nil])) + " 1600w, " + rails_storage_proxy_path(landscape_asset.file.variant(resize_to_limit: [2400, nil])) + " 2400w", sizes: "100vw", 'data-controller': "image" ) ) end end def render_simple_picture(asset) content_tag(:picture) do image_tag( rails_storage_proxy_path(asset.file.variant(resize_to_limit: [800, nil])), srcset: rails_storage_proxy_path(asset.file.variant(resize_to_limit: [800, nil])) + " 800w, " + rails_storage_proxy_path(asset.file.variant(resize_to_limit: [1600, nil])) + " 1600w, " + rails_storage_proxy_path(asset.file.variant(resize_to_limit: [2400, nil])) + " 2400w", sizes: "100vw", 'data-controller': "image" ) end end end