Event Calendar v3

[DivaVocals]

Resizing is an admin event_manager function and is completely separate to the display of event images in event calendar.

That's not completely true.. the re-sized image is what is displayed on the events page.. the resizing is taking place in the events manager.. You made it clear early on in these discussions that YOU don't necessicarily want this module to re-size images for you that you would prefer to do this work yourself and upload the full image. on the front end to support the CSS driving the image resizing, you do need to remove the IMG height and width or the images will distort.

[DivaVocals]

That's not completely true.. the re-sized image is what is displayed on the events page.. the resizing is taking place in the events manager.. You made it clear early on in these discussions that YOU don't necessicarily want this module to re-size images for you that you would prefer to do this work yourself and upload the full image. on the front end to support the CSS driving the image resizing in the display, versus actually re-sizing the image file, you do need to remove the IMG height and width or the images will distort.

More on this and a correction to my previous post..

A lot of people seem to wonder about just how to proportionally scale images with CSS; for the image to fit into FOO x BAR container... Thing is, a browser is not a graphics application and CSS isn't a graphics API. What it means is that you can't do that with CSS! What you CAN do, however, is have the <img> proportionally scale within one-axis limit. You can make large images smaller and smaller images larger by setting a specified width or max-width while leaving the height to be scaled proportionally to width. Turning it around, you can use the height constrains while leaving the width scale proportionally. You can't have both at the same time.

To add to this you cannot use the inline IMG height and width settings AND use these kinds of CSS scaling techniques together.. or you will get distorted images.. Re-sizing the physical image files is and should be a user preference, and it may or may not affect the display.. If the shopowner scales the image to fit the container using the re-sizing tool in the admin, they should be able to do that..

the display of those images is indeed a different matter, and if one wants to let the CSS alone determine how the image dimensions are displayed, there are options to help support that as well..

[DivaVocals]

and more to add to the quote above:

A lot of people seem to wonder about just how to proportionally scale images with CSS; for the image to fit into FOO x BAR container... Thing is, a browser is not a graphics application and CSS isn't a graphics API. What it means is that you can't do that with CSS! What you CAN do, however, is have the <img> proportionally scale within one-axis limit. You can make large images smaller and smaller images larger by setting a specified width or max-width while leaving the height to be scaled proportionally to width. Turning it around, you can use the height constrains while leaving the width scale proportionally. You can't have both at the same time.

An important thing to note here is that I removed the width="" and height="" attributes from <img> element in the scaling examples. This is necessary as specifying those will prevent the image from being scaled proportionally.

[DivaVocals]

Using the IMG height and width tells the BROWSER what size to display the image. If you use that with the CSS settings that are meant to re-size the image to the container, and the image is larger or smaller than those settings, the images will distort.

If you want the CSS to control the image display size
and
you are NOT going to use the resizing features (the full sized image will be uploaded and left as is)
and
the image is larger (or smaller) than the dimensions of the page container

then you need to remove the height and width from the IMG tag so that the image will not distort, and so the CSS will properly display the image in the correct proportions.

You indicated that you wanted to maintain the ability to upload the full image size and let the CSS do the proportioning and resizing the image display versus explicitly resizing the image upon upload and then telling the browser what those image dimensions are. Rus provided the code to achieve this, and also provided the code for those who were okay with using the resizing features.. If you go back to the posts where Rus introduced this code you will see that this is what he said, and you confirmed that this code worked.. All I did was add a conditional statement so that BOTH options could be used.

