Turbo Frame update another area of page

1

Hi,

In my layout, I have the following tags in the <head:

            <meta property="og:title" content="<%= page_title(app_name: 'My site', page_title_symbol: :site_page_title, reverse: true) %>" />
            <meta property="og:type" content="website" />
            <meta property="og:url" content="<%= request.original_url %>" />
            <% if content_for?(:og_image) %>
                <meta property="og:image" content="<%= yield(:og_image) %>" />
            <% else %>
                <meta property="og:image" content="<%= request.base_url + asset_path('picture-of-me.jpg') %>" />
            <% end %>

I have a page in my app with a turbo frame and at the top (outside the frame) I have:

<% if @album.photo %>
    <% content_for(:og_image, @album.photo.url(:large)) %>
<% end %>

How can I get this to update when the content in the turbo frame is changed?

Thanks,
Neil

2

You could use a turbo-stream within the frame.

I would first add an id to the meta tag to make replacing it easier.

<meta id="og-image" property="og:image" content="<%= request.base_url + asset_path('picture-of-me.jpg') %>" />

<turbo-frame>
    <%= turbo_stream.replace "og-image" do %>
           <meta id="og-image" property="og:image" content="<%=  @album.photo.url(:large) %>" />
    <% end %>

    /// other content
</turbo-frame>
1 Like
3

Interesting solution. I will certainly give this a go! Thanks.

1 Like