Page 1 of 2
use CGSmartImage in news or cgblog summary or detail page
Posted: Wed Oct 12, 2011 1:31 am
by carasmo
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)
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:
Code: Select all
{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}
Re: use CGSmartImage in news or cgblog summary or detail pag
Posted: Wed Oct 12, 2011 5:46 pm
by Dr.CSS
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...
Code: Select all
{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}
Re: use CGSmartImage in news or cgblog summary or detail pag
Posted: Wed Oct 12, 2011 5:50 pm
by calguy1000
You don't even need the capture statement:
Code: Select all
{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.
Re: use CGSmartImage in news or cgblog summary or detail pag
Posted: Thu Oct 13, 2011 3:08 pm
by carasmo
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.
Re: use CGSmartImage in news or cgblog summary or detail pag
Posted: Thu Oct 13, 2011 3:09 pm
by carasmo
That is, that with embedding on, it won't resize for mobile.
Re: use CGSmartImage in news or cgblog summary or detail pag
Posted: Thu Oct 13, 2011 3:44 pm
by uniqu3
There is a plugin called browsertools then you could do something like {if $mobile}this image{else}other{/if}
Re: use CGSmartImage in news or cgblog summary or detail pag
Posted: Thu Oct 13, 2011 4:01 pm
by carasmo
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:
Code: Select all
<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.
Code: Select all
img {
max-width:100%;
height:auto;
width:auto\9;
/* ie8 */
}
Re: use CGSmartImage in news or cgblog summary or detail pag
Posted: Thu Oct 13, 2011 4:06 pm
by carasmo
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.
Re: use CGSmartImage in news or cgblog summary or detail pag
Posted: Thu Oct 13, 2011 4:21 pm
by calguy1000
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.
Re: use CGSmartImage in news or cgblog summary or detail pag
Posted: Thu Oct 13, 2011 4:28 pm
by carasmo
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.
Code: Select all
# 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.
Re: use CGSmartImage in news or cgblog summary or detail pag
Posted: Thu Oct 13, 2011 4:56 pm
by calguy1000
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.
Re: use CGSmartImage in news or cgblog summary or detail pag
Posted: Thu Oct 13, 2011 5:07 pm
by carasmo
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...
Re: use CGSmartImage in news or cgblog summary or detail pag
Posted: Thu Oct 13, 2011 5:12 pm
by calguy1000
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.
Re: use CGSmartImage in news or cgblog summary or detail pag
Posted: Thu Oct 13, 2011 5:34 pm
by carasmo
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.
Re: use CGSmartImage in news or cgblog summary or detail pag
Posted: Thu Oct 13, 2011 5:36 pm
by carasmo
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.