I've had a search for it but not finding anything on setting for making images responsive when posting to a BLOG type page.

Is there a method to turn the images I post into completely responsive images instead of the standard static one???

Just to clarify, I realise this can be done in the advanced tab of the image setting within the post, problem is there is no way my clients are going to figure that out.

many thanks

hello olesuper8, why don't you create an editable region of type image

Code: Select all

<cms:editable type='image' name='bio_photo' label='Upload photo for Biography page' show_preview='1' preview_width='150' width='740' enforce_max='1' />

YOur client can then use the image uploader to upload an image which will be resized to the width specified by you. There is an upload limit in place of 2MB - but some people have been able to override this - suggest you search the forum.

You can then show the image in the appropriate place in the page with

Code: Select all

<img src="<cms:show bio_photo />" alt=" you could use another editable text field for the alt description " />

If you wanted to allow for more than one image you could change the image editable region into a repeatable region.

To make the image responsive put this in your css

Code: Select all

img {                  
     display: block;
     max-width: 100%;
     height: auto;
   }

Or you can narrow it down if you don't want all images to be responsive.

Image preparation and uploading does seem to be a stumbling block for some clients - but I don't think it could be made any easier than this!

Thanks for your help, as I'm using the richtext editable:

<cms:editable name='blog_content'
label='Blog Post Content' desc='Write your content here, include images and styles'
type='richtext'
/>

the images are going to be included in articles, so is it as simple as tying the css:

img {
display: block;
max-width: 100%;
height: auto;
}

to the images within those articles? I am having trouble targeting the images in the blog-content tag, here is my markup:

<!-- Blog Post -->
<div class="post post-it">
<!-- Post Title -->
<h3 class="title"><a href="<cms:show k_page_link />"><cms:show k_page_title /></a></h3>
<!-- Post Title -->
<cms:if k_page_foldertitle >
<cms:set my_category=k_page_foldertitle />
<cms:else />
<cms:set my_category='Uncategorised' />
</cms:if>
<p class="sub"><a href="#"><cms:show my_category /></a> &bull;
<cms:date k_page_date format='jS M, y'/> &bull; <a href="#">
<cms:show k_comments_count /> Comments</a></p>
<!-- Post Title -->
<img class="thumb" src="<cms:show blog_post_image />" alt=""/>
<!-- Post Content -->
<div class="blog-p">
<cms:show blog_content />
</div>

I would like to only target images in the richtext area, not sure if this is possible?

thanks

hi again - just about to switch off and go out - so in haste. Problem with using the image icon for inserting img into a wysiwyg richtext editable region is that it will I'm pretty certain insert the image width and height properties automatically. And these dimensions will be inline CSS style rules which will override the CSS img rule in your stylesheet.

However you can edit the image (right click) and delete the width and height - so your image will be responsive.

Hope that makes sense ...

Thanks, deleting the height and width would have been okay to live with but it doesn't work for me. I know you can add an inline style to individual images in the wysiwyg, I will give the editable a try later, thought it would be easier for people to just keep everything in the wyg.

thanks P

one other thing I have tried to enable clients to insert images (responsive) in any arbitrary location in a wysiwyg region is to use a shortcode.

Code: Select all

$FUNCS->register_shortcode( 'image', 'image_handler' );

function image_handler( $params, $content=null ){
   global $CTX;

   $link = $CTX->get('k_admin_link');

   return '<img src="' . $link . 'uploads/image/' . $content . '" />';
}

I then set up an editable region of type image with the necessary maximum width - this could be a repeatable region.

Code: Select all

<cms:editable name='image_group' label='Chapter photographs' desc='Click on blue heading to show all editable areas for this section!' type='group' order='40' />
<cms:editable name='advice_2' type='message' group='image_group' order='44'>Upload images for this chapter using the uploader below.<br>The format for image SHORTCODE is : [image]image-name.jpg[/image]</cms:editable> 
<cms:repeatable name='chapter_images'  group='image_group' label='UPLOADER for CHAPTER PHOTOGRAPH(S)' order='55' >
   <cms:editable name='chapter_image' group='image_group' label='&nbsp;' desc='Upload image here - max width of 736px will be enforced.'  type='image' enforce_max='1' width='736' show_preview='1'  preview_width='100' />
</cms:repeatable>

Client then has to upload an image, and type in the shortcode wherever they wish. I may set up a css rule to float the image. I sometimes include the facility for them to add a caption ...

I am hardly a world authority on shortcodes - but this could be worth a try if your client finds it difficult or error prone using the CkEditor image insert method.

P.S. this example doesn't show a way of putting in a value for 'alt' - but could easily be done

[KK]

@potato,
So basically you are using repeatable regions just for the purpose of uploading images. That's an intriguing idea

I had something like this in mind where the shortcode could reference the row in repeatable-region (instead of the image within it, as in your method). This way we could define other parameters e.g. float, height, width, caption etc. in the repeatable region itself.

Anyway, as repeatable-regions stand at the moment, drag-n-drop wipes out any unique-id a row might have so was not possible to do it. But I have this in mind and will try to get it done in the future.

Good to know someone is already using the technique

hi KK - yes I think it works quite well - the client can easily see the thumbnails of all the images uploaded for use on the page within the repeatable region in the admin panel.

I need to refine it a little more to include alt tag text. I have a version which includes a caption - this can sometimes be tricky if the client puts the shortcode in after a RETURN or not - you can end up with an orphaned closing </p> tag for example.

I've just posted on something else I've done for using a shortcode for modal windows - you and cheesypoof helped me considerably with it a while back ! http://www.couchcms.com/forum/viewtopic.php?f=2&t=8689

[KK]

Thanks potato
I've taken the liberty of moving your post into the 'Tips and tricks' section. I'm sure it'll help many.