Pages SuperGrid support

[opentype]

What happens if you switch your account to the default IPS theme?

[Pedro Ibáñez]

Hi opentype, it seems to be the theme, I'm absolutely crazy with this theme

[Chris027]

When my page first loads, the activity and byline for the top two articles are behind the articles below. See the first screenshot. After I resize the window (responsive design) the activity and byline appear as normal, even if the window size is returned to the exact same size as when the page first loaded. 

 

 

[opentype]

Does it happen in the default theme as well? Do you load JavaScript in the head or the body?

To further help you I would need access to your site. I can’t debug that from just looking at a screenshot. 

[Chris027]

I think this has something to do with my block displays. I have blocks that only display to certain groups of users. When the page loads, the width is more narrow and the activity and byline are displayed correctly for about one second before the page expands because the blocks aren't displayed to this group of users. 

4 minutes ago, opentype said:

Does it happen in the default theme as well? Do you load JavaScript in the head or the body?

To further help you I would need access to your site. I can’t debug that from just looking at a screenshot. 

PM sent

[Chris027]

15 minutes ago, opentype said:

Does it happen in the default theme as well? Do you load JavaScript in the head or the body?

To further help you I would need access to your site. I can’t debug that from just looking at a screenshot. 

Java script is loaded in the body. I will check default theme. 

[Pedro Ibáñez]

Hi opentype,

It's posible to use the supergrid style with the blocks?

Thanks!

[opentype]

No. That’s part of your theme. I have no control over that through Pages templates. 

[Pedro Ibáñez]

Ok thanks opentype!

[Pedro Ibáñez]

Hi, Opentype

How can I adjust the white space in the second screenshot like in the first one?

Thanks!

 

[Simon Woods]

I've finally got around to testing this out. Firstly, thanks for making and maintaining it, I can't wait to show my members.  

Secondly, are there ideal resolutions to set for the Record Image Settings? I have max set to unlimited and tumbnails to 200x200 and I think either that or the ratios I'm using - 45 for Image aspect ratio and 50 for Hero image aspect ratio - might be causing a problem; images are displaying as a mixture of cut-off and blurry, like so:

 

Or is it something else? Should I be using images of a certain size or be doing something to them, or are there just certain types of images that will fit better?

Edited April 23, 2017 by Simon Woods

[opentype]

14 minutes ago, Simon Woods said:

I have max set to unlimited and tumbnails to 200x200

Yeah, that’s not ideal. Your thumbnail will be super small and your large images can get super large in terms of file size. 
I prefer something like 600 to 800 as max size for the thumbnail and 1500 to 2000 for the large images. But that depends on what you are doing on your site. 

If the thumbnails are too small or the large ones too big, there is a setting to choose which ones to use for the grid view. Of course if both have problems, I can’t help you. 

If you change the image settings for the database you would have to upload the image again. 

  

14 minutes ago, Simon Woods said:

or are there just certain types of images that will fit better?

The images are centered and scaled up or down to fill the container in both direction. So you want the aspect ratio of your uploads close to the aspect ratio you set for SuperGrid. So try to set it that way and try to keep all uploads similar. The more you deviate from the default aspect ratio you set, the more will be cut off from the image. 

[Simon Woods]

Thanks! 

[levsha]

Hi!
Tell me, how can I solve the problem?
Thumbnails are not created.
After changing database settings, the image was added again, but without result ...

The image on the page is stretched, so that the whole view is cut off ...
I will be happy to help ...

 

  

[opentype]

Have a test URL?

[levsha]

Yes,
Minute

[levsha]

Here is url

http://forum.kamfishing.ru/index.php?/test2.html/

If necessary, I will give access to the Admin Panel

[opentype]

You have set .ipsAreaBackground_light to “transparent” in your CSS. That hides everything. 
You should remove that styling. If you really don’t want the light grey, which is set by default, set it to white, not transparent. 

[levsha]

Thank you!
Tell me more by the images for the preview.
I add images 800x600px, but it still has a strong graininess ... in which resolution to add an image for the preview in which for the page.

On 24.04.2017 at 7:33 AM, opentype said:

Да, это не идеал. Ваш эскиз будет супер маленьким и ваши большие изображения могут получить супер большие с точкой зрения размера файла. 
Я предпочитаю что - то вроде 600 до 800 , как максимального размера для миниатюры и 1500 до 2000 для больших изображений. Но это зависит от того, что вы делаете на вашем сайте. 

