IP Pages with Supergrid help needed

Gauravk · October 1, 2018

I'm using IP pages for the car business listing section for two years, developed by some other programmer. Recently installed supergrid and loved its entire look and feel but first two header row shifting images to right instead of center.

I tried editing the record image field in display option coding to center images, but it didn't work.

Appreciate if anyone can please help on this regard, as what I am missing or what code went wrong in the past.......?

Thanks in advance

https://carnity.com/business_listing/

Image field - display code

<br><div class="ipsClearfix">
{{foreach $value as $image}}
  <img style="height: 160px; width: 240px;" align="center" src='{file="$image" extension="cms_Records"}'>
{{break;}}{{endforeach}}
</div>

steve00 · October 1, 2018

Might be better asking in support topic for SuperGrid

Gauravk · October 1, 2018

Thanks Steve, I tried @opentype product support for a similar request and haven't received any answer since 19 Sep, so thought of trying my luck with peer to peer assistance

jair101 · October 1, 2018

Your issue starts before the image field display - there is ipsPos_right before the code pasted by you:

I am far from CSS expert, but I think this is where part of your issue is. Resizing the window also brings some strange things, for exampe the avatar goes to the left of the picture:

For the bottom row, the image floats to the left of the block:

As this also happens with the default theme, it is pretty much caused by the modifications you or your developer made. I would reupload the SG templates with the latest version and start from scratch.

opentype · October 1, 2018

19 minutes ago, steve00 said:

Might be better asking in support topic for SuperGrid

No. Customizations are not part of support. 😉

steve00 · October 1, 2018

29 minutes ago, opentype said:

No. Customizations are not part of support. 😉

Didn't know he asked about customizations

Quote

Recently installed supergrid and loved its entire look and feel but first two header row shifting images to right instead of center.

Going by that sentence I assumed that was from a fresh install

Gauravk · October 1, 2018

30 minutes ago, opentype said:

No. Customizations are not part of support. 😉

Well, it was a case of the previous customization and not the current one, as I'm fairly happy with Supergrid option.

Appreciate if you can help in bringing this to stock version or advising how little tweak to center the image is possible, please.

scaz · October 1, 2018

@jair101 You are right. @Gauravk your image is in a div with "ipsPos_right" so your image appear to the right in your "SG_image_container" 😉

Gauravk · October 1, 2018

Thanks guys for helping in this regard, since Jair post im searching every file for ipsPos_right , can you please tell me where I go and delete this code or do something to make images centered?

scaz · October 1, 2018

Try to use a background image url 😉

Before, reminder to copy your actual code in a note if this don't work.

Delete it :

<div class="ipsPos_right">
<br><div class="ipsClearfix">
<img style="height: 160px; width: 240px;" align="left" src="https://carnity.com/uploads/monthly_2018_10/IMAG0019.jpg.572084a1d562f86c87afdb197af1499a.jpg">
</div>
</div>

search this line :

<div class="ipsType_right SG_image_container ipsAreaBackground_light" style="padding-bottom: 50%;
">

Add background-image url in the style :

background-image:url('{file='$image' extension='cms_Records'}')

Result :

<div class="ipsType_right SG_image_container ipsAreaBackground_light" style="padding-bottom: 50%; background-image:url('{file='$image' extension='cms_Records'}')
">

I try it in your site with dev tool safari, and that will be something look that (I modified your article "silver star tyres & wheels LLC"):

Gauravk · October 1, 2018

Thanks a lot, @scaz for making an attempt to help, really appreciate it.

One thing I like to highlight is if I remove the listing code from image field then it will display all images as there are up to 8-10 images in that field.

Secondly, before adding the bg image, I think you take a look at an actual SG frontpage entry file, as I feel it is already using something like BG what you are intending.

If we can't fix this first-row image to be centered issue then I will be fine with an option to delete the whole first row and keep a layout of 3 tiles instead of 2 on top and 3 tiles in the bottom.

{{if settings.SuperGrid_image_add_link}}
<a href="{$record->url()}" title="{lang="read_more_about" sprintf="$record->_title"}">
{{endif}}
<div class="ipsType_right SG_image_container ipsAreaBackground_light" 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="ipsPos_left">
{{if ($record->mapped('featured') AND settings.SuperGrid_show_feature_badge)}}
  		<span class='ipsBadge ipsBadge_style{{if settings.SuperGrid_feature_badge}}{setting="SuperGrid_feature_badge"}{{else}}7{{endif}}'>{lang="featured"}</span>
{{endif}}
{{if ($record->mapped('pinned') AND settings.SuperGrid_show_pin_badge)}}
  		<span class='ipsBadge ipsBadge_style{{if settings.SuperGrid_pin_badge}}{setting="SuperGrid_pin_badge"}{{else}}6{{endif}}'>{lang="pinned"}</span>
{{endif}}
</div>
 
