Hi

I'm converting a website that has 8 images per image to support multiple breakpoints. The issue is that when I save a page the editor is changing the path to the images which breaks them.

_webeditcached-images should be _webkit\cacahed-images
The slash and first number of the image file name is also being removed
The breakpoint information and alt tag are moved as well but I don't think that is an issue

Input

Code: Select all

<div class="wGutter">
    <div class="wSplit wGutter20 wSpace20">
         <div class="wSpan60Xs wOver0Xs wSpan60S wOver0S wSpan60M wOver0M wSpan30L wOver0L wSpan30 wOver0">
            <img src="http://www.domain.co.uk/_webedit\cached-images\21-0-0-617-10000-7488-767.jpg" srcset="
            http://www.domain.co.uk/_webedit\cached-images\21-0-0-617-10000-7488-1920.jpg 1920w,
            http://www.domain.co.uk/_webedit\cached-images\21-0-0-617-10000-7488-256.jpg 256w,
            http://www.domain.co.uk/_webedit\cached-images\21-0-0-617-10000-7488-512.jpg 512w,
            http://www.domain.co.uk/_webedit\cached-images\21-0-0-617-10000-7488-768.jpg 768w,
            http://www.domain.co.uk/_webedit\cached-images\21-0-0-617-10000-7488-1024.jpg 1024w,
            http://www.domain.co.uk/_webedit\cached-images\21-0-0-617-10000-7488-1280.jpg 1280w,
            http://www.domain.co.uk/_webedit\cached-images\21-0-0-617-10000-7488-1536.jpg 1536w,
            http://www.domain.co.uk/_webedit\cached-images\21-0-0-617-10000-7488-1792.jpg 1792w,
            http://www.domain.co.uk/_webedit\cached-images\21-0-0-617-10000-7488-566.jpg 566w,
            http://www.domain.co.uk/_webedit\cached-images\21-0-0-617-10000-7488-1132.jpg 1132w,
            http://www.domain.co.uk/_webedit\cached-images\21-0-0-617-10000-7488-1698.jpg 1698w" sizes="(max-width:383px) 100vw,(min-width:384px) and (max-width:575px) 100vw,(min-width:576px) and (max-width:767px) 100vw,(min-width:768px) and (max-width:959px) calc(50.26vw - 12px),(min-width:960px) and (max-width:1152px) calc(50vw - 10px),566px" alt="Soak up the sun in our relaxing garden" data-aspect-ratio="0.5000">

Output

Code: Select all

<div class="wGutter">
<div class="wSplit wGutter20 wSpace20">
<div class="wSpan60Xs wOver0Xs wSpan60S wOver0S wSpan60M wOver0M wSpan30L wOver0L wSpan30 wOver0">
<img alt="Soak up the sun in our relaxing garden" data-aspect-ratio="0.5000" sizes="(max-width:383px) 100vw,(min-width:384px) and (max-width:575px) 100vw,(min-width:576px) and (max-width:767px) 100vw,(min-width:768px) and (max-width:959px) calc(50.26vw - 12px),(min-width:960px) and (max-width:1152px) calc(50vw - 10px),566px" src="http://www.domain.co.uk/_webeditcached-images-0-0-617-10000-7488-767.jpg" srcset="
http://www.domain.co.uk/_webeditcached-images-0-0-617-10000-7488-1920.jpg 1920w,
http://www.domain.co.uk/_webeditcached-images-0-0-617-10000-7488-256.jpg 256w,
http://www.domain.co.uk/_webeditcached-images-0-0-617-10000-7488-512.jpg 512w,
http://www.domain.co.uk/_webeditcached-images-0-0-617-10000-7488-768.jpg 768w,
http://www.domain.co.uk/_webeditcached-images-0-0-617-10000-7488-1024.jpg 1024w,
http://www.domain.co.uk/_webeditcached-images-0-0-617-10000-7488-1280.jpg 1280w,
http://www.domain.co.uk/_webeditcached-images-0-0-617-10000-7488-1536.jpg 1536w,
http://www.domain.co.uk/_webeditcached-images-0-0-617-10000-7488-1792.jpg 1792w,
http://www.domain.co.uk/_webeditcached-images-0-0-617-10000-7488-566.jpg 566w,
http://www.domain.co.uk/_webeditcached-images-0-0-617-10000-7488-1132.jpg 1132w,
http://www.domain.co.uk/_webeditcached-images-0-0-617-10000-7488-1698.jpg 1698w" />