Если эскизы слишком малы или крупные слишком большие, есть параметр, чтобы выбрать, какие из них использовать для вида сетки. Конечно, если у обоих есть проблемы, я не могу вам помочь. 

При изменении параметров изображения для базы данных вы должны загрузить изображение еще раз. 

  

Изображения по центру и масштабируется вверх или вниз для заполнения контейнера в обоих направлениях. Таким образом, вы хотите, чтобы пропорции вашего добавления близко к пропорции, установленный для суперсети. Поэтому постарайтесь, чтобы установить его таким образом и попытаться сохранить все файлы похожи. Чем больше отклонения от соотношения сторон по умолчанию вы установите, тем больше будет отрезан от изображения. 

 

As written here, it did not help ...

[levsha]

Thank you!
 

[levsha]

Understood!
Thank you again for the support and wonderful product!

[KenuFHR]

Hi there @opentype,

First of all, thank you for putting in the work to create this plugin - it looks great overall!

I just bought the plugin today and I'm having some issues with making it work with my current news content. The issue is that we use a custom field 'news_image' (Template key) as a thumbnail on our website www.nhlgamer.com. We don't use that specific image in the news article itself (besides a super small image in the beginning of the news article).

I have tried to edit the $record->_record_image_thumb part of your code below, but was unable to get it to work. Could you tell me if it's as simple as just getting the syntax correct there and possibly let me know the correct way to call for the image if that is the case?

<div class="ipsType_right SG_image_container_sidebar ipsAreaBackground_reset" style="padding-bottom: {{if settings.SuperGrid_aspect_ratio}}{setting='SuperGrid_aspect_ratio'}%{{else}}50%{{endif}};
{{if $record->record_image}}background-image:url('{{if settings.SuperGrid_image_use_thumbnail}}{file='$record->_record_image_thumb' extension='cms_Records'}{{else}}{file='$record->record_image' extension='cms_Records'}{{endif}}');{{elseif settings.SuperGrid_fallback_image}}background-image:url('{setting='SuperGrid_fallback_image_url'}');{{endif}}">

<div class="cCmsRecord_image">
					<img class="ipsImage" src="{$record->customFieldDisplayByKey('news_image', 'listing')|raw}" extension="cms_Records">
				</div>

Above you can see how it's called by default at the moment on our site.

 

Edit: Here you can see how it is currently looking:

On the right hand side I am testing with a new database and everything is working as intended. On the left (in the middle) I have linked to the original database, where the thumbnail image is instead now displayed as a text link for some reason (this is with your template code unedited, as above):

image.tiff

I can give you access to the page that I'm currently working on, but I figured the above is probably enough to form an understanding of the issue.

 

Thank you in advance!

 

Kind regards,

Kenneth

Edited May 8, 2017 by KenuFHR

[opentype]

1 hour ago, KenuFHR said:

Could you tell me if it's as simple as just getting the syntax correct there and possibly let me know the correct way to call for the image if that is the case?

Yes. 

You need to replace the use of “record_image” with your custom “field_XXX”. You are free to do this, but I can’t provide customization help. 

[KenuFHR]

Thanks for the quick reply. I haven't been able to make it work despite some fiddling with it so far, but at least I am under the impression that I understand the logic a bit better.

What's confusing to me is that the link to the image is displayed with the default code. I tried adding a new image field to the new database that I created for testing SuperGrid and here's what happened, even when none of the articles have any images uploaded for the new image field:

All thumbnails get this 'Image:' box in the top right corner. The link to the article only works by clicking this little 'Image:' box after that and the link functionality is removed from the thumbnail itself. If I upload an image in the new image field, it puts that picture on top of the thumbnail (and still acts as the link).

I was wondering if you might be able to tell me whether this is something dictated by the SuperGrid code (telling it to look at all fields in the database), a bug, or some forum specific feature?

Otherwise, even if I make the correct image visible by editing the code, I'd imagine will still have that link from field_9 on top of the thumbnail (as in my previous post).

Appreciate your help - thank you!

 

Kind regards,

Kenneth

[opentype]

1 hour ago, KenuFHR said:

I was wondering if you might be able to tell me whether this is something dictated by the SuperGrid code (telling it to look at all fields in the database), a bug, or some forum specific feature?

That’s the field output defined in the field settings of your custom image field. You can just turn it off for the listing mode.