Add Title at Image in my post

Topics: ASP.NET 2.0, Controls, Themes
Jul 22, 2012 at 4:14 PM

Hi,

i have a problem with my image, google ask to add title every image of blog.. but in blogengine.net i dont have founded command TITLE for image but only ALT (is description of image and not title) ... now i have solved opening html and add Title at every image but is very tiring work...

someone can you help me?

thank you very much

Fabrizio

Coordinator
Jul 23, 2012 at 3:20 PM

BE uses TinyMCE for image handling. If you right-click image and select "insert/edit", there is option for "image description" which set as title in the code.

Jul 23, 2012 at 4:37 PM

option is ALT and this comand is for image description isn't for to put TITLE ...

if i add description in ALT when i put my mouse over image i dont see the description added.... do you have tried?

i know that GOOGLE want for image of site TITLE... it's true?

description is the same???? but why i dont see the description when my mouse is over image?

thanksss

Coordinator
Jul 23, 2012 at 5:40 PM

You right, changing description only effects ALT and not title. On the other hand, this should be ok with google - for example here it says very clear:

"As the Googlebot does not see the images directly, we generally concentrate on the information provided in the "alt" attribute."

Jul 24, 2012 at 8:06 AM

Ok , i have open this question only because i have saw blog in blogengine.net with title over the image but now
i understand that this title is was added with code...
thank you very much rtur...
bye
Fabry




From: [email removed]
To: [email removed]
Date: Mon, 23 Jul 2012 11:34:52 -0700
Subject: Re: Add Title at Image in my post [blogengine:385064]

From: rtur
You right, changing description only effects ALT and not title. On the other hand, this should be ok with google - for example here it says very clear:
"As the Googlebot does not see the images directly, we generally concentrate on the information provided in the "alt" attribute."
Read the full discussion online.
To add a post to this discussion, reply to this email (blogengine@discussions.codeplex.com)
To start a new discussion for this project, email blogengine@discussions.codeplex.com
You are receiving this email because you subscribed to this discussion on CodePlex. You can unsubscribe on CodePlex.com.
Please note: Images and attachments will be removed from emails. Any posts to this discussion will also be available online at CodePlex.com
Jul 24, 2012 at 4:53 PM

rtur

but now if i want to put description in ALT in all my image of my blog... what i must do? there is a solution?

can i give name of image in ALT description??

what do you think?

bye

Fabry

Coordinator
Jul 24, 2012 at 5:34 PM

Not sure what kind of solution you are looking for. If you want truly descriptive ALTs to improve CEO, that probably a manual task as you need to individually tag every picture with list of appropriate keywords. If your images already nicely named and you ok with using image names as ALT and/or title, simple script can be written to automate this. Obviously, "img1.png" and "img2.png" set as ALT are not much of improvement.

Jul 24, 2012 at 5:43 PM

but for the script, where is the page and the function where i must to work in blogengine.net ?







From: [email removed]
To: [email removed]
Date: Tue, 24 Jul 2012 09:35:02 -0700
Subject: Re: Add Title at Image in my post [blogengine:385064]

From: rtur
Not sure what kind of solution you are looking for. If you want truly descriptive ALTs to improve CEO, that probably a manual task as you need to individually tag every picture with list of appropriate keywords. If your images already nicely named and you ok with using image names as ALT and/or title, simple script can be written to automate this. Obviously, "img1.png" and "img2.png" set as ALT are not much of improvement.
Read the full discussion online.
To add a post to this discussion, reply to this email (blogengine@discussions.codeplex.com)
To start a new discussion for this project, email blogengine@discussions.codeplex.com
You are receiving this email because you subscribed to this discussion on CodePlex. You can unsubscribe on CodePlex.com.
Please note: Images and attachments will be removed from emails. Any posts to this discussion will also be available online at CodePlex.com
Coordinator
Jul 25, 2012 at 3:16 AM
Edited Jul 25, 2012 at 3:19 AM

1. Backup your posts (with default XML provider, backup app_data/posts folder).

2. Save code below as Default.aspx in the /setup/ folder.

3. Go to /setup/default.aspx and click button. This should fill in empty or missing "alt" tags with image names.

You can enable logging (settings/advanced/enable logging) and comment out lines that actually replace alt tags and run just without it to just log what will be replaced. Then you can go to app_data/logger.txt and find something like this:

 