-------------------------------

Any idea as to how I can prevent the wysiwyg editor from doing this?

[KK]

Hi,

I tested and the problem seems to be that "\21" (as highlighted below) is being mistaken by the editor as a 'control character'

\cached-images\21-0-0-617-10000-7488-767.jpg

The problem can be fixed by using forward slashes instead of back slashes e.g. as follows -

Code: Select all

<div class="wGutter">
        <div class="wSplit wGutter20 wSpace20">
             <div class="wSpan60Xs wOver0Xs wSpan60S wOver0S wSpan60M wOver0M wSpan30L wOver0L wSpan30 wOver0">
                <img src="http://www.domain.co.uk/_webedit/cached-images/21-0-0-617-10000-7488-767.jpg" srcset="
                http://www.domain.co.uk/_webedit/cached-images/21-0-0-617-10000-7488-1920.jpg 1920w,
                http://www.domain.co.uk/_webedit/cached-images/21-0-0-617-10000-7488-256.jpg 256w,
                http://www.domain.co.uk/_webedit/cached-images/21-0-0-617-10000-7488-512.jpg 512w,
                http://www.domain.co.uk/_webedit/cached-images/21-0-0-617-10000-7488-768.jpg 768w,
                http://www.domain.co.uk/_webedit/cached-images/21-0-0-617-10000-7488-1024.jpg 1024w,
                http://www.domain.co.uk/_webedit/cached-images/21-0-0-617-10000-7488-1280.jpg 1280w,
                http://www.domain.co.uk/_webedit/cached-images/21-0-0-617-10000-7488-1536.jpg 1536w,
                http://www.domain.co.uk/_webedit/cached-images/21-0-0-617-10000-7488-1792.jpg 1792w,
                http://www.domain.co.uk/_webedit/cached-images/21-0-0-617-10000-7488-566.jpg 566w,
                http://www.domain.co.uk/_webedit/cached-images/21-0-0-617-10000-7488-1132.jpg 1132w,
                http://www.domain.co.uk/_webedit/cached-images/21-0-0-617-10000-7488-1698.jpg 1698w" sizes="(max-width:383px) 100vw,(min-width:384px) and (max-width:575px) 100vw,(min-width:576px) and (max-width:767px) 100vw,(min-width:768px) and (max-width:959px) calc(50.26vw - 12px),(min-width:960px) and (max-width:1152px) calc(50vw - 10px),566px" alt="Soak up the sun in our relaxing garden" data-aspect-ratio="0.5000">  

That said, I really must question the way your editable markup is dependent upon the various attributes (e.g. class, srcset).

Trouble with this approach is that it would be very easy for someone editing the matter (in GUI panel of ckeditor) to delete some element or replace it with another element without the required attributes. If the values for 'class' or 'srcset' are lost, your markup breaks.

The recommended way is to use editable regions for inputting only raw data (possibly with plain HTML elements like <P> or <DIV> etc.) and place all other markup in your template (or generate it there using Couch tags).

For example, in your case you could use a single type 'image' editable region for the user to upload a main image.
Then on the template, you can use its value in a hardcoded <IMG> tag (as in your code). The other versions of the same image could be programmatically generated using e.g. <cms:thumbnail> tag,

Please give your approach a rethink as it is likely to prove very fragile with every possibility of the user messing things up badly.

Thanks for your reply. he forward slashes have indeed fixed the problem with the image paths. This is my first Couch CMS project and I admit to having cut corners. I will take your comments on board. The reason I kept the styling is so that the end user would have a design within the backend that looks like the front-end.