use CGSmartImage in news or cgblog summary or detail page

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
carasmo
Power Poster
Power Poster
Posts: 506
Joined: Thu Feb 08, 2007 6:11 pm
Location: Florida

use CGSmartImage in news or cgblog summary or detail page

Post 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)

Image

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}
Last edited by carasmo on Thu Oct 13, 2011 3:22 pm, edited 1 time in total.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: use CGSmartImage in news or cgblog summary or detail pag

Post 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}
calguy1000
Support Guru
Support Guru
Posts: 8169
Joined: Tue Oct 19, 2004 6:44 pm
Location: Fernie British Columbia, Canada

Re: use CGSmartImage in news or cgblog summary or detail pag

Post 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.
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.
carasmo
Power Poster
Power Poster
Posts: 506
Joined: Thu Feb 08, 2007 6:11 pm
Location: Florida

Re: use CGSmartImage in news or cgblog summary or detail pag

Post 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.
carasmo
Power Poster
Power Poster
Posts: 506
Joined: Thu Feb 08, 2007 6:11 pm
Location: Florida

Re: use CGSmartImage in news or cgblog summary or detail pag

Post by carasmo »

That is, that with embedding on, it won't resize for mobile.
uniqu3

Re: use CGSmartImage in news or cgblog summary or detail pag

Post by uniqu3 »

There is a plugin called browsertools then you could do something like {if $mobile}this image{else}other{/if}
carasmo
Power Poster
Power Poster
Posts: 506
Joined: Thu Feb 08, 2007 6:11 pm
Location: Florida

Re: use CGSmartImage in news or cgblog summary or detail pag

Post 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 */
}
carasmo
Power Poster
Power Poster
Posts: 506
Joined: Thu Feb 08, 2007 6:11 pm
Location: Florida

Re: use CGSmartImage in news or cgblog summary or detail pag

Post 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.
calguy1000
Support Guru
Support Guru
Posts: 8169
Joined: Tue Oct 19, 2004 6:44 pm
Location: Fernie British Columbia, Canada

Re: use CGSmartImage in news or cgblog summary or detail pag

Post 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.
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.
carasmo
Power Poster
Power Poster
Posts: 506
Joined: Thu Feb 08, 2007 6:11 pm
Location: Florida

Re: use CGSmartImage in news or cgblog summary or detail pag

Post 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.
calguy1000
Support Guru
Support Guru
Posts: 8169
Joined: Tue Oct 19, 2004 6:44 pm
Location: Fernie British Columbia, Canada

Re: use CGSmartImage in news or cgblog summary or detail pag

Post 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.
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.
carasmo
Power Poster
Power Poster
Posts: 506
Joined: Thu Feb 08, 2007 6:11 pm
Location: Florida

Re: use CGSmartImage in news or cgblog summary or detail pag

Post 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...
calguy1000
Support Guru
Support Guru
Posts: 8169
Joined: Tue Oct 19, 2004 6:44 pm
Location: Fernie British Columbia, Canada

Re: use CGSmartImage in news or cgblog summary or detail pag

Post 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.
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.
carasmo
Power Poster
Power Poster
Posts: 506
Joined: Thu Feb 08, 2007 6:11 pm
Location: Florida

Re: use CGSmartImage in news or cgblog summary or detail pag

Post 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.
carasmo
Power Poster
Power Poster
Posts: 506
Joined: Thu Feb 08, 2007 6:11 pm
Location: Florida

Re: use CGSmartImage in news or cgblog summary or detail pag

Post 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.
Post Reply

Return to “Tips and Tricks”