Date: 7/24/2012 9:02:13 PM
REPLACE: <img src="/IMAGES/2012/07/clock.png.jpgx" alt="" /> -> <img src="/IMAGES/2012/07/clock.png.jpgx" alt="clock.png.jpgx" />
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
Date: 7/24/2012 9:02:13 PM
REPLACE: <img src="/image.axd?picture=%2f2012%2f07%2fOutlook+.png" alt="" /> -> <img src="/image.axd?picture=%2f2012%2f07%2fOutlook+.png" alt="Outlook+.png" />
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
Date: 7/24/2012 9:02:13 PM
REPLACE: <img src="/IMAGES/2012/07/chart_down.png.jpgx" alt="" /> -> <img src="/IMAGES/2012/07/chart_down.png.jpgx" alt="chart_down.png.jpgx" />
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
Date: 7/24/2012 9:02:13 PM
REPLACE: <img src="/image.axd?picture=%2f2012%2f07%2f3DSMax.png" alt="" /> -> <img src="/image.axd?picture=%2f2012%2f07%2f3DSMax.png" alt="DSMax.png" />

 

So you can see what actually will be replaced and tweak it if you don't like result. Then run with "Content.Replace" lines and it should fix "alt" tags. Don't forget to remove /setup/defautlt.aspx when done.

 

