Hi everyone!

I'm currently building my blog in Couch, and I just wanted to check with you - when I attach an image in a blog post it seems like the image just gets scaled down rather then producing a cropped thumbnail?

What I want to achieve is that when I add images to the blog post, that they automatically get cropped to the size i specify (or fixed size would be OK too) and then when you click the image It uses a java script light box to show the fullsize version of the image.

My question, how would you do? I can only come up with one sollution and that is to create a number of image fields in the blog template and then spit out a list in the end of the blog post. Ideally I want it so I can post images anywhere in the post.

Sorry if i'm not making sense hehe:D

[KK]

Hi @tobbs,

To control the final dimensions of an uploaded image, we'll have to upload it using type 'image' or 'thumbnail' editable region.

Doing that would necessarily mean, however, that you'll have to define the images separate from the body text.

For now, I'm sorry there is no out-of -box solution to control dimensions of images uploaded via the wysiwyg editor (i.e. embedded freeflow within text).

Hi @tobbs,

To control the final dimensions of an uploaded image, we'll have to upload it using type 'image' or 'thumbnail' editable region.

Doing that would necessarily mean, however, that you'll have to define the images separate from the body text.

For now, I'm sorry there is no out-of -box solution to control dimensions of images uploaded via the wysiwyg editor (i.e. embedded freeflow within text).

Thank you KK, that's no worries - I'll build the second solutiution with edible fields. I just wanted to check before I start - thanks!

Hi,

You could try http://fancyapps.com/fancybox/, I'm almost sure this can do the trick.

Hi,

You could try http://fancyapps.com/fancybox/, I'm almost sure this can do the trick.

Thanks for the tip Tomarnst, but I'm already using a lightbox called lightfeather which works great.

So this is what I came up with, does this look right guys?

Thumbnails below the blogpost:

Code: Select all

<section data-featherlight-gallery data-featherlight-filter="a">
  <h>Attached Blogpost Images</h>
<ul class='responsive-thumbnails' data-max-width='180px' data-max-height='120px' data-padding='4px'>
  <li>
    <a href="<cms:show blog_image />"><img src="<cms:show blog_image_thumb />"></a>
  </li>
  <li>
    <a href="<cms:show image_attachment_01 />"><img src="<cms:show image_attachment_01_thumb />"></a>
  </li>
  <li>
    <a href="<cms:show image_attachment_02 />"><img src="<cms:show image_attachment_02_thumb />"></a>
  </li>
  <li>
    <a href="<cms:show image_attachment_03 />"><img src="<cms:show image_attachment_03_thumb />"></a>
  </li>
</ul>
</section>

How can I write the IF clause so it only generates the image_attachment thumbs only if they are uploaded?

hi,

isn't the following working ?

Code: Select all

<cms:if image_attachment_01>

 <li>
<a href="<cms:show image_attachment_01 />"><img src="<cms:show image_attachment_01_thumb />"></a>
 </li>

</cms:if>

hi,

isn't the following working ?

Code: Select all

<cms:if image_attachment_01>

 <li>
<a href="<cms:show image_attachment_01 />"><img src="<cms:show image_attachment_01_thumb />"></a>
 </li>

</cms:if>

Yeah that works lol, man I love couch - cheers!