Choose Image Size - Attachment Display Settings

Support
#1

hello,
First Problem:
when I add an image file to a page or post, I can choose the Image Source (e.x. the thumbnail or medium size).

But when I add an Image in Cornerstone (with the Image Element), I can’t choose the source of the image size (attachment / medium / fullsize) (in the popup)

Second Problem:
For a temporary solution, I can create a textfield and add a “shortcode item” in cornerstone. Then I can select the image thumbnail. I wan’t to be displayed as cirle. But:
The created shortcode is wrong. It does not take the thumbnail image “-150x150.jpg” although i have selected the right size.

[x_image type="circle" float="none" src="http://stage.fcg-bielefeld.de/wp-content/uploads/2017/09/Foto-Nico.jpg" info="none" info_place="top" info_trigger="hover"]

I think this is a bug in shortcode php, because when I add the image as textfield and mediafile with selected attachment, it works fine and it creates the right code:

<img src="http://stage.fcg-bielefeld.de/wp-content/uploads/2017/09/Foto-Nico-150x150.jpg" alt="Foto von Nico" width="150" height="150" class="alignnone size-thumbnail wp-image-206" />

Tested with different images & newest X Pro Theme

#2

Hi Kevin,

This is not a bug. By default, there is no image size option for cornerstone’s image element. It simply use the image url provided by media library. Depending on the image container, it will display 100%. If the image container is more than the original image width, the image size will be it’s original 100% width. When the image container is smaller, the image will resize proportionally and will just fit on its container. Now to reduce the size of the image, we can add max-width or width property on the image style field.

Hope this helps.

#3

Hey,
i don’t understand your answer.
I want to choose the image source, based on the given resized images (thumbnail, medium, large…) to display a thumbnail.
As a solution, i took the image shortcode to choose the right image attachment (thumbnail)

But while using the shortcode for the solution, the shortcode takes always the full image source
Line 47 + 52 in shortcode.php.
$src_info = wp_get_attachment_image_src( $src, 'full' );
But in the frontend i choosed the thumbnail.

It’s not really user friendly.

1 Like
#4

I also don’t get this answer. I don’t want to load the full sized uploaded image every time. That will make the page very heavy. That is the reason why WordPress sizes the image to various sizes. It should be easy and straightforward to add the image in the pre-set sizes. I don’t get why you don’t offer that option. It’s a basic WordPress function that you are hiding in X.

#5

@kevin_hermann, @visify,

The Image element uses the full size version only. If you want to use a smaller image, you need to use the shortcode version and use the URL of the small image size.

Thumbnail is a Style option. It adds a border around the image.

What @Lely is saying is that images in X has a max-width of 100%. That means if the container/column size is 1000px, the image’s width will be scaled down to 1000px even if it has a width of 1920px. If the image’s width is 600px, it will remain 600px in a 1000px container width. If you resize your browser and the container’s width becomes smaller than 600px, the image will be scaled down.

The reason why WordPress responsive image is disabled in X could be found in our changelog under version 4.5.0

You should upload already an optimized image or use an image optimization plugin. This is expected for optimum site performance. Using WordPress itself as an image resizer is not recommended.

Thank you for understanding.

#6

Hi,
thanks for fast response and the video.

At Minute 1:17 you are using the shortcode image.
There i can add an image and set also (like you showed at 0:45) the attachment display settings.

I did this attachment display settings while adding the shortcode, too.
For adding the mediaitem &for adding the shortcode.

But instead of taking the thumbnail link for shortcode, the shortcode takes the full image link.
Thats my problem.

#7

Hi there,

It’s not a bug, it’s just how it’s made. X theme is made to work for multiple devices with responsive structure. The image sizes are registered to accommodate smaller and bigger screen, hence, the image that’s going to be displayed is a bit bigger for retina displays.

Plus, there are two ways to assign image and it’s through attachment ID or through URL. If it’s by ID, then it will pick the image that matches the ID with “full-size” image, if it’s through URL then it will simply display it.

The reason why there is no size selection in that media popup is that it’s being picked up as an ID. If it’s picked up as URL and each size has their own URL, then selection should appear but it isn’t. And here is the core code for that

