controlling image field display size

[gsilvis]

I have a table with a blob field containing a jpg file. There is a mime_type field set so the view and edit view show the image. But its too small. How can I control the size of the display of the image field?

Second question: If I needed to offer the user a control to rotate the image, how would I do that? If its seriously non-trivial then I'll police the building of the database.

Thanks
George

[shannah]

For the first question, you can implement the fieldname__htmlValue() method in the delegate class for your image field and specify a larger width for the image.

e.g.

Code: Select all

function fieldname__htmlValue(&$record){
    return '<img src="'.htmlspecialchars($record->display('fieldname')).'" width="400"/>';
}


This should affect the display in the view tab, but won't change the width in the edit tab (that is fixed).

Another way you could look at is by using CSS. Just look at the HTML for the images, and figure out a CSS rule that will modify the image width.

For allowing your users to rotate the images, there are two strategies:

1. Use the PHP GD Image functions.
2. Use Javascript (e.g. http://code.google.com/p/jquery-rotate/)

Depending on how interactive the interface needs to be, this could be trivial, or quite involved.

-Steve

[gsilvis]

Okay, working my way up the learning curve here.

My table is 'Cards' and the fieldname is 'CardImage'

I've created a file tables/Cards/Cards.php and put in it:

Code: Select all

<?

class tables_Cards {

   function CardImage__htmlValue(&$record){

       return '<img src="'.htmlspecialchars($record->display('CardImage')).'" width="400"/>';

   }

   }

?>


A couple times when the page has loaded I've momentarily seen the enlarged image, but then it promptly disappears. Other times I don't see the image at all.

What might I be missing?
Many thanks in advance
George

[gsilvis]

Got past this las problem: Bad things happen when there is white space at the top of the .php files!

George

[gsilvis]

You mention that "This should affect the display in the view tab, but won't change the width in the edit tab (that is fixed)."

So none of the customization features will change the width of an image on the edit tab. But could it be changed by editing one of the Xataface source files?

I really would like the image adjusted on the edit page. Can you point to me where the source could be tweaked?

Many thanks,
George

[shannah]

You should be able to do it using CSS. Look at the resulting HTML on your edit page and you should be able to come up with a css rule that will set the site of the image.

-Steve

[gsilvis]

Not familiar with CSS. Below is the HTML displaying the image. Looking at wikipedia that seems to mean that I need to compose a .css file that will override
the max-height specification? Am I on the right track? If you could point to a reference or example, that would be a help.

Thanks again,
George

Code: Select all

                           <img src="http://www.gasilvis.com/Eggen/index.php?-action=getBlob&-table=Cards&-field=CardImage&-index=0&Box=11B&Bundle=E&PDF=1&Page=10" style="display: block; max-height: 200px" alt="CardImage preview image"/>



[gsilvis]

I think I'm in the right place:

1. I have a custom head_slot.html with the following added:

Code: Select all

<style>
{literal}
img {max-height:1000px};
img {width:90%}
{/literal}
</style>

-note the {literal} to sneak past the Smarty compiler
-max-height is cranked up so that the width property can apply

2. In the source of the page I can see the style block added to the head block

3. But there is no change in the image display line; is still says max-height: 200px

Suggestions?
Thanks
George

[shannah]

You're ever so close, George. In order to override an inline style, you'll need to use the !important directive as part or your style rule.

You may also want to be a little more discriminating in your rule so that other images on the page don't get affected by your rule.

E.g.

Code: Select all

div.field img {
    max-height: 1000px !important;
    width: 90% !important;
}


Essentially this says that you want all img tags that are inside a div with class "field" (which this image would be), apply these rules.

Best regards

Steve

[gsilvis]

Thanks! Getting closer.

The field image looks great.

I was wondering what would happen to other images nearby. Alas, restricting it to div.field img is not enough: there is a delete.gif in there which is now smeared over the page.

Code: Select all

<a class="delete-file-link" href="#" title="Delete this file" onclick="Xataface.deleteFile('http://www.gasilvis.com/Eggen/index.php?-table=Cards&-action=browse&Box=%3D11B&Bundle=%3DE&PDF=%3D2&Page=%3D23', 'CardImage', 'Cards-CardImage-preview');return false;"><img src="/xataface/images/delete.gif" alt="Delete"/></a>                     


I tried

Code: Select all

div.delete-file-link img {
  width:10% !important;
}


to counter act , but no joy.
Any suggestion on how to suppress?

Thanks again. Having great fun here working with your framework.

George

[shannah]

Close. To target the delete image you would do

Code: Select all

a.delete-file-link img


rather than

Code: Select all

div.delete-file-link img


[gsilvis]

That got it. Recaping: to change an image size in the Edit screen using CSS I needed to :

create a custom head_slot.html in my templates directory with the following code icluded:

Code: Select all

<style>
{literal}
div.field img {
  max-height:1000px !important;
  width:90% !important;
}
// add this to reverse the above effect for the delete.gif
a.delete-file-link img {
  width:3% !important;
}
{/literal}
</style>

Thanks, Steve
George