Topic Closed
feniweb
298 Posts

It would be totally cool if you have your own section of the screen element would in which you can specify the size. as the tool in the Layout Tree Point5. see Image.

Edited: 5 years ago#7415

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects

If we pursue the idea of section combos, a separate image section type would be of great value.
I would go for an image container that would mimic what CSS background-size:hover does (stretching/shrinking an image to fit into it's surrounding container).

I also frequently need such containers, especially in responsive grid layouts.
While background-size:cover is now supported by most used browsers, it has 2 disadvantages:
1. CKEditor (and almost every other WYSIWYG editor) has poor support for element backgrounds, especially for the currently edited container itself.
2. Background images won’t print by default unless the visitor decides to enable it. Webmasters don't have control over background-printig.

I have 2 solutions for the time being:

1. Using Image-scale.js --> https://github.com/GestiXi/image-scale
2. A custom technique I prefer recently - using imagecontainer class for such 1-image-only sections.

jQuery:

$(document).ready(function() {

  if('backgroundSize' in document.documentElement.style) {
    $(".GPAREA.imagecontainer:not(.gp_editing)").each( function() {
         var imageSrc = $(this).find("img").attr("src");
         $(this).css( { "background-image" : "url(" + imageSrc + ")" } );
      }
    });
  }

}); //domready end

theme CSS:

.GPAREA.imagecontainer {
  position:relative;
  width:100%; /* the width you prefer */
  height:320px; /* the height yo prefer */
  background-position:center;
  background-repeat:repeat;
  background-size:cover;
  /* the background-image property will be set by jQuery */
}

@media screen and (max-device-width:480px) and (orientation:portrait) {
  .GPAREA.imagecontainer {
    /* width+height on small screens */
    width:100%;
    height:200px;
  }
}

/* fit image into container (aligned top) but hide it by default. Will become background via jQuery. */
.GPAREA.imagecontainer img {
  /* override inline width/height set by CKeditor */
  width:100%!important;
  height:auto!important;
  margin:0;
  display:none;
}

/* show image when editing the section */
.GPAREA.imagecontainer.gp_editing img {
  display:block;
}

/* render image when printing */
@media print {
  .GPAREA.imagecontainer img {
    display:block;
  }
}


Edited: 5 years ago#7417

feniweb
298 Posts

Hello Juergen

Thanks for your help. I tested your suggestion unfortunately not quite work.

The <img src = ..... will not be visible but the above js as background-image is bunde image is not displayed.

Make now so I take the Bootstrap Carousel Gallery.

A new image section element Währe course super, to select the size with the possibility and the neckline to elections.

A thought still to HTML5 figure as image tag is becoming increasingly important also the possibility multiple images depending on the output medium is certainly important.

5 years ago#7423

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects

Yes it should be improved a bit so that it works somehow with javascript completely disabled.

I will post a proof of concept plugin later that evening.
 

5 years ago#7427

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects
Sorry, the plugin will be a little delayed.
I have to check a few more things first.
5 years ago#7437

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects

Ok, here is the ImageSection Test plugin --> ImageSectionTest01.zip

It provides a new Section Type "ImageSection(Test)".

When you create such a section, a default image will be shown that can be replaced by editing the section.
The image will be scaled to cover the section container. This is done by replacing the image with a section background-image using CSS "background-size:cover". The section itself has a default height of 200px that can be changed via Section Options. It also has a class "showInColorbox" assigned by default which triggers a colorbox when the image is clicked. If the image has assigned a custom link to it, clicking will follow the link instead of triggering a colorbox.
When the image has a title attribute, it will be converted to a caption @ the bottom of the section.

When editing the section you will have a standard CKEditor instance and the image is rendered normally.

I have also included a feature to replace the image’s source with it's original source in case "Auto Resize Images" is enabled and the image was scaled down with CKEditor and the section dimensions will be more than twice the size of the scaled-down image. Unfortunately this currently doesn't work since auto-resizing won't work in my section type. So we currently have full-scale images anyway. But that's rather not of great importance for now.

All the rendering behavior is currently done using JavaScript Some parts should eventually be done server-side, but the plugin isn't yet meant for production but merely for testing.

The main purpose of such a Image Section Type would be to provide a resposive* image section with dimensions that can change based ona CSS/media queries. Of course there are use cases where it will not be applicable.

 

