Images: Clean display of the three sizes.

More
13 years 11 months ago #7274 by tobiasn
I've only been using FC for two days, but compared to K2, jSeblod or the likes, it's been awesome.

Only one disappointment so far, it's been the handling of images. We're always re-coding all templates, so an easy way to get image URLs is absolutely crucial.

I fixed this by implementing a small change in the images plugin. See below.

I'd commit this to SVN, but we use Git - and to be honest, I'm not that much of a coder - so I'll "release" the fix here, and maybe some of you gets inspired enough to commit this. I hope so - the image plugin is very important to make FC stand out as a CCK.

Basically, what I did was to insert three more variables to the image object: "small", "medium" and "large". These gives you the URL. Ideally, I should've made these arrays, so that you could get ->small["url"], ->medium["width"] or whatever. That'll be later.

The change is in the image.php plugin, in the onDisplayFieldValue function. I inserted the following before the // first condition is for the display for the preview feature-comment:
Code:
// Add clean display params for the three image sizes. // These are available as ->small ->medium or ->large from the image object. $field->{"small"} = JURI::base() . $srcs; $field->{"medium"} = JURI::base() . $srcm; $field->{"large"} = JURI::base() . $srcb;

After the change, my onDisplayFieldValue function looks like this:
Code:
function onDisplayFieldValue(&$field, $item, $values=null, $prop='display') { // execute the code only if the field type match the plugin type if($field->field_type != 'image') return; global $mainframe, $multiboxadded; jimport('joomla.filesystem'); $values = $values ? $values : $field->value; // some parameter shortcuts $usepopup = $field->parameters->get( 'usepopup' ) ; $popuptype = $field->parameters->get( 'popuptype', 1 ) ; if ($values && $values[0] != '') { $document = & JFactory::getDocument(); if ($usepopup && $mainframe->isSite() && ($popuptype == 1)) { if (!$multiboxadded) { // Multibox integration $document->addStyleSheet('components/com_flexicontent/librairies/multibox/multibox.css'); $csshack = ' <!--[if lte IE 6]> <style type="text/css"> .MultiBoxClose, .MultiBoxPrevious, .MultiBoxNext, .MultiBoxNextDisabled, .MultiBoxPreviousDisabled { behavior: url('.'components/com_flexicontent/librairies/multibox/iepngfix.htc); } </style> <![endif]--> '; $document->addCustomTag($csshack); JHTML::_('behavior.mootools'); $document->addScript('components/com_flexicontent/librairies/multibox/js/overlay.js'); $document->addScript('components/com_flexicontent/librairies/multibox/js/multibox.js'); $box = " var box = {}; window.addEvent('domready', function(){ box = new MultiBox('mb', {descClassName: 'multiBoxDesc', useOverlay: true}); }); "; $document->addScriptDeclaration($box); $multiboxadded = 1; } } $i = 0; foreach ($values as $value) { $value = unserialize($value); $path = JPath::clean(JPATH_SITE . DS . $field->parameters->get('dir') . DS . 'l_' . $value['originalname']); $size = getimagesize($path); $hl = $size[1]; $wl = $size[0]; $title = isset($value['title']) ? $value['title'] : ''; $alt = isset($value['alt']) ? $value['alt'] : ''; $desc = isset($value['desc']) ? $value['desc'] : ''; $srcs = $field->parameters->get('dir') . '/s_' . $value['originalname']; $srcm = $field->parameters->get('dir') . '/m_' . $value['originalname']; $srcb = $field->parameters->get('dir') . '/l_' . $value['originalname']; $tip = JText::_( 'FLEXI_FIELD_LEGEND' ) . '::' . $title; $id = $field->item_id . '_' . $field->id . '_' . $i; $i++; $view = JRequest::setVar('view', JRequest::getVar('view', 'items')); $src = ($view == 'category') ? $srcs : $srcm; // Add clean display params for the three image sizes. These are available as ->small ->medium or ->large from the image object. $field->{"small"} = JURI::base() . $srcs; $field->{"medium"} = JURI::base() . $srcm; $field->{"large"} = JURI::base() . $srcb; // first condition is for the display for the preview feature if ($mainframe->isAdmin()) { $field->{$prop} = '<img class="hasTip" src="../'.$srcs.'" alt ="'.$alt.'" title="'.$tip.'" />'; } else if ($usepopup && $popuptype == 1) { $field->{$prop} = ' <a href="'.$srcb.'" id="mb'.$id.'" class="mb"> <img class="hasTip" src="'. $src .'" alt ="'.$alt.'" title="'.$tip.'" /> <div class="multiBoxDesc mb'.$id.'">'.($desc ? $desc : $title).'</div> '; } else if ($usepopup && $popuptype == 2) { $field->{$prop} = ' <a href="'.$srcb.'" rel="rokbox['.$wl.' '.$hl.']" title="'.($desc ? $desc : $title).'"> <img src="'. $src .'" alt ="'.$alt.'" /> '; } else { $field->{$prop} = '<img class="hasTip" src="'. $src .'" alt ="'.$alt.'" title="'.$tip.'" />'; } } } else { $field->{$prop} = ''; } // some parameter shortcuts }

Hope some of you find this useful!

-tobias

Please Log in or Create an account to join the conversation.

More
13 years 11 months ago #7278 by micker
thanks for you contrib !

FLEXIcontent is Free but involves a very big effort on our part.
Like the our support? (for a bug-free FC, despite being huge extension) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing reviews. Thanks![/size]

Please Log in or Create an account to join the conversation.

More
13 years 11 months ago #7279 by kenmcd
.
This has been requested a few times already.
So adding this is probably a real good idea.

What exact code snippet(s) do you use in the template?

Could you attach an example template (for quicker/easier testing)?

Thanks!

.

Please Log in or Create an account to join the conversation.

More
13 years 10 months ago #7302 by tobiasn
I did some pretty nifty stuff with FlexiContent, and the site is looking good. Mind you, it's work in progress, so there might be bugs. Check it here: saunders.smakstest.no/cms/

On the "work" page, I'm pulling the medium size thumb from image field 1. The sub-menu is just used for sorting, the sorting magic is done by the Quicksand jQuery plugin ( razorjack.net/quicksand/ )

On the "Office/Press" page, I'm pulling images and content from subcategories. (I implemented the code for pulling sub-items.)

Some of these items has attachments, and some has external links. I replicated the stuff I did with the image plugin on the file plugin, and added some more clean values to play around with.

The category_subcategories for the Press-section showcases all the changes I made. It looks like this:
Code:
<?php foreach ($this->categories as $sub) : ?><h2><?php echo $this->escape($sub->title); ?></h2> <ul> <?php foreach ($sub->items as $subitem) : $link = ""; if($subitem->fields["attachment"]->url || $subitem->fields["externalurl"]->display){ if($subitem->fields["attachment"]->url){ $link = 'href="'.$subitem->fields["attachment"]->url.'" target="_blank" title="Download: '.$subitem->fields["attachment"]->filename.'"'; } else { $link = 'href="'.$subitem->fields["externalurl"]->display.'" target="_blank" title="Visit: '.$subitem->fields["externalurl"]->display.'"'; } } ?> <li> <a class="img" <?php if(!empty($link)) echo $link; ?>> <img src="<?php echo $subitem->fields["pressimage"]->medium ?>" alt="<?php echo $this->escape($subitem->title); ?>" /> <h3><a <?php if(!empty($link)) echo $link; ?>><?php echo $this->escape($subitem->title); ?></h3> <?php echo $subitem->text; ?> </li> <?php endforeach; ?> </ul> <?php endforeach; ?>

I really like that you use normal Joomla logic in the templates. It makes FC a great platform to develop on.

I do however think that the "advanced" fields/plugins like file and image should have a uniform way to extract basic, clean information. I understand the need for a "dummy" display for speedy sitebuilding, but it seems counter-intuitive (for me at least) that the only way to extract data is through (sometimes bloated) pre-formatted HTML. I want my code as clean as possible :)