Okay... despite the fact that I think image scaling can be a performance Achilles heel for a site (which is why I'll personally never use the technique without at LEAST resizing-optimizing images ), I think I figured out how you can have your cake AND eat it too.. The key is to use height:auto to override any height or width attribute already present on the image.

I modified the following in the stylesheet..

    img.event_calendar_image {max-width:100%; margin:0em auto; height: auto;}

Now with the IMG height and width, the images still scale correctly on my test site.. (http://zentestcart(dot)overthehillweb(dot)com/index.php?main_page=events_calendar&_day=23&_month=04&_year=2013) I've tested it with the latest versions of IE, Opera, Safari, Firefox, and Chrome. I know that there may still be issues with IE8 and IE7, but I cannot confirm as I cannot test in either of these browsers..

[DivaVocals]

I've attached all the files I've been using in my testing.. I haven't touched the readme because until this is stable, I want to hold off on the readme updates just yet..

this includes the changes Rus posted to stop the internal manufacturer/categories/products links form opening inside a new page.

Once dw08gm confirms that the fix I posted last night addresses his concerns with the CSS image scaling, this admin setting can be removed:

(NULL, 'Include the IMG tag height and width', 'EVENTS_DISPLAY_IMAGE_WIDTH_HEIGHT', 'true', 'If this option is set to true, the module will include the image\'s native height and width in the IMG tag. This is required to support other user agents (e.g. a speech browser) which should have this information in order to relate it to the user.<br /><br />If you do not wish to include the image\'s native height and width in the IMG tag, set this to false.<br /><br />Default is true.', @t4, 10, NOW(), NULL, 'zen_cfg_select_option(array(\'true\', \'false\'),'),

and this code in includes/templates/custom_template/templates/tpl_events_calendar_default.php:

<!-- **rus.02:start -->
<?php if (EVENTS_DISPLAY_IMAGE_WIDTH_HEIGHT == 'true') { ?>
    <?php echo event_flink_small($event_array['image'], $event_array['title'], 'class="event_calendar_image"', true); ?>
<?php } else { ?>
    <?php echo event_flink_small($event_array['image'], $event_array['title'], 'class="event_calendar_image"'); ?>
<?php } ?>
<!-- **rus.02:stop -->

can be modified to this:

<!-- **rus.02:start -->
    <?php echo event_flink_small($event_array['image'], $event_array['title'], 'class="event_calendar_image"', true); ?>
<!-- **rus.02:stop -->

I've seperated the sidebox stylesheet from the page stylesheet, and named the page stylesheet so that it only loads when on the events page. I've also added additional defines for the short month dropdowns to seperate the page dropdowns from the sidebox dropdowns to includes/languages/english/extra_definitions/events_calendar_include_defines.php as follows:

define('EVENTS_MONTHS_SHORT_SIDEBOX_DROPDOWNS', 'JAN,FEB,MAR,APR,MAY,JUN,JUL,AUG,SEP,OCT,NOV,DEC');
//define('EVENTS_MONTHS_SHORT_SIDEBOX_DROPDOWNS', 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec');
define('EVENTS_MONTHS_SHORT_PAGE_DROPDOWNS', 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec');
//define('EVENTS_MONTHS_SHORT_PAGE_DROPDOWNS', 'JAN,FEB,MAR,APR,MAY,JUN,JUL,AUG,SEP,OCT,NOV,DEC');

I included BOTH set of options for both so that all a shopowner has to do is uncomment/comment the ones they want to use.. The defaut for the events page as you can see is the titlecase defines, while the sidebox default is the uppercase defines.

to support using these new defines I modified: includes/templates/custom_template/templates/tpl_events_calendar_default.php and includes/templates/custom_template/templates/tpl_events_calendar_include_default.php

Okay... despite the fact that I think image scaling can be a performance Achilles heel for a site (which is why I'll personally never use the technique without at LEAST resizing-optimizing images ), I think I figured out how you can have your cake AND eat it too.. The key is to use height:auto to override any height or width attribute already present on the image.

I modified the following in the stylesheet..

    img.event_calendar_image {max-width:100%; margin:0em auto; height: auto;}

Now with the IMG height and width, the images still scale correctly on my test site.. (http://zentestcart(dot)overthehillweb(dot)com/index.php?main_page=events_calendar&_day=23&_month=04&_year=2013) I've tested it with the latest versions of IE, Opera, Safari, Firefox, and Chrome. I know that there may still be issues with IE8 and IE7, but I cannot confirm as I cannot test in either of these browsers..

I believe this addresses all concerns raised.. I do have one more thing on resizing, but I'll put that in a separate post..

[DivaVocals]

but there is one last thing regarding the image resizing features.. The admin setting for turning on/off resizing doesn't appear to do anything at all.

(NULL, 'Automatically re-size event images?', 'EVENTS_FILE_RESIZE', 'true', 'If this option is set to true, the module will re-size event images \(based on maximum width and height settings above\).<br /><br />Set to false to disable image resizing.<br /><br />Default is true.', @t4, 5, NOW(), NULL, 'zen_cfg_select_option(array(\'true\', \'false\'),'),

I see the define for EVENTS_FILE_RESIZE being used in two places.
Lines 63 - 72 of YOUR_ADMIN/includes/functions/events_manager_functions.php

        if (EVENTS_FILE_RESIZE && $rezit && $rez) {
          $enew = $eman->resample($nwid, $nhei, false);
          if (is_file($f)) unlink($f);
          if (!$eman->save($f)) {
            $er=true; $erm .= TEXT_EVENT_IMAGE_SIZE_ERR;
          } else {
             $erm .= TEXT_EVENT_IMAGE_RESIZED .' ' . $owid . 'x' . $ohei .  ' ' . TEXT_EVENT_IMAGE_TO . ' ' . $nwid . 'x' . $nhei .  '.';
            $owid = $nwid; $ohei = $nhei;
          }
        }

Lines 75 - 105 of YOUR_ADMIN/includes/functions/events_manager_functions.php

      if (EVENTS_FILE_RESIZE && $showz) {
         $dumi = '<div style="display: inline-block;"><table  width="100%" cellpadding="0" cellspacing="0"  border="0"><tr><td width="100%" align="left">' . $dumi .  '</td></tr><tr><td width="100%" align="left">';
         $dumi .= '<strong>'.TEXT_EVENT_IMAGE_WIDTH  .'</strong><span  class="smalltext">('.TEXT_EVENT_IMAGE_CURRENT.'='.$owid.')</span>&nbsp;'.
                  zen_draw_input_field('image_new_width', $nwid, 'id="image_new_width"  size="3" maxlength="4" onkeyup="return image_rez_check(this);"', false) .  '&nbsp;&nbsp;&nbsp;';
        $dumi .=  '<strong>'.TEXT_EVENT_IMAGE_HEIGHT .'</strong><span  class="smalltext">('.TEXT_EVENT_IMAGE_CURRENT.'='.$ohei.')</span>&nbsp;'.
                  zen_draw_input_field('image_new_height', $nhei, 'id="image_new_height"  size="3" maxlength="4" onkeyup="return image_rez_check(this);"', false) .  '&nbsp;&nbsp;&nbsp;';
        $dumi .=  zen_draw_checkbox_field('image_aspect','',false,'', ' checked  id="image_aspect" onclick="return image_rez_check(this);"') .  TEXT_EVENT_IMAGE_ASPECT . '&nbsp;&nbsp;&nbsp;';
         $dumi .= zen_draw_radio_field('image_doresize_cb','',false,'',  'id="image_doresize_cb" onclick="if(irezit(this)){submit();};"') .  '&nbsp;' . TEXT_EVENT_IMAGE_RESIZE;
        $dume = '';
         if ((EVENTS_FILE_MAX_WIDTH>0 &&  $owid>EVENTS_FILE_MAX_WIDTH) || (EVENTS_FILE_MAX_HEIGHT>0  && $ohei>EVENTS_FILE_MAX_HEIGHT)) {
          $dume .=  TEXT_EVENT_IMAGE_GREATER . ' (' . (EVENTS_FILE_MAX_WIDTH>0 ?  (TEXT_EVENT_IMAGE_WIDTH.': '.EVENTS_FILE_MAX_WIDTH.' ') : '') .
                   (EVENTS_FILE_MAX_HEIGHT>0 ? (TEXT_EVENT_IMAGE_HEIGHT.': '.EVENTS_FILE_MAX_HEIGHT) : '') . ')<br />';
        }
        if ($er && $erm) $dume .=  $erm. '<br />';
        if ($dume) {
          $dumi .= '<div id="image_warning" class="rec_warn">'.$dume.'</div>';
        } else {
          $dumi .= '<div id="image_warning" class="rec_warn" style="display: none;"></div>';
        }
        $dumg = '';
        if (!$er && $erm) $dumg .=  $erm. '<br />';
        if ($dumg) {
          $dumi .= '<div id="image_success" class="rec_good">'.$dumg.'</div>';
        } else {
          $dumi .= '<div id="image_success" class="rec_good" style="display: none;"></div>';
        }
        $dumi .= '<div id="image_blue" class="rec_cool" style="display: none;"></div>';
        $dumi .= zen_draw_hidden_field('image_doresize','','id="image_doresize"');
         $dumi .= zen_draw_hidden_field('image_ow',$owid,'id="image_ow"') .  zen_draw_hidden_field('image_oh',$ohei,'id="image_oh"');
        $dumi .= '</td></tr></table><br /><br /></div>';
      }

However regardless of whether this is on or off, one can rezsize images by simply selecting the resize radio button that appears on the events preview page. I've looked at this code and I'll admit I do not understand for the life of me what this define "does".

I would assumed that it turns off the resizing functions when set to "off" (re-sizing is not going to occur nor will the re-sizing functions be available to the user). I also would expect that when "on" the re-sizing would occur without an additional action on the part of the user (clicking the re-size button).. The actual behavior is quite different, so I'm confused as to what on/off here means.. Hoping Rus can shed some light..

[DivaVocals]

Whoooops.. small modification to the seperated stylesheets.. The one for the sidebox was missing a few things..

The attached file makes that change and one small change to the additional link code so that the "http://" is included in the link displayed on the events page.

To anyone happening across this thread, any files attached here are BETA files should NOT be used on a live store..

I've attached all the files I've been using in my testing.. I haven't touched the readme because until this is stable, I want to hold off on the readme updates just yet..

this includes the changes Rus posted to stop the internal manufacturer/categories/products links form opening inside a new page.

Once dw08gm confirms that the fix I posted last night addresses his concerns with the CSS image scaling, this admin setting can be removed:

(NULL, 'Include the IMG tag height and width', 'EVENTS_DISPLAY_IMAGE_WIDTH_HEIGHT', 'true', 'If this option is set to true, the module will include the image\'s native height and width in the IMG tag. This is required to support other user agents (e.g. a speech browser) which should have this information in order to relate it to the user.<br /><br />If you do not wish to include the image\'s native height and width in the IMG tag, set this to false.<br /><br />Default is true.', @t4, 10, NOW(), NULL, 'zen_cfg_select_option(array(\'true\', \'false\'),'),

and this code in includes/templates/custom_template/templates/tpl_events_calendar_default.php:

<!-- **rus.02:start -->
<?php if (EVENTS_DISPLAY_IMAGE_WIDTH_HEIGHT == 'true') { ?>
    <?php echo event_flink_small($event_array['image'], $event_array['title'], 'class="event_calendar_image"', true); ?>
<?php } else { ?>
    <?php echo event_flink_small($event_array['image'], $event_array['title'], 'class="event_calendar_image"'); ?>
<?php } ?>
<!-- **rus.02:stop -->

can be modified to this:

<!-- **rus.02:start -->
    <?php echo event_flink_small($event_array['image'], $event_array['title'], 'class="event_calendar_image"', true); ?>
<!-- **rus.02:stop -->

I've seperated the sidebox stylesheet from the page stylesheet, and named the page stylesheet so that it only loads when on the events page. I've also added additional defines for the short month dropdowns to seperate the page dropdowns from the sidebox dropdowns to includes/languages/english/extra_definitions/events_calendar_include_defines.php as follows:

define('EVENTS_MONTHS_SHORT_SIDEBOX_DROPDOWNS', 'JAN,FEB,MAR,APR,MAY,JUN,JUL,AUG,SEP,OCT,NOV,DEC');
//define('EVENTS_MONTHS_SHORT_SIDEBOX_DROPDOWNS', 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec');
define('EVENTS_MONTHS_SHORT_PAGE_DROPDOWNS', 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec');
//define('EVENTS_MONTHS_SHORT_PAGE_DROPDOWNS', 'JAN,FEB,MAR,APR,MAY,JUN,JUL,AUG,SEP,OCT,NOV,DEC');

I included BOTH set of options for both so that all a shopowner has to do is uncomment/comment the ones they want to use.. The defaut for the events page as you can see is the titlecase defines, while the sidebox default is the uppercase defines.

to support using these new defines I modified: includes/templates/custom_template/templates/tpl_events_calendar_default.php and includes/templates/custom_template/templates/tpl_events_calendar_include_default.php




I believe this addresses all concerns raised.. I do have one more thing on resizing, but I'll put that in a separate post..

[dw08gm]

Hi Diva

Re Posts 461-467

Stellar stuff - you're a star.

I also stumbled upon the height:auto; attribute today, but am unable to test run same until Sunday. Your results are very encouraging.


Re: css
I prefer not to split this up. It is not that large a file to worry about and splitting it up may cause more problems than it is worth.

Cheers

[DivaVocals]

Hi Diva

Re Posts 461-467

Stellar stuff - you're a star.

I also stumbled upon the height:auto; attribute today, but am unable to test run same until Sunday. Your results are very encouraging.


Re: css
I prefer not to split this up. It is not that large a file to worry about and splitting it up may cause more problems than it is worth.

Cheers

Yes.. but it's a suggested method (see the Zen Cart Wiki) and other modules which implement their own pages use the same method for good reason.. the same reasons I am suggesting making the change..

while you have been concentrating on (how did you put this), fluid and flexible design, I have been concentrating on page load improvements.. To that end I have been making more use of page specific CSS, and JS, the use of and CDNs to load jQuery libraries (and eliminating the jQuery clusterf*** mess that comes with so many add-ons using different versions of jQuery). While it's a SMALL improvement to eliminate the loading of the events manager CSS on ALL pages, it's an improvment nontheless, and it may make a difference to shops.. ESPECIALLY since the sidebox loading inside an iframe IS a performance hit.. Personally I found it MUCH easier to manage the look/feel with these guys seperated..

[DivaVocals]

Hi Diva

Re Posts 461-467

Stellar stuff - you're a star.

I also stumbled upon the height:auto; attribute today, but am unable to test run same until Sunday. Your results are very encouraging.

I can confirm that IE8 still distorts the images.. (at work can only test this here) I'm thinking that adding IE only styles will resolve this.. perhaps width versus max-width.. Beter way to do this is to use the same method implemented in the PicaFlor templates for cross browser compatibility.. I'll add those changes over the weekend..

Re: css
I prefer not to split this up. It is not that large a file to worry about and splitting it up may cause more problems than it is worth.

Cheers

From the Zen Cart Wiki (which is similar senitments to other sources on this)

To save loading time, only new selectors or selectors whose properties you wish to change should be in the subsequent optional CSS files.

Exactly what "problems" do you foresee coming out of having two stylesheets?? In addition to improving page load, (even incremetnally)it actually makes things EASIER to manage.. Not seeing what would be a "problem"..