Just tell me what you think.

Ah, and... please use the latest 4.4rc2 build from GitHub to make it work.
You don't need to re-install gpEasy. Just replace the /include directory of your current 4.4rc2 installation with the one from the ZIP archive.

 

* for responsivity:

When we think about images in responsive designs, here are my perceptions of problems to deal with:

For mobile screens we usually have to decide if images get scaled down, scaled up or not get scaled at all.
There is no standard image size usable on every screen/layout.

Scaling down an image is rarely problem as long as it doesn't contain small text (which should be avoided generally).
Images with a width up to 120px may be rendered as-is in many cases, even when text floats around them.

But Images with let's say 200px width are a problem on mobile screens:
When scaled down to thumbnail size, they normally lose their purpose. Scaling up to full screen width will only work for mobile breakponts of - let's say 480px.
This is an option but the interpolation will look ugly. In such a case a higher dimension than 200px should be renderd. This is what this plugin tries to achieve by replacing the scaled source with it's original. In case "Maximum Image Area" is set to a high value, the original image may be bandwith-consuming - and now here we have a discrepancy I'd like to discuss.

...also the possibility multiple images depending on the output medium is certainly important.

Yes. For mobile devices it is still a good advice to serve fast loading content since many people are on limited data-plans and slow connections.
On the other hand, many "premium" folks are proud of their high-density displays, which can show images in much more detail than any laptop or desktop (Sharp  recently unveiled a 4K phone display with over 800 dpi). For image-centric cases serving high-density images may be appropriate.

What i want to say simpy is: If we consider implementing a dedicated image section type, it would be great if it could serve all those different purposes.

 

 

 

 

 

Edited: 5 years ago#7444

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects
I thought I just post a few links of websites/themes using responsive image sections, like I have them in mind:

http://www.tienvooracht.nl/themes/themes/brmsl
http://demo.oboxsites.com/photogenic
http://krating.themesawesome.com
http://demo.alessioatzeni.com/lilith
http://mr-tailor.getbowtied.com
5 years ago#7684

feniweb
298 Posts
fine examples. just can not be realized this with the current image element.
Edited: 5 years ago#7691

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects

Current Image Section is more for static output - good for fixed sizes but not suitable for dynamic clipping, as shown above.

I'm considering to adopt jquery-focuspoint for a resposive image section type. It's by far the best solution for resposive/dynamic containers I have seen so far.

Up to now (gpEasy 4.5b3) there is no way to define section combos by themes/plugins.
Although a single image section type made as a plugin could do the things seen in the links above, a combination with a wrapper would make it much more powerful.

I recently found out some interesting things to improve editing of sections but adoption of jquery-focuspoint is not so trivial.
Let's see what 4.5 final will look like first.

5 years ago#7695

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects

Hi Felix and everyone interested in this topic -

I decided to finalize and release the 1st version of my new Responsive Image plugin.

It's built using the above mentioned "Focus Point" feature.
Any feedback is appreciated - here or preferably in the plugin's support forum.

5 years ago#7717

feniweb
298 Posts

Hello Jürgen

WOW, WOW great job. I've played with it a bit. Here are a few things I noticed.

1. The image is not 100% shown in the wide it will cut anything. See Image.
2. Would be beneficial if you could display the image in a Lightbox not only all over the screen, because if you have a picture with 800 or 1000px high and invites it looks on a 4K or 5K screen is not so nice.
3. When proportional can not specify px, em but it is not working. Only the switch to fixed, which is somewhat confusing.

The plugin think is exactly what was missing.

 

Here the version 4.4 gpEasy

 

In the gpEasy 4.5b3 it is unfortunately not yet displayed correctly. possibly a js conflict.

Edited: 5 years ago#7724

feniweb
298 Posts

Another point when a new pixel dan could but the new HTML5 tag enclosing

<figure> New in HTML5 Features an illustration that illustrates a portion of the document.
<Figcaption> New in HTML5 Indicates the caption of a figure.

Link:

https://developer.mozilla.org/de/docs/Web/HTML/HTML5/HTML5_element_list

Edited: 5 years ago#7726

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects

Thanks Felix for your feedback - much appreciated.

For the width clipping: Must be the padding of the section. Should be easy to fix short-term. Which browser/version are you using?

Open in Lightbox/Colorbox: Yes, I already planned that. I'll implement it in the next update.

