Go to main content

Textpattern CMS support 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: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

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
Member
From: Buenos Aires, Argentina
Registered: 2004-10-10
Posts: 3,070
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,254
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, Google Analytics Dashboard, Minibar, Article Image Colorpicker, Admin Datepicker, Admin Google Map, Admin Colorpicker

Offline

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

Gocom
Developer Emeritus
From: Helsinki, Finland
Registered: 2006-07-14
Posts: 4,533
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)

Offline

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

maniqui
Member
From: Buenos Aires, Argentina
Registered: 2004-10-10
Posts: 3,070
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 Emeritus
From: Helsinki, Finland
Registered: 2006-07-14
Posts: 4,533
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)

Offline

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

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,577
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: 345
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

#11 2011-06-27 20:13:21

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,577
Website

Re: Image name instead ID in html

Claire, if you’re on txp 4.30+, you should be able to replace all your txp:variables with txp:image_info so you end up with:

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

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

</txp:images>

TXP Builders – finely-crafted code, design and txp

Offline

#12 2011-06-27 20:53:02

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

Re: Image name instead ID in html

jakob a écrit:

you should be able to replace all your txp:variables with txp:image_info

Ah, yes ! That was the clever thing I’ve been looking for :)
Works perfectly, thank you !

Offline

Board footer

Powered by FluxBB