+1-888-365-2779
Try Now
More in this section

Forums / General Discussions / Content Block Editor - wrap text around images

Content Block Editor - wrap text around images

18 posts, 1 answered
  1. Richard
    Richard avatar
    164 posts
    Registered:
    21 Nov 2009
    23 Jan 2011
    Link to this post
    Is there a way to set text to wrap around an image with padding, etc, without editing the html directly? Thanks...
  2. Gabe Sumner
    Gabe Sumner avatar
    440 posts
    Registered:
    09 Sep 2007
    23 Jan 2011
    Link to this post
    1.  Insert an image into the Content Block editor (RadEditor).
    2.  Right-click the Image
    3.  Click Properties
    4.  Select right-align (or whatever)
    5.  Configure Margins
    6.  Click Save

    Is this what you're looking for?

    Gabe Sumner
    Telerik | Sitefinity CMS
    Answered
  3. Richard
    Richard avatar
    164 posts
    Registered:
    21 Nov 2009
    23 Jan 2011
    Link to this post
    oops, simple really... sorry, hadn't appreciated there was a right click menu! :-) Thanks...
  4. Gabe Sumner
    Gabe Sumner avatar
    440 posts
    Registered:
    09 Sep 2007
    23 Jan 2011
    Link to this post
    No apologies necessary.

    You should see our internal newsgroups.  I've been known to write epic 3-page feature requests for things that are already readily available.  :)  

    Gabe Sumner
    Telerik | Sitefinity CMS
  5. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    26 Jan 2012
    Link to this post
    Hi,
    I don't see an option to set margins around an image when aligning the image. I'm using the latest version, but also in 4.3 it isn't available.
    Can you update me about what is changed and why it is changed?

    Thanks,
    Daniel
  6. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    26 Jan 2012
    Link to this post
    @all

    I don't see the possibility to add paddings, margins anymore either. Just float left, right and none and so on.

    I was thinking about adding some jQuery to helpt this matter. But I have not worked with jQuery before so I would appreciate your help on this.

    This is what is rendered:
    <img width="240" src="/images/volkswagenbilder/der-neue-up!.jpg?sfvrsn=2" alt="Volkswagen up!" title="Der neue up!" style="float: left;">

    I thought I add some jQuery on my Masterpage.
    Please don't lough this is what I tried:
    $(function()
        {
        $('img').css('float','left').each(function()
          {
             $(this).css('padding-right','10px;')
                  }
          )
              }
        )

    Anyone who can quickliy give me the right code :-)

    @Telerik
    It sure would be nice if the clients could set the margins again in 5.0
    Markus
  7. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    26 Jan 2012
    Link to this post
    This seemd to work for me now

    Any feedback is appreciated

    Markus

    $(function()
        {
           $('.content_t_m img').each(function()
                {
                    if ($(this).css('float') == "left")
                         {
                           $(this).css('padding-right','18px')
                           $(this).css('padding-bottom','19px')
                          }
           
              
                     if ($(this).css('float') == "right")
                         {
                           $(this).css('padding-left','20px')
                           $(this).css('padding-bottom','21px')
                         }
                }
             )
             
        }
      )
  8. Trevor
    Trevor avatar
    35 posts
    Registered:
    28 Jan 2012
    01 Feb 2012
    Link to this post
    This solution seems pretty hackish to me.  I dont think it makes sense for styles to come from Javascript.. Why isn't there a way to set margins in the image manager?  Couldn't there at least be a class assigned to left or right aligned images?
  9. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    01 Feb 2012
    Link to this post
    It was there, as far as I know. It disappeared with the introduction of the image editor.

    Daniel
  10. Greg
    Greg avatar
    82 posts
    Registered:
    08 Aug 2012
    02 Feb 2012
    Link to this post
    One vote here for an insert image feature like Wordpress. It's a snap to add in an image with caption, select whether to float left, right, or center and it uses styles instead of hackish margin/padding directly on the image. I feel like this should be one of the easiest things to do in a CMS yet it's confusing for non-technical users.

    Greg
  11. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    02 Feb 2012
    Link to this post
    Well, then at least add also the margin fields, since a class name or style name is not very userfriendly. Anyway, if we have to vote now to get it back, then my vote too.

    But it shouldn't have gone in the first place, right?

    Daniel
  12. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    02 Feb 2012
    Link to this post
    Well guys you have my vote as well.
    Setting margins should make it BACK to SF as soon as possible.

    The attached image shows how convenient it was in 4.2.

    Markus
  13. Kiran
    Kiran avatar
    2 posts
    Registered:
    15 Aug 2012
    13 Feb 2012
    Link to this post
    @All,
    I am also facing the same problem. I don't see options for inserting margins for the images in SF 4.4. Is there any solution for this?
  14. Trevor
    Trevor avatar
    35 posts
    Registered:
    28 Jan 2012
    06 Mar 2012
    Link to this post
    I really need this functionality for a client -- it's really too bad that even in 4.4 this is not available.

    Can anyone provide some guidance on how to extend the ImageManager tool that is available on the 4.3 and 4.4 RadEditor?

    I'm probably going to build a custom image manager tool, but I can only find examples on how to create very basic tools for the RadEditor toolbar -- if there's some documentation out there or examples on how to handle image files in the way ImageManger does, please let me know, I'm struggling to find anything related to 4.x

    I'm probably going to check this out: 
    http://www.sitefinity.com/blogs/radoslavgeorgiev/posts/10-01-13/extend_radeditor_dialogs_to_add_captions_for_images.aspx

    But it seems to be pretty outdated, since in these screens it's showing the nicer imagemanager that actually came with margin features.
  15. Trevor
    Trevor avatar
    35 posts
    Registered:
    28 Jan 2012
    03 Apr 2012
    Link to this post
    i guess this one's getting swept under the rug unless something happens in PITS
    http://www.telerik.com/support/pits.aspx#/public/sitefinity/9375 
  16. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    04 Apr 2012
    Link to this post
    Dear Trevor
    You are right. It realy would nice to have this back. Don't think we will see it in 5.1 since there is a whole other focus and there are bugs (ordering) that seem to realy need some work done.
    But my hope is that 5.2 will finaly be the release of the very small details imporovments. Like the one with setting margins top, bottom, left, right for images.

    Voted on PITS. But usually that does not make to much difference.
    Markus
  17. Kurt
    Kurt avatar
    11 posts
    Registered:
    25 Oct 2010
    13 Apr 2012
    Link to this post
    To whoever said aligning an image left and aligning an image right should apply a class is spot on. Manually applying margins every single time to an image floated left or right via the panel is just ridiculous. How will you ensure consistent margins with floated images across multiple content editors?

    Sitefinity should automatically apply a CSS class to the image to the tune of "<img class="sfContentImgAlignLeft" />

    That way, the designer can say:

    .sfContentAlignLeft {
    float: left;
    margin-right: 20px;
    }

    Now the content creator worries about content, not layout. And the designer can worry about layout, not the content.

    Wordpress does this simply and effectively.
    http://codex.wordpress.org/Wrapping_Text_Around_Images
  18. Kurt
    Kurt avatar
    11 posts
    Registered:
    25 Oct 2010
    13 Apr 2012
    Link to this post
    Here's a hacky way of how to define margins across the board for images aligned left or right with just CSS.

    /*
    Assuming your post content is wrapped in a container with the class "sfPostContent", select the images within that have the inline (gasp) style="float: left;". Then define your margins. Example:
    */

    .sfpostContent img[style*="float: left;"] {
        margin-right: 1em;
        clear: left;
    }

    .sfpostContent img[style*="float: right;"] {
        margin-left: 1em;
        clear: right;
    }

    To override margins already applied by a content editor, simply apply the !important to the values in question. Example:
    .sfpostContent img[style*="float: right;"] {
        margin-left: 1em !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        clear: right;
    }
18 posts, 1 answered