I'd propose that these params are put in its own object or array. I'll try to make a proposal file and put it up here later this week.

Please Log in or Create an account to join the conversation.

More
13 years 10 months ago #7578 by kenmcd

tobiasn wrote: I'd propose that these params are put in its own object or array. I'll try to make a proposal file and put it up here later this week.


If you would like to get your more advanced suggestions for both the images and files plug-ins into the upcoming v1.5.3 . . . now is the time to get it in.
:D

.

Please Log in or Create an account to join the conversation.

More
13 years 7 months ago #10550 by 5to1
hey!

i don't know if this is deprecated and is alreadey implemented to flexi 1.5.3 but i'm having some trouble accessing those created imagepaths in template.

i added those lines to plugins/image.php and i can see them in the field in plugin code. but when trying to access them from the template those attributes are just not available.

i know that i'm probably missing something here, but what?

cheers,

j

Please Log in or Create an account to join the conversation.

Moderators: vistamediajoomlacornerggppdk
Time to create page: 0.288 seconds
Save
Cookies user preferences
We use cookies to ensure you to get the best experience on our website. If you decline the use of cookies, this website may not function as expected.
Accept all
Decline all
Essential
These cookies are needed to make the website work correctly. You can not disable them.
Display
Accept
Analytics
Tools used to analyze the data to measure the effectiveness of a website and to understand how it works.
Google Analytics
Accept
Decline