[TYPO3-dev] Adaptive & Responsive images resolution too low if in multi-column

[Christian von Rohr]

For anyone having same issue:

I solved this now with a sourceCollection hook ($GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['tslib/class.tslib_content.php']['getImageSourceCollection'][]).
In the following code I check every sourceCollection item, if the width is at least 500px. If not, recalculate image.

As in responsive design image arrengements vary between the media viewports and I guess this will affect quite a lot installations (when using 100% width images... ).
So it would be nice to have an option in the sourceCollection viewport-configuration..

Cheers
Christian
 


------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
class Tx_MyExt_ImageSourceCollectionHook implements TYPO3\CMS\Frontend\ContentObject\ContentObjectOneSourceCollectionHookInterface {
	
	/**
	 * Renders One Source Collection
	 *
	 * @param array $sourceRenderConfiguration Array with TypoScript Properties for the imgResource
	 * @param array $sourceConfiguration
	 * @param string $oneSourceCollection already prerendered SourceCollection
	 * @param \TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer $parentObject Parent content object
	 * @internal param array $configuration Array with the Source Configuration
	 * @return string HTML Content for oneSourceCollection
	 */
	public function getOneSourceCollection(array $sourceRenderConfiguration, array $sourceConfiguration, $oneSourceCollection, \TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer &$parentObject) {
		
		// check if image is at least 500pixel wide (needed for mobile)
		if (isset($sourceRenderConfiguration['file.']) 
				&& isset($sourceRenderConfiguration['file.']['maxW']) 
				&& $sourceRenderConfiguration['file.']['maxW'] < 500) {

			// adjust configuration
			$sourceRenderConfiguration['file.']['maxW'] = 500;

			// rerender srcset picture
			$sourceInfo = $parentObject->getImgResource($sourceRenderConfiguration['file'], $sourceRenderConfiguration['file.']);
			$sourceConfiguration['width'] = $sourceInfo[0];
			$sourceConfiguration['height'] = $sourceInfo[1];
			$sourceConfiguration['src'] = htmlspecialchars($sourceInfo[3]);
			$sourceConfiguration['selfClosingTagSlash'] = (!empty($GLOBALS['TSFE']->xhtmlDoctype) ? ' /' : '');

			// static sourceLayout !
			// TODO: take layout out of configuration - but quite tedious !
			$sourceLayout = '###SRC### ###SRCSETCANDIDATE###';

			// replace item in sourcecollection
			$oneSourceCollection = $parentObject->substituteMarkerArray($sourceLayout, $sourceConfiguration, '###|###', TRUE, TRUE);
		}

		return $oneSourceCollection;
	}
}
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------





-----Ursprüngliche Nachricht-----
Von: typo3-dev-bounces at lists.typo3.org [mailto:typo3-dev-bounces at lists.typo3.org] Im Auftrag von Christian von Rohr
Gesendet: Donnerstag, 5. Juni 2014 13:18
An: typo3-dev at lists.typo3.org
Betreff: [TYPO3-dev] Adaptive & Responsive images resolution too low if in multi-column

Hi all

I use the src-set method of TYPO3 to implement adaptive images, which is working well.

Only problem I have is the following:

If I have multiple images horizontally side by side (Image Cols), the width is divided by the number of images.
In case of responsive sites, where in the mobile view the images are usually arranged among themselves and 100% width, the image resolution is too low.

From 
∎ ∎
To
∎
∎

Is there a way, I could deactivate the whole „imageWidth = width / imagesCount“ – calculation?
Best would be, I could use a CASE object on the maxW of the sourceCollection, as it is possible directly on the maxW of the image.
Or if I could deactivate the calculation per screenwidth-configuration in the sourceCollection..

tt_content.image.20 {

     # set min quality for smallest adaptive image
    minW = 500
    maxW = 500
    maxH = 500
    minH = 500
    maxWInText = 500

    # srcset config
    1.sourceCollection {

        #  sm viewport
        small.width = 500
        smallRetina.width = 500
       small.ignoreImageCols = 1  # <= would be a perfect solution ...

        # md viewport
        md.maxW = 990
        md.srcsetCandidate = 990w

        # lg viewport
        lg.maxW = 2000
        lg.srcsetCandidate = 1199w
        
    }


Or does anybody know a suitable Hook, to adjust the image configuration, before it gets rendered by the GIFBUILDER?

Thanks a lot, 
Christian

_______________________________________________
TYPO3-dev mailing list
TYPO3-dev at lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-dev