<%@ Page Language="C#" %>
<%@ Import Namespace="BlogEngine.Core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void Button1_Click(object sender, EventArgs e)
    {
        if (Post.Posts.Count > 0)
        {            
            for (int i = Post.Posts.Count -1; i >= 0; i--)
            {
                var p = Post.Posts[i];
                var ct = p.Content;
                var tags = GetImageTags(ct);

                foreach (string s in GetImageTags(ct))
                {
                    var name = GetImageName(s);
                    var alt = "";
                    
                    System.Diagnostics.Debug.WriteLine(name);
                    
                    if (s.Contains("alt=", StringComparison.OrdinalIgnoreCase))
                    {
                        if(s.Contains("alt=\"\"", StringComparison.OrdinalIgnoreCase))
                        {
                            // empty alt tag, fill in
                            alt = s.Replace("alt=\"\"", "alt=\"" + name + "\"");                         
                        }
                    }
                    else
                    {
                        // no alt tag, add one
                        alt = s.Insert(s.IndexOf("/>"), " alt=\"" + name + "\"");
                    } 
                     
                    Utils.Log(string.Format("REPLACE: {0} -> {1}", s, alt));

                    if (alt.Length > 0)
                    {
                        p.Content = p.Content.Replace(s, alt);
                        p.Save();
                    }
                }
            }
        }
    }

    protected List<string> GetImageTags(string source)
    {
        List<string> tags = new List<string>();
        string regimg = @"<img[^>]*?src\s*=\s*[""']?([^'"" >]+?)[ '""][^>]*?>";
        MatchCollection matches = Regex.Matches(source, regimg, RegexOptions.IgnoreCase | RegexOptions.Singleline);
        foreach (Match m in matches)
        {
            tags.Add(m.Value);
        }
        return tags;
    }

    protected string GetImageName(string s)
    {
        if (s.ToLower().Contains("src="))
        {
            string name = "";
            int from = s.ToLower().IndexOf("src=");
            from = from + 5;
            
            int to = s.ToLower().IndexOf("\"", from);

            if (to - from > 0)
            {
                name = s.Substring(from, to - from);
                
                // remove picture handler
                name = name.Replace("/image.axd?picture=", "");
                name = name.Replace("IMAGES", "");
                
                // remove "/" in the URL
                name = name.Replace("%2f", "");
                name = name.Replace("/", "");

                // remove year/month numbers
                name = Regex.Replace(name, @"[\d-]", "");
                
                return name;
            }
        }
        return "";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />       
    </div>
    </form>
</body>
</html>

Jul 25, 2012 at 8:22 AM
goooddd
thank you very much rtur.... but if i want to leave extension?
example:
fOutlook.png = fOutlook
fOutlook.jpg=fOutlook
fOutlook.png.jpgx = fOutlook

i must to take the name until "."

Fab




From: [email removed]
To: [email removed]
Date: Tue, 24 Jul 2012 19:16:23 -0700
Subject: Re: Add Title at Image in my post [blogengine:385064]

From: rtur
1. Backup your posts (with default XML provider, backup app_data/posts folder).
2. Save code below as Default.aspx in the /setup/ folder.
3. Go to /setup/default.aspx and click button. This should fill in empty or missing "alt" tags with image names.
You can enable logging (settings/advanced/enable logging) and comment out lines that actually replace alt tags and run just without it to just log what will be replaced. Then you can go to app_data/logger.txt and find something like this:

Date: 7/24/2012 9:02:13 PM
REPLACE: <img src="/IMAGES/2012/07/clock.png.jpgx" alt="" /> ->  alt="clock.png.jpgx" />
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
Date: 7/24/2012 9:02:13 PM
REPLACE: <img src="/image.axd?picture=%2f2012%2f07%2fOutlook+.png" alt="" /> ->  alt="Outlook+.png" />
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
Date: 7/24/2012 9:02:13 PM
REPLACE: <img src="/IMAGES/2012/07/chart_down.png.jpgx" alt="" /> ->  alt="chart_down.png.jpgx" />
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
Date: 7/24/2012 9:02:13 PM
REPLACE: <img src="/image.axd?picture=%2f2012%2f07%2f3DSMax.png" alt="" /> ->  alt="DSMax.png" />

So you can see what actually will be replaced and tweak it if you don't like result. Then run with "" and it should fix "alt" tags. Don't forget to remove /setup/defautlt.aspx when done.

<%@ Page Language="C#" %>
<%@ Import Namespace="BlogEngine.Core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void Button1_Click(object sender, EventArgs e)
    {
        if (Post.Posts.Count > 0)
        {            
            for (int i = Post.Posts.Count -1; i >= 0; i--)
            {
                var p = Post.Posts[i];
                var ct = p.Content;
                var tags = GetImageTags(ct);

                foreach (string s in GetImageTags(ct))
                {
                    var name = GetImageName(s);
                    var alt = "";
                    
                    System.Diagnostics.Debug.WriteLine(name);
                    
                    if (s.Contains("alt=", StringComparison.OrdinalIgnoreCase))
                    {
                        if(s.Contains("alt=\"\"", StringComparison.OrdinalIgnoreCase))
                        {
                            // empty alt tag, fill in
                            alt = s.Replace("alt=\"\"", "alt=\"" + name + "\"");                         
                        }
                    }
                    else
                    {
                        // no alt tag, add one
                        alt = s.Insert(s.IndexOf("/>"), " alt=\"" + name + "\"");
                    } 
                     
                    Utils.Log(string.Format("REPLACE: {0} -> {1}", s, alt));

                    if (alt.Length > 0)
                    {
                        p.Content = p.Content.Replace(s, alt);
                        p.Save();
                    }
                }
            }
        }
    }

    protected List<string> GetImageTags(string source)
    {
        List<string> tags = new List<string>();
        string regimg = @"]*?src\s*=\s*[""']?([^'"" >]+?)[ '""][^>]*?>";
        MatchCollection matches = Regex.Matches(source, regimg, RegexOptions.IgnoreCase | RegexOptions.Singleline);
        foreach (Match m in matches)
        {
            tags.Add(m.Value);
        }
        return tags;
    }

    protected string GetImageName(string s)
    {
        if (s.ToLower().Contains("src="))
        {
            string name = "";
            int from = s.ToLower().IndexOf("src=");
            from = from + 5;
            
            int to = s.ToLower().IndexOf("\"", from);

            if (to - from > 0)
            {
                name = s.Substring(from, to - from);
                
                // remove picture handler
                name = name.Replace("/image.axd?picture=", "");
                name = name.Replace("IMAGES", "");
                
                // remove "/" in the URL
                name = name.Replace("%2f", "");
                name = name.Replace("/", "");

                // remove year/month numbers
                name = Regex.Replace(name, @"[\d-]", "");
                
                return name;
            }
        }
        return "";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />       
    </div>
    </form>
</body>
</html>


Read the full discussion online.
To add a post to this discussion, reply to this email (blogengine@discussions.codeplex.com)
To start a new discussion for this project, email blogengine@discussions.codeplex.com
You are receiving this email because you subscribed to this discussion on CodePlex. You can unsubscribe on CodePlex.com.
Please note: Images and attachments will be removed from emails. Any posts to this discussion will also be available online at CodePlex.com
Coordinator
Jul 25, 2012 at 3:04 PM

That's where "tweak" part comes into play. You add few more "replace" to remove extensions you don't need, like:

name = name.Replace("IMAGES", "");

// replace file extensions
name = name.Replace(".png", "");
name = name.Replace(".jpgx", "");
name = name.Replace(".jpg", "");

You can also convert underscores into spaces if it used in file names to separate words etc - whatever you want.

Jul 25, 2012 at 3:32 PM

Ok rtur thank you very much...
i will try this script this evening
bye
Fabry



From: [email removed]
To: [email removed]
Date: Wed, 25 Jul 2012 07:05:02 -0700
Subject: Re: Add Title at Image in my post [blogengine:385064]

From: rtur
That's where "tweak" part comes into play. You add few more "replace" to remove extensions you don't need, like:

name = name.Replace("IMAGES", "");

// replace file extensions
name = name.Replace(".png", "");
name = name.Replace(".jpgx", "");
name = name.Replace(".jpg", "");

You can also convert underscores into spaces if it used in file names to separate words etc - whatever you want.
Read the full discussion online.
To add a post to this discussion, reply to this email (blogengine@discussions.codeplex.com)
To start a new discussion for this project, email blogengine@discussions.codeplex.com
You are receiving this email because you subscribed to this discussion on CodePlex. You can unsubscribe on CodePlex.com.
Please note: Images and attachments will be removed from emails. Any posts to this discussion will also be available online at CodePlex.com