Forums

User editable hero images

Permalink
Good day!

The project I'm currently working on has a "hero" image at the top of each page, just below the header. My client has now requested for this to be editable in c5 - I have no idea how to best achieve this.

Currently, I have the "hero" image hardcoded in default.php.

$page = Page::getCurrentPage();
$activePageName = strtolower($page->getCollectionName());?>
<?php 
if ($page->getCollectionParentID() == 1) {
   echo '<main class="' . $activePageName .'">';
   echo '<div class="page-header-image"><div class="container-fluid"></div></div>'; 
} else {
   echo '<main>'; }?>


I then load the image as a background into this div with less, as below.

.page-header-image {
   display: none;
   @media (min-width: @screen-sm-min) {
      display: inherit;
      background: @main-highlight-color center middle no-repeat;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      width: 100%;
      height: 36rem;
      margin-top:-@header-margin;
      margin-bottom: 3rem;
   }
   @media (min-width: @screen-md-min) {
Viewing 15 lines of 27 lines. View entire code block.


As you can see, the "hero" image is loaded only on pages that are directly below Home. On smaller screens, an image with a reduced file size is loaded. The image always spreads to the full width of the viewport.

Ideally, the user would be able to select the hero image from File Manager. How do I achieve this with the current setup? Do I have to adjust the view Template for the Image block?

I know that concrete5 can load thumbnails from File Manager, but I have not found out how to actually code this. How do I automatically load a smaller thumbnail of the image depending on screen-width?

Thanks in advance for any pointers!

B.
 
siton replied on at Permalink Reply
siton
Use CSS in the head section or inline (its valid). Create custom file attribute and that's it.

If you want to take this step forward you can add this to page type (like this for blog for example).
https://www.youtube.com/watch?v=3w29pkW7w4Q...

In bg images most of the time you dont need thumbnails system (Use 16:9 original images with "cover" and thats it).

In your css you can work with small and big BG (use media queries). In my opnion use the same image with some css tweaks.

Codepen example:
https://codepen.io/halleycarleton/pen/admzgd...

--------- getting thumbnail attribute ------------------------------------------------------
C5 docs | getting-data-about-a-page:
http://documentation.concrete5.org/developers/working-with-pages/ge...

Old tuturial "thumbnail" but the idea is the same:
http://concrete5tricks.com/blog/page-attributes-thumbnail-images/...

---------thumbnails system ------------------------------------------------------
If you want to use thumbnails (its more usefull for <img> not for hero):
C5 docs:
http://documentation.concrete5.org/developers/working-with-files-an...

Youtube - Concrete5.7 thumbnails in use (MesuvaWebDevelopment):
https://www.youtube.com/watch?v=EQyVQpsAn5s...