How do i add pictures to the post title?

Topics: ASP.NET 2.0, Themes
Mar 13, 2011 at 2:11 PM

The only thing i cant seem to be able to do is to add a picture to the post title has it appears on the homepage. Its a major design flaw to have just text for each post and reduces the post click rate.

 

Thanks

Coordinator
Mar 14, 2011 at 9:49 AM

I don't think there is a large demand to put images in the Title.  But it can be done.  The PostView.ascx file in your theme folder outputs the Title, and it probably looks something like (taken from the Standard theme).

<h1><a href="<%=Post.RelativeLink %>" class="taggedlink"><%=Server.HtmlEncode(Post.Title) %></a></h1>

Post.Title is run thru Server.HtmlEncode() which doesn't allow HTML tags to work like they otherwise would.  If you remove Server.HtmlEncode() so it looks like:

<h1><a href="<%=Post.RelativeLink %>" class="taggedlink"><%=Post.Title %></a></h1>

... then if you add an <img> tag in the post Title when composing the post, the image should come thru when viewing the post.

Mar 14, 2011 at 12:10 PM

I dont think you understand. I want to place a picture on each post on this page: http://www.muscletitans.com/

 

Where it says rating etc, i want to place an image there. I know how to place the image, but what i want to know is if this will work:

 

I create a new imageselector when you create/edit a post.

The image is saved

Set the image path (the one i will have created on the main page near rating etc) to the path of the image i selected when creating the post.

 

Thanks

Mar 16, 2011 at 9:13 PM
Edited Mar 16, 2011 at 9:15 PM

Ok i found a way to put the pictures on the front page (but not in the actual post), how would you recommend i give the path? Can i create a code that lets me upload an image and links it to the image?

 

Thanks.

Mar 16, 2011 at 11:20 PM

TheGateKeeper, let me know if i understood correctly.

As per my understanding you want to display images along with every post on your the main page of your site right? Eventually i browsed your site - http://www.muscletitans.com and found that you have images in every post but they are appearing only when someone view the one post at a time (That is post detail view)

So in order to display Images in on main page along with every post you dont need to upload images again. Instead you need to tweak postView code a bit. 

Please let me know if you want the same then i can explain further the same steps.

Thanks - http://www.blogEngineWall.com

Mar 18, 2011 at 7:42 PM
jitendraapi wrote:

TheGateKeeper, let me know if i understood correctly.

As per my understanding you want to display images along with every post on your the main page of your site right? Eventually i browsed your site - http://www.muscletitans.com and found that you have images in every post but they are appearing only when someone view the one post at a time (That is post detail view)

So in order to display Images in on main page along with every post you dont need to upload images again. Instead you need to tweak postView code a bit. 

Please let me know if you want the same then i can explain further the same steps.

Thanks - http://www.blogEngineWall.com

Thanks for the reply Jitendraapi. I ran the project locally and took a screenshot of how im trying to implement it so you can take a look. Here it is:

http://img140.imageshack.us/img140/3043/postdescription.jpg

Do you think it is possible to make this work?

Mar 19, 2011 at 5:59 AM

Hello TheGateKeeper,

I got your issue and Thanks to you ... i made same changes to my blog as well. And wrote a detail post just know.

So just follow up the post - http://www.blogenginewall.com/post/2011/03/18/Display-Images-With-Posts-On-BlogEngine-Front-Page.aspx

and you will get desired result. But i am afraid if you will be able follow all the steps.

Let me know if you face any issues.

Thanks.

Mar 19, 2011 at 5:53 PM
Edited Mar 19, 2011 at 6:41 PM

 

Hi, when implementing your code i ran into a problem when try to use this code:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (this.Location == BlogEngine.Core.ServingLocation.PostList)
        {
            frontpage.Controls.Add(LoadPostView("PostViewForList.ascx", true, ServingLocation.PostList));
        }
        else
            frontpage.Controls.Add(LoadPostView("PostViewFull.ascx", false, ServingLocation.SinglePost));
    }

The compiler cant find my div that i called "postPlaceholder" even thou i used all your methods.

 

Also, i dont understand your image code.

 