{{if settings.SuperGrid_listing_fields_position==1}}  
<div class="ipsPos_right">
{{if count( $record->customFieldsForDisplay('listing') )}}
		{{foreach $record->customFieldsForDisplay('listing') as $fieldId => $fieldValue}}
			{{if $fieldValue}}
				{$fieldValue|raw}
			{{endif}}
		{{endforeach}}
{{endif}}
</div>
{{endif}}
  
</div>
{{if settings.SuperGrid_image_add_link}}</a>{{endif}}
  
{{if settings.SuperGrid_avatar}}
	<div class="SG_avatar_wrapper {{if settings.SuperGrid_avatar_alignment}}{setting='SuperGrid_avatar_alignment'}{{else}}ipsType_center{{endif}}">
	{template="userPhoto" app="core" params="$record->author()" group="global"}
	</div>
{{endif}}


<div class="{{if settings.SuperGrid_title_alignment}}{setting='SuperGrid_title_alignment'}{{else}}ipsType_center{{endif}}">
<h2 class='ipsSpacer_both'>
				{{if $record->prefix()}}
					{template="prefix" group="global" app="core" params="$record->prefix( TRUE ), $record->prefix()"}
				{{endif}}
				{{if $record->isFutureDate() || $record->mapped('pinned') || $record->mapped('featured') || $record->hidden() === -1 || $record->hidden() === 1}}
					{{if $record->isFutureDate()}}
					<span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{$record->futureDateBlurb()}'><i class='fa fa-clock-o'></i></span>
					{{elseif $record->hidden() === -1}}
					<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{$record->hiddenBlurb()}'><i class='fa fa-eye-slash'></i></span>
					{{elseif $record->hidden() === 1}}
					<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{lang="pending_approval"}'><i class='fa fa-warning'></i></span>
					{{endif}}
				{{endif}}
			
				<div class='ipsType_break'>
					<a href="{$record->url()}" title="{lang="read_more_about" sprintf="$record->_title"}">
						{$record->_title}
					</a>
				</div>
</h2>
  

{{if settings.SuperGrid_byline}}
		<p class="ipsType_light ipsType_reset {{if settings.SuperGrid_meta_alignment}}{setting='SuperGrid_meta_alignment'}{{else}}ipsType_center{{endif}}">
			{lang="cms_byline" htmlsprintf="$record->author()->link(), $record->container()->url(), $record->container()->_title"}<span class="SG_hold_together">{datetime="$record->record_publish_date"}</span>
		</p>
{{endif}}
  
  
{{if settings.SuperGrid_listing_fields_position==2}}  
<div class="{{if settings.SuperGrid_meta_alignment}}{setting='SuperGrid_meta_alignment'}{{else}}ipsType_center{{endif}}">
{{if count( $record->customFieldsForDisplay('listing') )}}
		{{foreach $record->customFieldsForDisplay('listing') as $fieldId => $fieldValue}}
			{{if $fieldValue}}
				{$fieldValue|raw}
			{{endif}}
		{{endforeach}}
{{endif}}
</div>
{{endif}}          

{{if settings.SuperGrid_activity}}				
<div class="ipsType_light {{if settings.SuperGrid_meta_alignment}}{setting='SuperGrid_meta_alignment'}{{else}}ipsType_center{{endif}}">	
{{if $record::database()->options['comments']}}
	<span class="SG_byline SG_byline_first SG_hold_together">{lang="num_comments" pluralize="$record->record_comments"}</span>
{{endif}}
                 
{{if $record::database()->options['reviews'] AND $record->averageReviewRating()>0}}
	<span class="SG_byline">
	{template="rating" app="core" params="'small', $record->averageReviewRating(), \IPS\Settings::i()->reviews_rating_out_of, $record->memberReviewRating()" group="global"}
	</span>
{{elseif $record->container()->allow_rating AND $record->averageRating()>0}}
	<span class="SG_byline">
	{template="rating" app="core" params="'small', $record->averageRating(), \IPS\Settings::i()->reviews_rating_out_of, $record->memberRating()" group="global"}
	</span>
{{endif}}	


  
  {{if count( $record->reactions() )>0}}
  <span class="SG_byline SG_hold_together"> {{if member.member_id}}<a href='{$record->url('showReactions')}' data-ipsDialog data-ipsDialog-title='{lang="see_who_reacted"}'>{{endif}}<i class='fa fa-line-chart'></i> {expression="count( $record->reactions() )"}{{if member.member_id}}</a>{{endif}}</span>
  {{endif}}
 
<span class="SG_byline SG_byline_last SG_hold_together">{lang="num_views_with_number" pluralize="$record->record_views"}</span>
  </div>
{{endif}}
  
    
  
</div>

scaz · October 1, 2018

I already use this code in the past for understand how work Pages.

