Jump to content

Best practice for images in pages?


Gnuru
 Share

Recommended Posts

I use several images in pages articles.

What I am used to with wordpress, is that wp builds different dimensions of thumbnail images for previewing / inserting into the article. When clicking on an image, you can view the full image.

With IPS the image is resized by the client browser and the full image has to be loaded. (Editing the image url in IPS ckeditor by clicking on the image won't save the url to e.g. another full-sized image (uploaded via ftp))

This increases loading time for the end users and produces bad page speed rankings because of the need to load the full sized image in articles.

What would you suggest for best practice using images in pages articles regarding best user experience and high page-speed scores?

Link to comment
Share on other sites

… and the full image has to be loaded.

​Not really. I have been complaining about this problem sind 3.4 and luckily Pages now has max-image dimension settings for image/upload fields.

For the editor attachment the global image settings apply and you can also force smaller versions there. 

Link to comment
Share on other sites

I understand. I think I am doing something wrong:

In one of my article posts, I would like to show an infografik, which is quite large due to it's dimensions.

If I attach this image to my article post it's thumbnailed version is as big as the full sized version.

I don't know if this is a problem or not regarding user experience and pagespeed.

Link to comment
Share on other sites

ok, now better understand how IPS works with images. I have seen that the "Downloads"-App makes use of the "thumbimage".

If anybody is interested, I modifed the widgets "Lastest records" and "Record Feed" for DB-Entries to show a thumb image like in Downloads

 

widget.thumb.JPG.15c194e2ba47e0753548faa

This is the template for "LatestArticles"
 

{{if !empty( $records ) }}
	<div class='ipsWidget_title ipsType_reset'>{lang="block_latest_records" sprintf="$database->recordWord( 2, TRUE )"}</div>
	{{if $orientation == 'vertical'}}
		<div class='ipsPad_half ipsWidget_inner'>
			<ul class='ipsDataList ipsDataList_reducedSpacing'>
				{{foreach $records as $record}}
					<li class='ipsDataItem'>  
     				
							 {{if $record->record_image}}
        						 <div class='ipsDataItem_icon ipsPos_top'>
								   {template="thumbImage" group="global" app="core" params="$record->record_image, $record->name, 'tiny'"}
    						     </div>
							{{endif}}
    				

						<div class='ipsDataItem_main'>
                          <!--<div class="ipsCommentCount ipsPos_right {{if ( $record->record_comments ) === 0}}ipsFaded{{endif}}" data-ipsTooltip title='{lang="replies_number" pluralize="$record->record_comments"}'>{expression="$record->record_comments"}</div>-->
							<h3 class='ipsDataItem_title ipsType_break'><a href="{$record->url()->setQueryString( 'do', 'getLastComment' )}"
                            title='{lang="view_this_topic" sprintf="$record->title"}' class='ipsDataItem_title ipsType_break'>{wordbreak="$record->_title"}</a></h3>
						</div>
					</li>
				{{endforeach}}
			</ul>
		</div>
	{{else}}
		<div class='ipsWidget_inner'>
			<ul class='ipsDataList'>
				{template="recordRow" group="listing" location="database" app="cms" themeClass="IPS\cms\Theme" params="null, null, $records"}
			</ul>
		</div>
	{{endif}}
{{endif}}

 

Link to comment
Share on other sites

No I started to play with this myself and it’s all really strange. 

  1. The Pages upload field has a max image size settings, but it does not work for me. I set a low value and uploaded a large pic. The Pic only appears as the original, large file. But this setting is supposed to discard the original and only save the low-res version, doesn’t it? Bug? Does it work for anyone?
  2. The Pages upload field doesn’t have a thumbnail size setting — only the one Record Image has that. So I would expect to have the global thumbnail size settings kick in and create a thumbnail of that size. But I am getting a suspicion that was wishful thinking. Can I even have thumbnails for the Pages upload field? (Other than just CSS scaling)
Edited by Ralf H.
Link to comment
Share on other sites

ok, now better understand how IPS works with images. I have seen that the "Downloads"-App makes use of the "thumbimage".

If anybody is interested, I modifed the widgets "Lastest records" and "Record Feed" for DB-Entries to show a thumb image like in Downloads

 

@Gnuru ​This is exactly what I needed. Thank you!

Now how I can add to this, below the article title, the date added and the user by whom it was added?

Edited by estan
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...