function x_shortcode_image( $atts ) {
  extract( shortcode_atts( array(
    'id'               => '',
    'class'            => '',
    'style'            => '',
    'type'             => '',
    'float'            => '',
    'src'              => '',
    'alt'              => '',
    'link'             => '',
    'href'             => '',
    'title'            => '',
    'target'           => '',
    'info'             => '',
    'info_place'       => '',
    'info_trigger'     => '',
    'info_content'     => '',
    'lightbox_thumb'   => '',
    'lightbox_video'   => '',
    'lightbox_caption' => ''
  ), $atts, 'x_image' ) );

  $id               = ( $id               != ''      ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class            = ( $class            != ''      ) ? 'x-img ' . esc_attr( $class ) : 'x-img';
  $style            = ( $style            != ''      ) ? 'style="' . $style . '"' : '';
  $type             = ( $type             != ''      ) ? ' x-img-' . $type : '';
  $float            = ( $float            != ''      ) ? ' ' . $float : '';
  $src              = ( $src              != ''      ) ? $src : '';
  $alt              = ( $alt              != ''      ) ? 'alt="' . $alt . '"' : '';
  $link             = ( $link             == 'true'  ) ? 'true' : '';
  $link_class       = ( $link             == 'true'  ) ? ' x-img-link' : '';
  $href             = ( $href             != ''      ) ? $href : $src;
  $title            = ( $title            != ''      ) ? 'title="' . $title . '"' : '';
  $target           = ( $target           == 'blank' ) ? 'target="_blank"' : '';
  $lightbox_thumb   = ( $lightbox_thumb   != ''      ) ? $lightbox_thumb : $src;
  $lightbox_video   = ( $lightbox_video   == 'true'  ) ? ', width: 1080, height: 608' : '';
  $lightbox_caption = ( $lightbox_caption != ''      ) ? 'data-caption="' . $lightbox_caption . '"' : '';

  $tooltip_attr = ( $info != '' ) ? cs_generate_data_attributes_extra( $info, $info_trigger, $info_place, '', $info_content ) : '';

  if ( is_numeric( $src ) ) {
    $src_info = wp_get_attachment_image_src( $src, 'full' );
    $src      = $src_info[0];
  }

  if ( is_numeric( $href ) ) {
    $href_info = wp_get_attachment_image_src( $href, 'full' );
    $href      = $href_info[0];
  }

  if ( is_numeric( $lightbox_thumb ) ) {
    $lightbox_thumb_info = wp_get_attachment_image_src( $lightbox_thumb, 'full' );
    $lightbox_thumb      = $lightbox_thumb_info[0];
  }

  if ( $lightbox_video != '' ) {
    $lightbox_options = "data-options=\"thumbnail: '" . $lightbox_thumb . "'{$lightbox_video}\"";
  } else {
    $lightbox_options = "data-options=\"thumbnail: '" . $lightbox_thumb . "'\"";
  }

  if ( $link == 'true' ) {
    $output = "<a {$id} class=\"{$class}{$link_class}{$type}{$float}\" {$style} href=\"{$href}\" {$title} {$target} {$tooltip_attr} {$lightbox_caption} {$lightbox_options}><img src=\"{$src}\" {$alt}></a>";
  } else {
    $output = "<img {$id} class=\"{$class}{$type}{$float}\" {$style} src=\"{$src}\" {$alt}>";
  }

  return $output;
}

add_shortcode( 'x_image', 'x_shortcode_image' );

And to be specific, it’s in this line

  if ( is_numeric( $src ) ) {
    $src_info = wp_get_attachment_image_src( $src, 'full' );
    $src      = $src_info[0];
  }

  if ( is_numeric( $href ) ) {
    $href_info = wp_get_attachment_image_src( $href, 'full' );
    $href      = $href_info[0];
  }

If you prefer displaying the smaller thumbnails, then yes, you can use the shortcode and manually add the thumbnail URL.

Thanks!

#8

Hi,
I understood this code before, but I don’t understand, why it isn’t implemented uniform.
Maybe it is not implemented because of “responsive” and “retina” reasons, so that always the full image is taken?

But for a user, who wants to insert a smaller image, its not uniform:

  • The size selection in the “media popup” works fine and the right attachment, i choose, is taken.
  • The same (!) “media popup” after clicking on Shortcode-Popup is shown, but the function is not using it.

As a trained user/editor it’s ok and he can edit the image-url manually. But I’m thinking of my other users, who want’s to add Images. I think the manually way is a little bit uncomfortable for them.

Thanks :slight_smile:

#9

Thank you for your valuable feedback.

I will forward it to our developers.

Have a great weekend!

1 Like
#10

Add another vote for being allowed to choose image size from the new Pro 1.2.3 text element. Even if it allowed us to just paste in the thumbnail URL ourselves instead of having to pick and choose from just full size images it would provide the same benefit. The current implementation is just plain shortsighted.

1 Like
#11

Noted, thanks for the feedback!