How to use the @plone/volto/helpers.flattenToAppURL function in @plone/volto

To help you get started, we’ve selected a few @plone/volto examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github plone / volto / src / components / manage / Sidebar / ImageSidebar.jsx View on Github external
)}
      {data.url && (
        <>
          
            {data.url.split('/').slice(-1)[0]}
            {data.url.includes(settings.apiPath) && (
              <img alt="{alt}" src="{`${flattenToAppURL(data.url)}/@@images/image/mini`}">
            )}
            {!data.url.includes(settings.apiPath) &amp;&amp; (
              <img style="{{" alt="{alt}" src="{data.url}">
            )}
          
          
            {data.url.includes(settings.apiPath) &amp;&amp; (
               openObjectBrowser()}
github plone / volto / src / components / manage / Blocks / Listing / ListingBody.jsx View on Github external
{listingItems.map(item =&gt; (
            <div>
              
                {!item[settings.listingPreviewImageField] &amp;&amp; (
                  <img alt="" src="{DefaultImageSVG}">
                )}
                {item[settings.listingPreviewImageField] &amp;&amp; (
                  <img alt="{item.title}" src="{flattenToAppURL(">
                )}
                <div>
                  <h3>{item.title ? item.title : item.id}</h3></div></div>
github plone / volto / src / components / manage / Tiles / Slider / Edit.jsx View on Github external
}
                                        &gt;
                                          
                                        
                                      
                                    
                                  )}
                                {item.url ? (
                                  <img alt="" src="{">
                                ) : (
                                  <div>
                                    
                                      {this.state.uploading &amp;&amp;
                                        this.state.currentSelectedCard ===
                                          index &amp;&amp; (
                                          
                                            
                                              Uploading image
                                            </div>
github plone / volto / src / components / manage / Blocks / HeroImageLeft / View.jsx View on Github external
const View = ({ data }) =&gt; (
  <div>
    <div>
      {data.url &amp;&amp; (
        <img alt="" src="{`${flattenToAppURL(data.url)}/@@images/image`}">
      )}
      <div>
        {data.title &amp;&amp; <h1>{data.title}</h1>}
        {data.description &amp;&amp; <p>{data.description}</p>}
      </div>
    </div>
  </div>
);
github plone / volto / src / components / manage / Tiles / Image / Edit.jsx View on Github external
{this.props.appendSecondaryActions &amp;&amp; (
              &lt;&gt;{this.props.appendSecondaryActions}
            )}
          
        )}
        {this.props.selected &amp;&amp;
          !this.props.data.url &amp;&amp;
          this.props.appendSecondaryActions &amp;&amp; (
            <div>{this.props.appendSecondaryActions}</div>
          )}
        {this.props.data.url ? (
          <p>
            <img alt="" src="{">
          </p>
        ) : (
          <div>
            
              
                {this.state.uploading &amp;&amp; (
                  
                    Uploading image
                  
                )}
                <center>
                  <img alt="" src="{imageTileSVG}"></center></div>
github plone / volto / src / components / manage / Tiles / Image / View.jsx View on Github external
{(() =&gt; {
          const image = (
            <img alt="{data.alt" src="{">
          );
          if (data.external) {
            const isReallyExternal =
              (data.external.startsWith('http') ||
                data.external.startsWith('https')) &amp;&amp;
              !data.external.includes(settings.apiPath);

            if (isReallyExternal) {
              return (
github plone / volto / src / components / manage / Blocks / Listing / ListingBody.jsx View on Github external
{listingItems.map(item =&gt; (
            <div>
              
                {!item[settings.listingPreviewImageField] &amp;&amp; (
                  <img alt="" src="{DefaultImageSVG}">
                )}
                {item[settings.listingPreviewImageField] &amp;&amp; (
                  <img alt="{item.title}" src="{flattenToAppURL(">
                )}
                <div>
                  <h3>{item.title ? item.title : item.id}</h3>
                  <p>{item.description}</p>
                </div>
              
            </div>
          ))}
github plone / volto / src / components / manage / Tiles / HeroImageLeft / Edit.jsx View on Github external
this.props.onChangeTile(this.props.tile, {
                    ...this.props.data,
                    url: '',
                  })
                }
              &gt;
                
              
            
          
        )}
        <div>
          {this.props.data.url ? (
            <img alt="" src="{`${flattenToAppURL(this.props.data.url)}/@@images/image`}">
          ) : (
            <div>
              
                {this.state.uploading &amp;&amp; (
                  
                    Uploading image
                  
                )}
                <center>
                  <h4>Image</h4>
                  <p>Upload a new image</p>
                  <p>
                    <label>
                      Browse</label></p></center></div></div>