Textpattern Forum

You are not logged in. Register | Login | Help

#1 2011-06-23 13:52:54

debeljko
Member
From: Belgrade
Registered: 2007-07-02
Posts: 15
Website

Image name instead ID in html

Hi there,

is there a way to have image names as a file name in html? Like <img src=“image_name.jpg” /> instead something like <img src=“22.jpg” />. It seems that google looks for file name of the image rather than img attributes.

Tnx.

Offline

#2 2011-06-23 14:00:16

philwareham
Core designer
From: Farnham, Surrey, UK
Registered: 2009-06-11
Posts: 1,574
Website

Re: Image name instead ID in html

Hi debeljko,

As far as I know there is no way to have the original image filename, as Textpattern converts the file to a numerical when uploading. Might be better to make use of the image alt attribute to describe your image – that carries more importance with Google anyway.

Offline

#3 2011-06-23 14:17:48

maniqui
Moderator
From: Buenos Aires, Argentina
Registered: 2004-10-10
Posts: 2,975
Website

Re: Image name instead ID in html

You could try something like this:

  1. in the src attribute, create something like this src="22-image_name.jpg". You could do that with smd_gallery plugin, for sure, using the replacement tags that the plugin provides (src="{id}-{name}{ext}").
  2. then, create a clever internal RewriteRule in your .htaccess file to rewrite any request to XX-image_name.ext to XX.ext.

I’m planning to do something like that on some future project, and I’d bet that Google will like it. In any case, as Phil suggest, make a good use of alt/title/figcaption, and Google will like that too.


La música ideas portará y siempre continuará

TXP Builders – finely-crafted code, design and txp

Offline

#4 2011-06-23 14:30:49

debeljko
Member
From: Belgrade
Registered: 2007-07-02
Posts: 15
Website

Re: Image name instead ID in html

philwareham wrote:

Might be better to make use of the image alt attribute to describe your image – that carries more importance with Google anyway.

Well, it should, but after many queries i made and the results i’ve got, i doubt it really does.

@Maniqui, I’ll try that, thanx.

Offline

#5 2011-06-23 15:10:52

MattD
Plugin Author
From: Monterey, California
Registered: 2008-03-21
Posts: 1,179
Website

Re: Image name instead ID in html

Great idea Julián! Once you’ve done this please create a TXPTip.

Last edited by MattD (2011-06-23 15:11:21)


My Plugins

Piwik Dashboard, Minibar, Article Image Colorpicker, Admin Datepicker, Admin Google Map, Admin Colorpicker

Offline

#6 2011-06-23 16:32:56

Gocom
Developer
Registered: 2006-07-14
Posts: 4,471
Website

Re: Image name instead ID in html

maniqui wrote:

You could try something like this:

That would work really well.

then, create a clever internal RewriteRule in your .htaccess file to rewrite any request to XX-image_name.ext to XX.ext.

If someone is wondering how to do such rewrite, maybe I could give a small example. Shall we:

RewriteCond %{REQUEST_URI} ^/images/
RewriteRule ^images/([0-9]+)/(.+)(png|gif|jpg|bmp)$ images/$1.$3 [NC]

Obviously requires ModRewrite module (or similar if different than Apache server is used). Should be placed right under RewriteEngine on line in your .htaccess file.

The snippet would rewrite requested path matching to /images/id/string.ext to /images/id.ext. The “images” should be changed to match the directory name you host your files in. Can be changed to a longer path too, if a sub-directory is used.

In simplified words, this means that request going to http://example.com/images/9/at-our-wedding-dinner.png would show an image residing in http://example.com/images/9.png.

Should be noted that as plain rewrite patterns are used (w/o passing it to a larger server side script), the text string describing the image (the fake image name) can be anything; anyone could change it to anything. For example the mentioned at-our-wedding-dinner.png could easily become a fugly-jukka-and-his-monstrous-fatty.png.

That can be prevented, but it would require server side script (like TXP does rewriting) and eats more resources from the server as additional SQL queries would check the existence of such image name.

Last edited by Gocom (2011-06-23 16:38:17)


Rah-plugins | What? I’m a little confused… again :-) <txp:is_god />

Offline

#7 2011-06-23 16:47:15

maniqui
Moderator
From: Buenos Aires, Argentina
Registered: 2004-10-10
Posts: 2,975
Website

Re: Image name instead ID in html

@Gocom: thanks for the follow up, and for providing the necessary code and explanations.

Could the Rewrite snippet be put directly on an .htaccess file inside the /images folder?
Of course, it may require some minor edits, to read like this:

RewriteRule ^([0-9]+)/(.+)(png|gif|jpg|bmp)$ images/$1.$3 [NC]

The benefit would be to avoid the RewriteCond/RewriteRule running on every request, but only on those requests that are explicitly done on the /images folder. May that provide a little gain on performance?


La música ideas portará y siempre continuará

TXP Builders – finely-crafted code, design and txp

Offline

#8 2011-06-23 17:28:14

Gocom
Developer
Registered: 2006-07-14
Posts: 4,471
Website

Re: Image name instead ID in html

maniqui wrote:

May that provide a little gain on performance?

Yes. It saves rest of the site from some work (one conditional check).

Of course, it may require some minor edits, to read like this

Some small stuff. Placing following as .htaccess file to the images directory would work:

RewriteEngine On
RewriteRule ^([0-9]+)/(.+)(png|gif|jpg|bmp)$ $1.$3 [NC]

Last edited by Gocom (2011-06-23 17:28:48)


Rah-plugins | What? I’m a little confused… again :-) <txp:is_god />

Offline

#9 2011-06-23 22:45:30

jakob
Moderator
From: Germany
Registered: 2005-01-20
Posts: 1,895
Website

Re: Image name instead ID in html

very nice you guys!


TXP Builders – finely-crafted code, design and txp

Offline

#10 2011-06-27 19:24:45

CeBe
Plugin Author
From: Caen - Fr
Registered: 2010-06-25
Posts: 282
Website

Re: Image name instead ID in html

What a great tip !
As I wanted to do the same in a image gallery, and using the thumbnails, here’s how I implemented it :

<txp:images category="galerie" break="" pageby="limit" limit="12">

  <txp:php>
    global $thisimage, $variable;
    extract( $thisimage ) ;
    // populate $variable with the image informations
    $variable = is_array( $variable )
                ? array_merge( $variable, compact( array_keys($thisimage) ) )
                : compact( array_keys($thisimage) ) ;
  </txp:php>

  <a href="<txp:site_url />images/<txp:variable name="id" />/<txp:variable name="name" />" title="<txp:variable name="caption" />" rel="lightbox-galerie">
    <img width="<txp:variable name="thumb_w" />" height="<txp:variable name="thumb_h" />" title="<txp:variable name="caption" />" alt="<txp:variable name="alt" />" src="<txp:site_url />images/<txp:variable name="id" />t/<txp:variable name="name" />">
  </a>

</txp:images>

and /image/.htaccess :

RewriteEngine On
RewriteRule ^([0-9t]+)/(.+)(png|gif|jpg|bmp)$ $1.$3 [NC]

Offline

Board footer

Powered by FluxBB