CouchCMS • View topic - Serve diffrent image sizes depending on screen size

Problems, need help? Have a tip or advice? Post it here.

8 posts Page 1 of 1

Serve diffrent image sizes depending on screen size

: tobbs; Registered User

: Posts: 21; Joined: Thu Dec 03, 2015 9:30 am

by tobbs » Wed Jan 06, 2016 7:18 am

Hi everyone,

I just wanted to check if someone might have and idea how to serve different sized background image on a page depending on the screen size (media query).

So basically I have created one cms image field with different thumbnail sizes which I want to be used for corresponding screen width as you would with media query as I can't use the <cms:show blog_image /> in the css right? I hope this makes sense lol..

Code: Select all

<cms:editable name='blog_image'
      crop='1'
      width='1920' 
      height='1080'
      type='image'
        quality='55'
   />
<cms:editable
    name='blog_image_mid'
    label='Blog Image 1440 mid'
    desc='Mid res of main blog image'
    width='1440'
   quality='60'
    show_preview='1'
   preview_width='175'
    assoc_field='blog_image'
    type='thumbnail'
/>
<cms:editable
    name='blog_image_small'
    label='Blog Image 700 small'
    desc='Small res of main blog image'
    width='700'
   quality='60'
    show_preview='1'
   preview_width='175'
    assoc_field='blog_image'
    type='thumbnail'
/>

and the tag where I define above image:

Code: Select all

<div class="page-header full-screen table overlay" style="background-image: url(<cms:show blog_image />);">

Many thanks!

Re: Serve diffrent image sizes depending on screen size

: trendoman; Registered User

: Posts: 2902; Joined: Thu May 22, 2014 3:57 pm

by trendoman » Wed Jan 06, 2016 11:54 am

Hi!

You can do this trick in many ways.
A css can be managed by couch as well (and edited in admin panel too).
Probably the best solution would be embedding stylesheets.

Code: Select all

<!-- CSS media query within a stylesheet -->
<style>
div.full-screen {background-image: url(<cms:show blog_image />);}
@media (max-width: 700px) {
div.full-screen {background-image: url(<cms:show blog_image_small />);}
}
</style>

Of course, one can embed whole thing from snippets as
<cms:embed 'style.css' />.
So this gives an advantage of reducing server request and serve all css in <head>. Also provides maintainability of the html. Couch tags can be used in snippets freely.

Amazingly, Couch can even have your css as a couch-managed template too.
http://www.couchcms.com/forum/viewtopic.php?f=2&t=7406&p=10769&hilit=couch+css+managed#p10769

Good luck.

Join COUCH:TALK channel here https://t.me/couchcms_chat
Ryazania — a framework to boost productivity with Add-ons viewtopic.php?f=2&t=13475
Support my efforts to help the community https://boosty.to/trendo/donate

Re: Serve diffrent image sizes depending on screen size

: Tomarnst; Registered User

: Posts: 272; Joined: Sat Aug 10, 2013 11:09 pm; Location: Finland

by Tomarnst » Thu Jan 07, 2016 3:29 pm

Hi,

For this kind of stuff I would use Foundation http://foundation.zurb.com/sites/docs/interchange.html

I load frameworks and write bugs on top of them, after that I rearrange the code so that it looks like a cool product.

Re: Serve diffrent image sizes depending on screen size

: trendoman; Registered User

: Posts: 2902; Joined: Thu May 22, 2014 3:57 pm

by trendoman » Thu Jan 07, 2016 6:47 pm

Couch is server-side, CSS is almost never disabled.
Foundation's Interchange depends on client-side javascript. It is sometimes disabled, so Interchange will not work.

Re: Serve diffrent image sizes depending on screen size

: tobbs; Registered User

: Posts: 21; Joined: Thu Dec 03, 2015 9:30 am

by tobbs » Fri Jan 08, 2016 9:23 am

trendoman wrote: Hi!

You can do this trick in many ways.
A css can be managed by couch as well (and edited in admin panel too).
Probably the best solution would be embedding stylesheets.
Code: Select all

<style>
div.full-screen {background-image: url(<cms:show blog_image />);}
@media (max-width: 700px) {
div.full-screen {background-image: url(<cms:show blog_image_small />);}
}
</style>
Of course, one can embed whole thing from snippets as
<cms:embed 'style.css' />.
So this gives an advantage of reducing server request and serve all css in <head>. Also provides maintainability of the html. Couch tags can be used in snippets freely.

Amazingly, Couch can even have your css as a couch-managed template too.
http://www.couchcms.com/forum/viewtopic.php?f=2&t=7406&p=10769&hilit=couch+css+managed#p10769

Good luck.