<script runat="server">
    public string GetShortenedContent(string content, int pos, string link)
    {
        if (Post.Description != null && Post.Description.Length > 0) return Post.Description + "... <a href=\"" + link + "\">[More]</a>";
        string sStripped = BlogEngine.Core.Utils.StripHtml(content);
        if (sStripped.Length <= pos) return sStripped;
        else
            return sStripped.Substring(0, pos) + "... <a href=\"" + link + "\">[More]</a>";
    }
    public string getImage(bool ShowExcerpt, string input)
    {
        if (!ShowExcerpt || input == null)
            return "";
        string pain = input;
        string pattern = @"<img(.|\n)+?>";
        System.Text.RegularExpressions.Match m = System.Text.RegularExpressions.Regex.Match(input, pattern,
        System.Text.RegularExpressions.RegexOptions.IgnoreCase | System.Text.RegularExpressions.RegexOptions.Multiline);
        if (m.Success)
        {
            string src = getSrc(m.Value);
            string img = string.Format("<img class='left' width=\"150\" {0}  />", src);
            return img;
        }
        else
        {
            return "";
        }
    }
    string getSrc(string input)
    {
        string pattern = "src=[\'|\"](.+?)[\'|\"]";
        System.Text.RegularExpressions.Regex reImg = new System.Text.RegularExpressions.Regex(pattern,
        System.Text.RegularExpressions.RegexOptions.IgnoreCase | System.Text.RegularExpressions.RegexOptions.Multiline);
        System.Text.RegularExpressions.Match mImg = reImg.Match(input);
        if (mImg.Success)
        {
            return mImg.Value;
        }
        return "";
    }
</script>

 

I know it gets the image by going throu the post, but how can i make it so it gets the image from the theme images folder? For example if the post's title is "Gain-Mass-using-Strength-Training-Routines" it will look for "Gain-Mass-using-Strength-Training-Routines.jpg". And if it doesnt find anything, it will use a default image called "thumbnail.jpg"

 

Thanks

 

Here is my code:

 

PostView.ascx

<%@ Control CodeBehind="PostView.ascx.cs" Language="C#" AutoEventWireup="true" EnableViewState="false" Inherits="themes_MyTheme_PostView" %>
<div id="postPlaceholder" runat="server"></div>

PostView.ascx.cs

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using BlogEngine.Core.Web.Controls;
using BlogEngine.Core;

public partial class themes_MyTheme_PostView : BlogEngine.Core.Web.Controls.PostViewBase
{
protected void Page_Load(object sender, EventArgs e)
{
if (this.Location == BlogEngine.Core.ServingLocation.PostList)
{
postPlaceholder.Controls.Add(LoadPostView("PostViewForList.ascx", true, ServingLocation.PostList)); //cant find postPlaceholder
}

else postPlaceholder.Controls.Add(LoadPostView("PostViewFull.ascx", false, ServingLocation.SinglePost)); //cant find postPlaceholder

}

private PostViewBase LoadPostView(string useControlNamed, bool showExcerpt, ServingLocation serving)
{

string query = Request.QueryString["theme"];
string theme = !string.IsNullOrEmpty(query) ? query : BlogSettings.Instance.Theme;
string path = string.Concat(Utils.RelativeWebRoot, "themes/", theme, "/", useControlNamed);
//Control.MapPath() PostViewBase postView = (BlogEngine.Core.Web.Controls.PostViewBase)LoadControl(path); postView.ShowExcerpt = showExcerpt;// true;// BlogSettings.Instance.ShowDescriptionInPostList; postView.Post = Post; postView.ID = Post.Id.ToString().Replace("-", string.Empty);
postView.Location = serving;

return postView;
}

/// <summary> /// Retrieves the current page index based on the QueryString. /// </summary> private int GetPageIndex()
{
int index = 0;
if (int.TryParse(Request.QueryString["page"], out index))
index--;

return index;
}

private int getCurrentPostPos()
{
//if (!isPostList) // return -1; int localCounter = 0;
for (int i = 0; i < BlogEngine.Core.Post.Posts.Count; i++)
{
if (Post.Id == BlogEngine.Core.Post.Posts[i].Id)
{
localCounter++;
return localCounter;
}
else { //if (Post.Comments[i].IsApproved || !BlogEngine.Core.BlogSettings.Instance.EnableCommentsModeration) //er den visible eller er bruger logget ind skal den t�lles med if (BlogEngine.Core.Post.Posts[i].IsPublished || Page.User.Identity.IsAuthenticated)
localCounter++;
}
}
return -1;
}
}
Mar 21, 2011 at 9:03 AM

Bump

Mar 22, 2011 at 10:53 PM

Hey sorry got busy, will reply by EOD.

Mar 26, 2011 at 5:26 PM

Its ok i did it myself

Sep 30, 2013 at 6:00 PM
Hey how you put the image?

Regards
Mayolo
Sep 30, 2013 at 8:52 PM