• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 25 posts ]  Go to page 1, 2  Next
Author Message
 Post subject: use CGSmartImage in news or cgblog summary or detail page
PostPosted: Wed Oct 12, 2011 1:31 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Feb 08, 2007 6:11 pm
Posts: 506
Location: Florida
If you're using html5, these instructions are fine, if not, please mod to your needs.

Inside either news or blog module add two custom fields: 1 for the image and one for the caption. In this case I titled them postimg" and "caption" respectively.

First make an image field and make it public, ignore all the size information, as follows: (this is from the blog mod and he's removing the image manipulation from the blog at some point)

$1

Then make a textarea field without wysiwyg and title it "caption"

Then for the detail template inside the blog or news module where you want the image to appear, insert the code:

UPDATED as per Robert/CalGuy's info below:

\$1:
{if $entry->postimg}<figure>
<img src="{CGSmartImage src1=$entry->file_location src2=$entry->postimg  filter_croptofit=600,350 notag=1 quality=100}" alt=''/>
{if $entry->caption}<figcaption>{$entry->caption}</figcaption>{/if}
</figure>{/if}


Last edited by carasmo on Thu Oct 13, 2011 3:22 pm, edited 1 time in total.

Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: use CGSmartImage in news or cgblog summary or detail pag
PostPosted: Wed Oct 12, 2011 5:46 pm 
Offline
Administrator
Administrator
User avatar

Joined: Thu Mar 09, 2006 5:32 am
Posts: 12669
Location: Arizona
Very nice...

But you don't need so many if's, you ask if once in the beginning, and if not there then none of it will show, I left the one for the caption as there may/could be an image w/o caption...

\$1:
{if $entry->postimg}<figure>
<img src="{CGSmartImage src=$imgloc filter_croptofit=600,350 notag=1 noembed=1 quality=100}" alt=''/>
{if $entry->caption}<figcaption>{$entry->caption}</figcaption>{/if}
</figure>{/if}

_________________
Check ver. CMSMS, PHP, server OS, in System Information page.
Default content http://multiintech.com/defaultcontent/
People are Wonderful
Business is Great
Life is Terrific
Ever wonder what happened to the Album module? Well it is alive and well.
http://album.multiintech.com/
$1


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: use CGSmartImage in news or cgblog summary or detail pag
PostPosted: Wed Oct 12, 2011 5:50 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Tue Oct 19, 2004 6:44 pm
Posts: 8167
Location: Fernie British Columbia, Canada
You don't even need the capture statement:

\$1:
{if $entry->postimg}<figure>
<img src="{CGSmartImage src1=$entry->file_location src2=$entry->postimg  filter_croptofit=600,350 notag=1 noembed=1 quality=100}" alt=''/>
{if $entry->caption}<figcaption>{$entry->caption}</figcaption>{/if}
</figure>{/if}


And why disable image embedding? modern browsers are smart enough to handle it (even IE8) and CGSmartImage is smart enough to detect the browser and not use embedding if the client is in an older browser.

_________________
Follow me on twitter
Please post system information from "Extensions >> System Information" (there is a bbcode option) on all posts asking for assistance.
--------------------
If you can't bother explaining your problem well, you shouldn't expect much in the way of assistance.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: use CGSmartImage in news or cgblog summary or detail pag
PostPosted: Thu Oct 13, 2011 3:08 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Feb 08, 2007 6:11 pm
Posts: 506
Location: Florida
OOOh thanks!!!

I disabled the embedding because I am using adaptive-images which checks for the max pixel width to size an image for mobile or desktop or ipad or whatever.

I was going to email you about it today or tomorrow.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: use CGSmartImage in news or cgblog summary or detail pag
PostPosted: Thu Oct 13, 2011 3:09 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Feb 08, 2007 6:11 pm
Posts: 506
Location: Florida
That is, that with embedding on, it won't resize for mobile.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: use CGSmartImage in news or cgblog summary or detail pag
PostPosted: Thu Oct 13, 2011 3:44 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Aug 12, 2008 9:30 pm
Posts: 2071
Location: Feldkirchen in Kärnten, Austria
There is a plugin called browsertools then you could do something like {if $mobile}this image{else}other{/if}

_________________
CMSMS Blog - I do this!
Forge profile
Github profile
Twitter
=============================================
Support CMSMS


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: use CGSmartImage in news or cgblog summary or detail pag
PostPosted: Thu Oct 13, 2011 4:01 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Feb 08, 2007 6:11 pm
Posts: 506
Location: Florida
Re: browsertools

Thanks for that info (which I looked into) and for your blog (i-do-this), it is GREAT! The way adaptive-images.com works is with responsive media queries and the device pixel width so you just put in the largest, like you would a regular image tag (but without the image sizes on the tag) and it does it, I wanted something that makes it easy just to post an image inside the editor (for customers) without having if mobile around it, the only thing is that in TinyMCE you have to go to the appearance tab and remove the size.

Ideally, what would be better, and I'll likely sponsor Calguy, is that one day the TinyMCE and the future editor, there is a way to call the CGSmartImage in a way that is really easy for customers and it will be something like this:

\$1:
<img src="{CGSmartImage src=image.jpg  filter_croptofit=600,350 notag=1 noembed=1 quality=100 mobile_detect=y}" alt=''/>


Then mobile_detect checks against a settings file to serve up the the image based on settings you control like, 1100, 980, 768, 480

Similar to adaptive-images.com. Then you use max-width:100% and all percentages for holders and it works brilliantly.

\$1:
img {
   max-width:100%;
   height:auto;
   width:auto\9;
   /* ie8 */
}


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: use CGSmartImage in news or cgblog summary or detail pag
PostPosted: Thu Oct 13, 2011 4:06 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Feb 08, 2007 6:11 pm
Posts: 506
Location: Florida
It is basically a knock off of how adaptive-images.com works, but within CMSMS and cgsmartimage, so it is really small, one php file and one ai-cache file. It sizes down based on a cookie that detects the max image size the device will handle, and if you use max-width on your css nothing goes crazy in the layout.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: use CGSmartImage in news or cgblog summary or detail pag
PostPosted: Thu Oct 13, 2011 4:21 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Tue Oct 19, 2004 6:44 pm
Posts: 8167
Location: Fernie British Columbia, Canada
Well, it wouldn't be hard to add to CGSmartImage

All that would be needed is a way to map browser signatures to maximum resolutions.... then CGSmartImage could handle it.

_________________
Follow me on twitter
Please post system information from "Extensions >> System Information" (there is a bbcode option) on all posts asking for assistance.
--------------------
If you can't bother explaining your problem well, you shouldn't expect much in the way of assistance.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: use CGSmartImage in news or cgblog summary or detail pag
PostPosted: Thu Oct 13, 2011 4:28 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Feb 08, 2007 6:11 pm
Posts: 506
Location: Florida
https://github.com/MattWilcox/Adaptive-Images

He wrote it here with a way to detect max size and then serve it up. It works great with CMSMS, just add the .htaccess information inside the

IfModule

on the htaccess that is in the doc directory and remove the folders that contain assets you don't want sized down, otherwise it messes up tinyMCE and other images that use large sprites.

\$1:
  # Adaptive-Images -----------------------------------------------------------------------------------

  # Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
   RewriteCond %{REQUEST_URI} !modules
   RewriteCond %{REQUEST_URI} !css-images
 
  RewriteCond %{REQUEST_URI} !assets
   
  # Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
  # to adaptive-images.php so we can select appropriately sized versions
  RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

  # END Adaptive-Images -------------------------------------------------------------------------------
</IfModule>



and the cookie in the header.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: use CGSmartImage in news or cgblog summary or detail pag
PostPosted: Thu Oct 13, 2011 4:56 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Tue Oct 19, 2004 6:44 pm
Posts: 8167
Location: Fernie British Columbia, Canada
that code uses javascript to set a cookie with the current screen resolution. The cookie is then read by the PHP code.

This is not hard to do, but not ideal.. cuz of the cookie regulations in various locales with stupid governments (EU). Also on desktop browsers people change screen resolutions (though usually not regularly).

A better (but more complex) solution, IMnsHO would be to detect if the browser is on a mobile device... and if it is, use a database to look up maximum screen resolutions... then filter the output based on that.

_________________
Follow me on twitter
Please post system information from "Extensions >> System Information" (there is a bbcode option) on all posts asking for assistance.
--------------------
If you can't bother explaining your problem well, you shouldn't expect much in the way of assistance.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: use CGSmartImage in news or cgblog summary or detail pag
PostPosted: Thu Oct 13, 2011 5:07 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Feb 08, 2007 6:11 pm
Posts: 506
Location: Florida
There's a php version too, without a cookie, which could be the fall back, if there is no cookie then use the other method. It's not set up like that now, with adaptive images, but this guy who made it is in the UK (EU), whether that means anything I have no clue. I don't know whether or not mobile devices have that same cookie restriction or if the cookie is just benign like checking max-device width will it slide by...


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: use CGSmartImage in news or cgblog summary or detail pag
PostPosted: Thu Oct 13, 2011 5:12 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Tue Oct 19, 2004 6:44 pm
Posts: 8167
Location: Fernie British Columbia, Canada
As opposed to the cookie... the javascript could 'POST' the relevant resolution information to the server on each request, and/or store it in the session... a little bit of 'adaptive code' could handle that.

Once the server has the maximum resolution of the client, CGSmartImage could essentially add another 'filter' on to the end of the chain (or the beginning I guess) to resize the image down to the maximum size of the client (if necessary).

Probably looking at a few hours to implement and test this type of stuff, but it certainly would be cool. Saves somebody on an ipod downloading the whole image and having the browser scale it down.

_________________
Follow me on twitter
Please post system information from "Extensions >> System Information" (there is a bbcode option) on all posts asking for assistance.
--------------------
If you can't bother explaining your problem well, you shouldn't expect much in the way of assistance.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: use CGSmartImage in news or cgblog summary or detail pag
PostPosted: Thu Oct 13, 2011 5:34 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Feb 08, 2007 6:11 pm
Posts: 506
Location: Florida
Okay! 3 hrs.

How much extra time for you to do the following with CGsmartimage:

Write a plug in that hooks up to the current and future default wysiwg editor that basically acts like the image uploader now and it will allow the user to load their not cropped, resized image, set the filter to whatever you have, turn on the mobile, and basically, make their settings there. Also wrap it in a figure tag and have an optional caption, then assign the class to the figure that the designer has told them for left, right, big, small (whatever) to float in the design or not. This interface will also have a check box to use a gallery template to assign the lighbox (fancybox) or something better that has touch and desktop (nothing I've found so far), so that the smallish image with caption is there on the page and that image is clicked to the large version which is also sized by cgsmart image. It also adds an icon or the words (click to enlarge) to the caption, at the end:

Photo by so and so.
Click to enlarge or icon of a magnifying glass in our css.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: use CGSmartImage in news or cgblog summary or detail pag
PostPosted: Thu Oct 13, 2011 5:36 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Feb 08, 2007 6:11 pm
Posts: 506
Location: Florida
but if it's mobile, it doesn't not add the click to enlarge, since if you have a setting of 480 or 320 the image is already large if you have responsive css.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 25 posts ]  Go to page 1, 2  Next

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Hosting Nation - Managed CMSMS Hosting