[howto] - Clip a Post

Topics: ASP.NET 2.0, Themes
Jun 25, 2011 at 7:55 AM
Edited Oct 22, 2011 at 2:46 AM

Most of you will probably asking WHY I need to clip a post instead of just enabling "Only show description of posts" in settings. For all of us know that enabling that will crample your html code in your posts. I'm a developer and I usually post codes here and I also have formatting enabled, images, videos. So that means my posts contains HTML codes, not just P's, and such.

I'd like to pretty much to have the formatting, images, and videos, stay the way they are layouted in my blog post when viewed and clipped so I made that feature to do just that!

read more here: http://jaysonragasa.net/post/2011/06/25/BlogEngineNET-e28093-HOWTO-Clip-a-Post.aspx

Oct 22, 2011 at 2:39 AM

Your web link isnt working.. curious how you got the clipping to work, so that it maintains the html and have just a "Read more" type button to see the rest..

 

Thanks

Oct 22, 2011 at 2:46 AM

here you go.

http://wall.jaysonragasa.net/wall/post/2011/06/25/BlogEngineNET-e28093-HOWTO-Clip-a-Post.aspx

Oct 25, 2011 at 5:41 PM
Edited Oct 25, 2011 at 6:33 PM
nullstring wrote:

here you go.

http://wall.jaysonragasa.net/wall/post/2011/06/25/BlogEngineNET-e28093-HOWTO-Clip-a-Post.aspx

 

Thanks for that, though not sure how to apply your code in my case..

 

I dont have the same code for div's etc..

For instance, i have

<div class="post xfolkentry" id="post<%=Index %>"> and from within it:

 <div class="text">
        <asp:PlaceHolder ID="BodyContent" runat="server" />
    </div>

</div> <!-- post xfolkentry-->

 

Your code snippet is

 

<div id="postcontent_<%=Index %>" class="post_content" style="height: 500px; overflow: hidden;" onmouseover="">
    <h2><a href="<%=Post.RelativeLink %>" class="taggedlink"><%=Server.HtmlEncode(Post.Title) %></a></h2>
    <p class="post-info">Filed under <%=CategoryLinks(" , ") %></p>
 
    <asp:PlaceHolder ID="BodyContent" runat="server" />
</div>
<div id="postmsg_<%=Index %>" style="padding: 5px; border: 1px dotted #afafaf;">
    post clipped. <span style="text-decoration: underline; cursor: pointer" onmousedown="document.getElementById('postmsg_<%=Index %>').setAttribute('style','display:none;');document.getElementById('postcontent_<%=Index %>').setAttribute('style','height: auto;');">click here to expand.</span>
</div>
I've tried adapting your code to mine, but it just doesnt work quite right.. (i changed your postcontent to my post<%index, etc.. tried placing it at various points too..
ie:
<!-- code to clip a post -->
<div class="post xfolkentry" id="post<%=Index %>" style="height: 500px; overflow: hidden;"
    onmouseover="">
       

 <div class="text">
        <asp:PlaceHolder ID="BodyContent" runat="server" />


<div id="Div1" style="padding: 5px; border: 1px dotted #afafaf;">
            post clipped. <span style="text-decoration: underline; cursor: pointer" onmousedown="document.getElementById('post<%=Index %>').setAttribute('style','display:none;');document.getElementById('post<%=Index %>').setAttribute('style','height: auto;');">
                click here to expand.</span>
        </div>       <!-- div1 -->
    
    <!-- end code to clip -->

    </div>

</div> <!-- post xfolkentry-->

Any thoughts on what i'm doing wrong..

 

Thanks

 

 

btw..

 

if i put your code exactly as is, just after my div class="text", then it works, but not as expected.. it will expand correctly, but its showing up where posts are not 500 px in height.

 

Also.. if i put the height setting inside here instead of the other div..  <div class="text">  then every post is set to 500 px.. which is not really desireable either in some cases...

 

 

Oct 25, 2011 at 7:14 PM

Update.. i tooled around a bit and found a way to make this work, since i have that inner div..

 

I ended up with this..

<div id="postcontent_<%=Index %>" class="post xfolkentry" >

    <% if (Post.Content.Length >= 1700)
       {
           Response.Write(Post.Content.Length);%>  <--- length
    <div id="postinnermsg_<%=Index %>" class="text" style="height: 500px; overflow: hidden;" onmouseover="" >
   
                 
      
           
    <%}
       else
       {
           %>
            <div id="postinnermsg_<%=Index %>" class="text" >
   




           <%}%>
          <!-- inside inner bodytext -->
        <asp:PlaceHolder ID="BodyContent" runat="server" />
                      
      
           
    </div>


    <!-- only show if over 1700 in length -->
     <% if (Post.Content.Length >= 1700)
        {%>
      <div id="postmsg_<%=Index %>" style="padding: 5px; border: 1px dotted #afafaf;">
    post clipped. <span style="text-decoration: underline; cursor: pointer"
     onmousedown="document.getElementById('postmsg_<%=Index %>').setAttribute('style','display:none;');
     document.getElementById('postinnermsg_<%=Index %>').setAttribute('style','height: auto;');">
     click here to expand.</span>
       </div>   
       <%} %>

 

 

I set it so that the height gets set only if a certain amount of length in the post, and likewise the expand button appears only in this case

 

Nov 8, 2011 at 9:03 AM

Thanks MarkM!!!! I need that too!!

Dec 14, 2011 at 12:11 PM

I have updated my clip post and added a little extra bacon. Hope you like it

look how it nicely fades? I just love it :)

go to my site and just take a look on the css.. basically the DIV has to be always on top so I added position: relative and some few tweaks

Feb 12, 2012 at 3:24 AM
Edited Feb 12, 2012 at 3:43 AM

This has been good stuff.. i noticed you had the paypal button widget.. (off topic i know), but, i tried adding that to my 2.5 blogengine.. when i click add for the widget in the pull down, nothing happens.. any ideas what i may be missing? 

 

I did add the line using App_Code.Controls; to the .cs file, but it still doesnt work (this fixed a few other widgets in the past)

Thanks