Adding image to blog post

Topics: Customizing Orchard, General, Writing themes
Jul 28, 2011 at 10:14 PM

I would like to (optionally) attach an image to blog posts so that these images can be displayed alongside the blog excerpt, similar to Engadget, ArsTechnica, etc.

What is the recommended approach to accomplishing this task?

 

Coordinator
Jul 28, 2011 at 11:55 PM

You could build a part to do that (and there may be on eon the gallery already), but the easiest way to do this is just to add the image into the body of the post. A modification of the summary template would enable you to have the image be shown even on summaries. I use the following Parts.Common.Body.Summary.cshtml on my blog:

@{ 
    Orchard.ContentManagement.ContentItem contentItem = Model.ContentPart.ContentItem;
    var bodyHtml = Model.Html.ToString();
    var more = bodyHtml.IndexOf("<!--more-->");
    if (more != -1) {
        bodyHtml = bodyHtml.Substring(0, more);
    }
    else {
        var firstP = bodyHtml.IndexOf("<p>");
        var firstSlashP = bodyHtml.IndexOf("</p>");
        if (firstP >=0 && firstSlashP > firstP) {
            bodyHtml = bodyHtml.Substring(firstP, firstSlashP + 4 - firstP);
        }
    }
    var body = new HtmlString(bodyHtml); 
}
<p>@body</p>
<p>@Html.ItemDisplayLink(T("Read more...").ToString(), contentItem)</p>
Coordinator
Jul 29, 2011 at 12:36 AM

You can also add a custom field of type Image Field, and change your templates, css, or placement.info to position the image where you want.

Jul 29, 2011 at 12:47 AM

Thanks for the tips guys. Will dig into this in the next day or so.

Nov 11, 2011 at 8:58 AM

Hi,

I want to ad something, because I arrived at here looking for "Add image to blog" and Bertrand's code works fine but it's not what I was exactly looking for.

What I need is:

Show one of the post images in the summary that Orchard shows in latest post widget. Normally it doesn't and Bertrand's code is quite well if you want to show everything between post´s top and <!--more--> tag, which you have to put manually in the desired point of your post. The problem is that you have to post the image at the top if you want to see it first, else you get a text and then the image. For this reason I change a bit the code above to fit my needs:

@{
    Orchard.ContentManagement.ContentItem contentItem = Model.ContentPart.ContentItem;
    var bodyHtml = Model.Html.ToString();
    var firstIMG = bodyHtml.IndexOf("<img");
    var firstSlashIMG = bodyHtml.IndexOf("/>");
    var claseIMG = "imagen_extracto";
        if (firstIMG >=0 && firstSlashIMG > firstIMG) {
            bodyHtml = bodyHtml.Substring(firstIMG, firstSlashIMG + 2 - firstIMG);
        }
        else {
            claseIMG = "ocultame";
        }
    var firstimage = new HtmlString(bodyHtml);
    var body = new HtmlString( Model.Html.ToString().Substring(0, Math.Min(Model.Html.ToString().Length, 200)).Replace(Environment.NewLine, "</p>" + Environment.NewLine + "<p>"));
}

<div class="@claseIMG">
    @firstimage
</div>
<div class="texto_extracto">
    <p>@body </p>
    <p>@Html.ItemDisplayLink(T("Leer mas >>").ToString(), contentItem)</p>
</div>
<div class="aclara"></div>

You only have to paste this on your Orchard.Web/Core/Common/Views/Parts.Common.Body.Summary.cshtml document and ad two classes to your Site.css to control the layout and presentation of the image, these are my classes:
/*estilos para las imagenes de los extractos del blog
*************************************************************/

div.imagen_extracto { 
width: 150px; 
max-height: 150px; 
margin-right: 15px; 
float: left; 
overflow: hidden; 
}
div.ocultame { 
display: none;
}

With this, you get an image of 150x150px next to the left of your text extract on post lists. Hope this helps

Nov 11, 2011 at 1:11 PM

It might be slightly easier to achieve this using an ImageField.

Nov 14, 2011 at 8:22 AM

Possibly you are right but I have an issue with this field: it only is shown on Blog Archives widget and New Blog edit pages. When I ad this field to the Blog Post content type, Orchard says its ok but desn't show it to me in the corresponding edit page. That's the reason I did the "code side" solution.

Nov 14, 2011 at 10:33 AM
MemoryWebDev wrote:

Possibly you are right but I have an issue with this field: it only is shown on Blog Archives widget and New Blog edit pages. When I ad this field to the Blog Post content type, Orchard says its ok but desn't show it to me in the corresponding edit page. That's the reason I did the "code side" solution.

That sounds like a bug you could file with the Contrib.ImageField project.

Personally, I use my own modules (Mechanics and Media Garden) to attach images to content; it makes it pretty easy once you know how to use them (although they can get a lot easier to use in future versions).

Jun 27, 2012 at 2:20 PM

I know this is an old post, but I have a question about it.

I used the code to get the image in the latestBlogPost, but the image isn't scaled.

I now you can scale an image if you don't set the width and height properties in HTML, but I can't see how to erase them out of the code.