It's the original template in your code ? Try with it and remember to take a copy of your actual code in your laptop (with a app 'note') than you can use again if your new template doesn't work what you want. Or try it in local if you can it's better to try something without lost your work in your website.

Gauravk · October 1, 2018

I have replaced the code as you advised, but when I remove the image field code, it displayed the text of all images.

Replaced codes are still there on live site, but revert the image field codes.

And btw in backend, I truncate the number of images: 1, but still all images locations have been shown.

scaz · October 1, 2018

Oh ok, sorry. What you use for upload ? Directly in the text editor ? Or you use record image field ?

Gauravk · October 1, 2018

It's an upload field, that we are using for company images

scaz · October 1, 2018

Oh ok... you use a custom uploader field. I never use it just the record image field. I’m not sure how you can use it with your custom uploader field. Maybe a member here can help with this. You can add your old code for the moment. I try to see it in my local test install later in this week if nobody can help with this.

Gauravk · October 1, 2018

Thanks a lot for your help and efforts, really appreciate it.

I have restored all as it was before and will wait for someone more knowledgeable with upload field, who can advise some option to make image alignment to center.

Gauravk · October 1, 2018

7 hours ago, opentype said:

No. Customizations are not part of support. 😉

Do you provide a paid support for fixing the landing page of https://carnity.com/business_listing/ ?

opentype · October 2, 2018

SuperGrid uses the Record Image field. Just use that and everything will work fine. It will always be a mess if you try to add images in there in some other way.

Also: do not paste my templates here. This is a commercial product I am selling.

scaz · October 2, 2018

@Gauravk I found an alternative for you, try it for see if that work (because with the devtool on safari can be different)

Move all your div "ipsclearfix" under your div "ipsType_right SG_image_container ipsAreaBackground_light"

<div class="ipsType_right SG_image_container ipsAreaBackground_light" style="padding-bottom: 60%;
">
<div class="ipsClearfix">
{{foreach $value as $image}}
  <img style="height: 160px; width: 240px;" align="center" src='{file="$image" extension="cms_Records"}'>
{{break;}}{{endforeach}}
</div>

change your img style by

<img style="width: 100%;" align="center" src='{file="$image" extension="cms_Records"}'>

Adjust your padding-bottom or delete this style

<div class="ipsType_right SG_image_container ipsAreaBackground_light" style="padding-bottom: 3%;
">

Result

Gauravk · October 2, 2018

Thanks a lot for your help and efforts, really appreciate it @scaz , you are a true star.

I have edited image field code to this:

<div class="ipsType_right SG_image_container ipsAreaBackground_light" style="padding-bottom: 60%;">
<div class="ipsClearfix">
{{foreach $value as $image}}
  <img style="width: 100%;" align="center" src='{file="$image" extension="cms_Records"}'>
{{break;}}{{endforeach}}
</div>

And then created new SG template and attached to business listing DB as I am using SG in other DB too but with standard record image, which is working good.

Then I deleted below codes from SG-new and it shows quite a lot of progress, but tiles are appearing one underneath each other rather than side by side.

<div class="ipsType_right SG_image_container ipsAreaBackground_light" 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}}">

As im on live site, so revert to SG-standard until I hear next changes I need to make

newbie LAC · October 2, 2018

Add in custom.css

.SG_image_container {
	position: relative;
} 

.SG_image_container .ipsPos_right img {
	height: 100% !important;
	width: 100% !important;
	position: absolute;
	left: 0;
	top: 0;
}

scaz · October 2, 2018

@Gauravk your site appear good now, congrats 😉

@newbie LAC thank you for help him :)

Gauravk · October 2, 2018

Thanks @newbie LAC you are a good luck charm buddy.

Unfortunately, your code edit resulted in squeezing images in the top right corner, so while undoing all code edits and attaching standard SG template, I undo half of the code in the image field and accidentally discovered what is really working with minimalistic code edits in Image upload field.

No SG template edit needed

No Code edit in custom.css

<div class="ipsClearfix">
{{foreach $value as $image}}
  <img style="width: 100%;" align="center" src='{file="$image" extension="cms_Records"}'>
{{break;}}{{endforeach}}
</div>

After custom.css edit

NOW FINALLY, ALL GOOD.

Thanks a lot @scaz and @newbie LAC for persistingly helping with this issue

newbie LAC · October 2, 2018

9 minutes ago, Gauravk said:

Unfortunately, your code edit resulted in squeezing images in the top right corner, so while undoing all code edits and attaching standard SG template, I undo half of the code in the image field and accidentally discovered what is really working with minimalistic code edits in Image upload field.

I did not tell you to edit the templates.

I read your first post, opened your forum and made changes

BTW

Now your block looks like

Pay attention on avatars baseline and images height

With my changes (no need to edit templates, just add css)

IP Pages with Supergrid help needed

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived

Recently Browsing 0 members

Upcoming Events

Trending Content