Proportional setting: Hmm - I'm not sure if I understand. Can you explain further (or in german language?)

gpEasy 4.5b3: Maybe a JS issue. Actually there are some things in the JS part of the editor that need to be improved. I'll fix it when 4.5 final is settled.

<figure> / <Figcaption>: I'm hesitating to use HTML5 elements in plugins as there are still some HTML4 themes in use. There are also some other very interesting HTML5 elements like <picture> which supports multiple sources/resolutions. Hmmm... We'll see. 

5 years ago#7728

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects

For the width clipping: Must be the padding of the section. Should be easy to fix short-term. Which browser/version are you using?

Ah! Taking a closer look at your example, I see that it's not a bug. Your image proportions are wider than the clipping frame proportions.
Since the image will always cover the clipping frame, it's intended to be clipped on the left and right.

Example: Let's say your image's width is 1000px and the height is 500px - when your clipping frame is set to be 66.7% the height of it's width, the image would have to be at least 667px high to avoid clipping left and right. Just try it with a wide image and a almost square section. The behavior is intended.

edit:/  But if you want to always show the text like "Essential Feelings" in your sample image, that's exactly what the focuspoint feature is meant for. Simply set it by clicking into the bottom left corner of the preview image in the editor. The image will always align bottom left and show this part corner regardless of the section proportinons.

 

Edited: 5 years ago#7729

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects

In the gpEasy 4.5b3 it is unfortunately not yet displayed correctly. possibly a js conflict.

I just released a fixed version which should work for you, even in 4.5b3.
Actually it was a different problem with a wrong  editor CSS path when the plugin is installed manually.
 

5 years ago#7742

feniweb
298 Posts

Hello Jörgen

What browser / version you are using? I use:

Win 7 Ultimate Chrome, Firefox, Vivaldi (Opera) always newest, Safari 5.1.7

Win 10 Chrome, Firefox Edge, Vivaldi

Mac Safari, Chrome, Firefox latest

All the same result.

Proportional setting:

Now at Probortional is%, em to selection even if it has no effect.

Thanks for the correction now it also works under the gpEasy 4.5b3.

Greeting

Edited: 5 years ago#7772

juergen
1.5K Posts
54.9K Downloads
16 Plugins
design, web development & visual effects

Hi again Felix,

what you encounter is how it's indended to work.

The image will always scale to cover the surrounding clipping frame. The clipping frame's proportions/heights is what you can set. In contrast to the new built-in image section type, this one does not alter the image itself.

"Proportional" means height = percent of width. Not the image's width but the width of the clipping frame, which will always scale to the section's width.
Therefore, for "proportional" the only meaningful height setting can only be "%" (% of width).

If we use "fixed" we have px, em and %. px and em are absolute values (well, em is relative but it depends on the section's font size wich may only be set via css or section options). Using "fixed" and px/em will force the image's clipping frame to the set height, regardless of the section's height. The section's width will still depend on the (responsive) grid rendering.

Using "fixed" and % will render the clipping frame's height in percent of the section's height. This can only work as log as the section has a defined height. Normal Bootswatch grid sections do not have a defined height but you could set one via CSS or section options, preferably via CSS rules+media queries.

The combination "fixed"+"%" is mainly for grids using display:flex, which is still not mature. Some browsers still won't provide a measurable height of flexbox containers, so this feature is merely for future use. As long as people use IE<10 we cannot use flexbox without JS tricks.

So, the ResponsiveImage section type is not meant to show unclipped images. It's soley made to have a intelligent dynamic clipping/cropping for different rendering situations. Of course you could make A) your sections always render the same proportions regardless of the display size, B) set "Responsive Image" to "proportional" and use "%" ans C) prepare your images to have exactly the sam proportions, but that would be overkill, because a simple <img/> with style="width:100%; height:auto;" will do exactly the same and the plugin is not needed.

The "Responsive Image" plugin is somehow a equivalent of print design's frame based layout image handling, like in InDesign - with the difference that on a responsive webpage the frame size/proportions vary. The focus point feature will take care to always show the specified, most relevant part of the image.

5 years ago#7775

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

HH-Support

Company located in Tórshavn, Faroe Islands. * Webpage Design * Consultant & Provider of a wide range of programs for visually impaired and dyslextics.

Find out more about our Provider Spotlight

Log In

  Register