This is an extract of the rendered code of the frontend.
<div style="width: 345px;" class="csc-textpic-imagewrap">
<ul>
<li style="width: 0px;" class="csc-textpic-image csc-textpic-firstcol">
<img width="" height="" border="0" alt="" src="">
</li>
<li style="width: 335px;" class="csc-textpic-image csc-textpic-lastcol">
<img width="335" height="381" border="0" alt="" src="uploads/pics/katze_start_01.jpg">
</li>
</ul>
</div>
The first <li><img> contains no src, height, width, alt, etc. In the backend there is a image and it should work. Well I use the standard CSS Styled Content Framework and render the content elements via styles.content.getLeft (does work). For some reason (it feels not logical) it does not render the first image of an "image" content element...
What is the error here?
Check in install tool if imagemagick/graphicsmagic works. There are five tests defined in "Image Processing".
If everything works fine there, check if your image has special chars (f.e. german umlauts) or spaces in there. Replace spaces (i guess you uploaded them via scp/ftp, via TYPO3 they should be replaced automatically) and check install tool options "[SYS][UTF8filesystem]" and "[SYS][systemLocale]" in section "All Configuration".
Related
I know, I should use something like Bulletproof Email Buttons service for such purposes, but I have a case, where I need to use an image wrapped with an <a> tag to represent a link in my email template. I ran a test with testi.at and it appears to be represented correctly for almost 100% of clients (up to Outlook 2007). I cannot check if such image link is 100% clickable though. My question is if there are any known issues with this approach?
<tr>
<td style="text-align: center;">
<a href="http://example.com">
<img src="https://some-image-src.png" width="100" height="50" alt="Sample image" />
</a>
</td>
</tr>
This is a very common practice and there is no downside that I can think of. One recommandation I'd make is to add the following styles on your image element:
vertical-align:middle; This prevents a small gap to appear below images in email clients using an HTML5 doctype.
border:none; This prevents a blue outline to appear on older email clients running on Internet Explorer’s rendering engine (like Outlook 2003 for example).
Also, be careful, there's a typo in your code (scr instead of src).
My HTML email template has a few images. All images are saved and served from the same Google Cloud Platform Storage Bucket and all images are set to be publicly available.
When the email is delivered, Gmail only loads half the images. In the other half, it removes the src attribute altogether! The same template works fine when I open it in Chrome and the same emails works great on Outlook.com as well. See the example of what the <img> tag looks like in Gmail below:
<img alt="image" style="display:block" width="191">
The HTML block for that specific image looks like this:
<td align="center">
<a href="#" target="_blank">
<img src="http://storage.googleapis.com/tripcloud-email-assets/campaigns/1-holidays-2016/banner-content-1.png" alt="image" border="0" height="67" width="199">
</a>
</td>
The only other thread I found about this subject was this but I did not have a similar error and so, it was unrelated. Can someone please tell me why this might be happening?
I can suggest you two options-
Don't use imagenames like googleads or googleadspreview. Just avoid 'ads words'.
If it removes src attribute, you can add it with jQuery.
this is pretty basic but I can't figure out why my image won't render. The broken image icon doesn't appear and I'm viewing my page on localhost. I'm not sure how to upload a screen shot but I've played with the relative path in many ways and can't figure out the problem. When I link to an online image it renders. I'm using rails/foundation currently but I actually had the same problem using a MEAN stack a couple weeks ago. The issue seems to be only when using a server. Any help is appreciated, thanks. EDIT: my views and assets folder are at the same level (siblings?) views path: app/views/projects/home.html.erb. images path: app/assets/images/volvo.jpg; I've selected the image file and done 'copy relative path' and played with it every which way. I don't think it's the path but who knows.
<h4>pic below</h4>
<img src"../../assets/images/bmw.jpg"/>
<h4>pic above</h4>
<h2>photo gallery</h2>
<ul>
<li>
<img src"assets/images/bmw.jpg"/>
<img src"../../assets/images/volvo.jpg"/>
<img src"saab.jpg"/>
<img src"../../assets/images/saabtwo.jpg"/>
</li>
</ul>
You are defining your images incorrectly; you forgot the equals sign (=). You need to have src= instead of just src before the image path. This is because of the way the defining/setting of attributes works in html.
For your code, this would be:
<h4>pic below</h4>
<img src="../../assets/images/bmw.jpg"/>
<h4>pic above</h4>
<h2>photo gallery</h2>
<ul>
<li>
<img src="assets/images/bmw.jpg"/>
<img src="../../assets/images/volvo.jpg"/>
<img src="saab.jpg"/>
<img src="../../assets/images/saabtwo.jpg"/>
</li>
</ul>
As a general rule, to define a style in html, you do this: attribute="value".
I have this htmls on a page which renders a photo album.
As you can see that there are 3 <img> tags.
The first two is under <li> which has display:none. But the last image is visible as it has style=''.
My question is: during page load will the first 2 images be loaded with the last image even if their container has display:none?
<div class="gallery">
<ul id="PhotoContainer">
<li style="display: none;" name="DSC01100.JPG" id="4ee01301602fdd0efc35683e">
<img src="http://site/Files/Get?fileId=4ee01306602fdd0efc356844"></li>
<li style="display: none;" name="DSC01102.JPG" id="4ee01308602fdd0efc35685f">
<img src="http://site/Files/Get?fileId=4ee0130a602fdd0efc356864"></li>
<li style="" name="DSC01101.JPG" id="4ee01306602fdd0efc35684f">
<img alt="my description for this image" src="http://site/Files/Get?fileId=4ee01308602fdd0efc356855"></li>
</ul>
</div>
If by "loaded" you mean downloaded, then yes. Resources with display: none styling are still fetched, just not rendered. In fact, this is a valid image pre-loading technique, as discussed in this article.
To verify, you can load your page and look at the downloaded resources tab in Chrome Developer Tools or Firebug.
It depends on which browser is loading the web page, I know google chrome loads all images, I expect most other browser are doing the same...
All images will get loaded into the cache, and technically the webpage. However, the css hides the 2 images before they come in contact with the human eye.
I'm new to Vim and I'm trying to get used to it. I just created a .vimrc file and got Vim to display line numbers and do incremental searching. I also enabled syntax highlighting. Now I want to enable things to make writing HTML easier. I searched for html.vim in /usr/share/vim and found this:
/usr/share/vim/vim72/syntax/html.vim
/usr/share/vim/vim72/ftplugin/html.vim
/usr/share/vim/vim72/indent/html.vim
Now, what do I have to do to enable HTML auto indentation? Copy those files to ~/.vim? Symlink them? Or does Vim automagically load them from /usr/share/vim/? (It already does HTML syntax highlighting, so I think that's possible - but it doesn't do HTML auto indenting)
I heard set autoindent in .vimrc would do the trick, but what's with .c files? I thought they needed set cindent, but does cindent work with HTML?
The very first thing you should do is try vimtutor and complete it a couple of times. Once the basics are covered you can start to play with plugins…
SnipMate is inspired by TextMate's snippets and/so is beautiful, it has a lot of HTML snippets by default and it's extremely easy to add your own. To use it, type div then hit Tab to obtain:
<div id="|">
</div>
with the caret between the "" ready for you to type an id; hit Tab again to move the caret on the blank line:
<div id="myId">
|
</div>
Beautiful. Many editors have this feature, though.
If you have a lot of HTML to write — say a few emails/newsletters a day — another plugin called SparkUp allows you to produce complex HTML with only a few key strokes and some CSS knowledge. You start by typing something like:
table[id=myTable] > tr*3 > td*2 > img
then you hit <C-e> (CtrlE) to obtain:
<table cellspacing="0" id="myTable">
<tr>
<td>
<img src="|" alt="" />
</td>
<td>
<img src="" alt="" />
</td>
</tr>
<tr>
<td>
<img src="" alt="" />
</td>
<td>
<img src="" alt="" />
</td>
</tr>
<tr>
<td>
<img src="" alt="" />
</td>
<td>
<img src="" alt="" />
</td>
</tr>
</table>
with the caret inside the first empty "". Hit <C-n> and <C-p> to go to the next/previous field.
Magical. The plugin is available for more editors, though.
I second text objects and Surround.vim which are unbelievably useful.
Another cool feature is the visual-block mode (:help visual-block) where you can select columns of text. Say you have:
<ul>
<li><p>My text doesn't mean anything</p></li>
<li><p>My text doesn't mean anything</p></li>
<li><p>My text doesn't mean anything</p></li>
<li><p>My text doesn't mean anything</p></li>
</ul>
place your cursor on the > of the first <li>then hit <C-v>and move the cursor downward to the fourth <li>. Hit I (capital I) to enter INSERT mode just before the > and type class="myElement" then <Esc> to obtain:
<ul>
<li class="myElement"><p>My text doesn't mean anything</p></li>
<li class="myElement"><p>My text doesn't mean anything</p></li>
<li class="myElement"><p>My text doesn't mean anything</p></li>
<li class="myElement"><p>My text doesn't mean anything</p></li>
</ul>
Ho yeah!
Seriously, Vim is great.
Take a look at the AutoCloseTag plugin to close tags as you type them. And set autoindent should be handling HTML indentation for you.
Also you should read the docs in :help text-objects to learn about using the inner and outer tag selections. For example, in normal mode you can do cit to change the text inside the current tag. Or in visual mode at will expand the visual selection to encapsulate the tag around the cursor.
Finally, look at the Surround.vim plugin, which can surround a selection or text object with a tag, or change the tag around it.