Outlook truncating images - image

I'm designing an e-mail template for a company and it tests great in everything besides Outlook. For some reason the bottom images of the email look like they're loading half way and then stop. I've found information online that Outlook won't load images with a height greater than 1728px, but the tallest image we have is much shorter than that. There are images beyond 1728px on the page that are loading just fine, so I'm not sure that's the issue. Does anyone have any experience with this? Any advice would be helpful.

Hi Here is a quick solution for this to be done in the outlook.
Use photoshop and follow this steps:
Once the design is over, slice up the image parts / height(1728px as per yout example).
Save this as, File->Save for web and device. click save. you will get option under save box
Under format change this to HTML and image from drop down.
Save them in one folder. A new HTML file and image file will be created in this folder.
Open this HTML file in a browser.
Just copy and paste the content in the outlook using a single cell table.
That's you are done. Now your image will load without any problem.

Related

Uploading and referencing custom images in BigCommerce/Stencil

Recently started work on a BigCommerce project and on the homepage I want to have a theme area where normal site admin users can upload their own images based on holidays (Xmas, halloween etc) in the theme editor.
I know how to add in some custom elements in the theme editor using the Schema and Config files (headings, text, font colours etc), and how to reference them in the homepage. I'm also fine with referencing set images in the assets folder which aren't going to change, and manually coding references to them.
However I can't quite seem to work out how to add a custom image upload to the theme editor, or how to reference it in a page. Can't seem to find any answers in the Stencil documentation or usual Google searches etc either.
The Stencil Theme Editor currently only supports the file upload data type in the Optimized One-Page Checkout customization settings, but there are a couple of possible workarounds to allow the user to upload their custom background image and then reference it in Theme Editor settings:
One option would be to have the user upload their image to WebDAV, making sure that their image followed a naming convention that you specified. For example, the Halloween image could be required to have the file name halloween.png. You could map that value to a Theme Editor dropdown setting for Holiday Background>Halloween.
Another solution might be to have the user upload their image to WebDAV as mentioned above, but instead of a dropdown menu, you could have the user type their file's name into a text input setting in the Theme Editor. Keep in mind though that there's a 64 character limit for input values.
Hope this helps!
There are 4 ways to get images into the BigCommerce store.
You can:
Upload into the content folder through webdav. Then the images would be referenced like url.com/content/image.jpg. This does require a webdav connection and while everything does point you to using file managers like cyberduck, you can actually map a drive to a network resource to make this super easy. This mean you can create a z drive that is actually your bigcommerce content upload through webdav. It's pretty easy to set up and for customers to use. The drawback is that these files do not get put on a CDN so there's a little loss of performance.
Upload into the theme's images folders. This is complex and would require your client to figure out the stencil local dev connection and push versions up to their store. This would allow the images to be CDN'd but is super complex and your clients won't figure it out... It could also expose you to some long-term version control issues as they may be overwriting you or vice versa.
You can use the media manager to upload images. If you're referring to them in code, an easy trick is when your clients want to replace an image, to delete it and upload a new one with the exact same name... then the reference doesn't break. This is the easiest way to deal with site-wide issues from the client-side. Images are CDN'd this way as well.
You can consider using the marketing banner function for semi-temporary marketing messages. This is what it is made for, the images will be CDN'd and it's full GUI with no techy connections for your clients to figure out. This is perfect for banners that span a single page, but I don't think there is currently a side-wide setting for locations.

Extracting Images from the external website

Can anyone explain me what is been used on this template to secure the images used in the website template http://template-entitled.webflow.com/ and is there anyway I can extract them out, every time I save the pages, I just able to save icons not the background and slider images. I downloaded its css and js files but couldn't find and png files for background.
Not sure if you just need the background images or you need to recreate the same effect of this theme. Anyway if you just need the images with firefox you can right click on the image an choose visualize background image (not sure if the English menu is exactly like this) and you'll have the url of the image (i.e.: http://uploads.webflow.com/533e797fc51278ef4200094a/534e45fb2dd7fcb8350002df_Office-6-2.jpg)

Display an image in a Fusiontable, which is stored in Google Drive

I uploaded some images to a public folder in my Google Drive and would like to display them in a Fusiontable. I defined a column "link" as "Four line image" and store a link to the image there in the following format (provided by #Mori)
https://drive.google.com/uc?id=FILE-ID
example: https://drive.google.com/uc?id=0B6qZJQj7B-4ERS1KZ3p2SE9IbkU
I also tried the following format (provided by #niutech)
http://googledrive.com/host/<folderID>/<filename>
Unfortunately the result looks like this (screenshot 1)
Only after right click onto the image placeholder and selecting "View image", the image is displayed in a separate window. Now going back to the fusiontable the image appears correctly, see screenshot 2:
What could be the solution to this problem? I would like to see all images without need to right click first. Btw, I'm using Firefox.
EDIT: I now set the Fusiontable to "visible to anybody with link" and tested with Google Chrome and Opera. There it works fine. Firefox still does not work. Seems to be a browser issue...
I now set the Fusiontable to "visible to anybody with link" and tested with Google Chrome and Opera. There it works fine. Firefox still does not work. Seems to be a browser issue...
After many attempts I was only able to upload my own images to fusion tables via Dropbox and not Drive. I could not find a way to automate this, so for many images it might be better to go to another visualization platform.
Upload the images to your personal Dropbox (mine were .png)
For each image:
Click on Share -> Create a Link -> Copy link.
Open the 'shareable link' in a new tab. It might help to open the link in a private browser to check that anyone not logged in to Dropbox can view the image. Then right click on your image and go to 'Copy Image Location' (Firefox) or 'Copy Image Address' (Chrome). You will notice if you put this link in a new tab it will prompt you to automatically start downloading the image.
Paste this image location URL into the appropriate fusion table cell and make sure the column attribute is defined as e.g. "Four line image" and not 'URL'.
You almost had the correct answer. You have to change your picture's URL from the one for viewing the picture, to a direct URL for download.
See https://www.labnol.org/internet/direct-links-for-google-drive/28356/ for details.
I managed to do this in a calculated column (I use google form to gather info, then google spreadsheet and than synchronized fusion table). I changed the URL with spreadsheet formula:
=CONCAT("https://drive.google.com/uc?export=download&id=",right(left('URL',(len('URL')-17)),len('URL')-49))
Where 'URL' is the URL for viewing your picture in the browser.
Hope it helps anyone else!

tinyDB storing images (or paths to them) and viewing them

sorry for the inconvenience, i am trying to build an app that helps autistic children communicate by pressing buttons (with pictures) and having them read. That works fine. The issue is about the menu - i want to make it possible for users to upload images via TinyDB (or at least paths to images that should be accessed). I've found tutorials about how to take a picture with the camera and store it on the SD or load such from the ImagePicker, but how could i make it possible for these images to be shown in the app any time it's on?
Do the tutorials to learn the basics of App Inventor!
In TinyDB you only can store text, which means, you store the path to your images there. For easier handling, you could store the paths to the images in a list and the list in one tag in TinyDB. To display the images, you could take a look at this snippet. You also can download the example project there.

Outlook 2012 signature with image without attachment

I am trying to create an email signature in outlook 2010 with the company logo embedded.
As i am working my way trough this, i find it very strange that the included image is sent as an attachment.
It doesn't show as attachment on Outlook from other users. But it does on Mac, hotmail and so on..
I have already tried to include it via HTML, thus placing the image on a FTP and loading it from there, and i have tried including it trough the signature editor, both won't make it work..
Is there a code to make this function?
Why do you find it strange that the image is included as an attachment? Without it, there is no way for the recipient to view the image, as the email itself is text only. I imagine the only reason it doesn't show as an attachment in outlook is because outlook is smart enough to know that it's not a "real attachment" per se, but just the signature. Even then, I remember recieving signature images as attachments in older versions of outlook.
That said, it should be possible to use a linked image in your signature. This link explains how to do it.
Creating an Outlook signature with an image or picture located on the Internet requires changing Outlook’s behavior on how to deal with linked images and also adding the image in a specific way. Once the image is inserted, you can use the Signature Editor to turn the image into a hyperlink to a website.
Set Outlook to link to pictures instead of embedding them
The first step is to change Outlook’s behavior on how to deal with linked pictures. By default Outlook will embed them with the message, but this would mean that your picture would be a reflection of when you created the message instead of when the the recipient is reading (or even re-reading) your message.
Depending on how often you change your picture, this might be a non-issue but it would also mean that the picture gets added each time and thus making each message quite a bit larger. In several cases this could also result in your picture being added as an attachment and/or show the message with a paperclip icon.
These are all things that you should want to avoid; if not for you, then definitely for the recipient’s sake.
In Outlook 2003 and previous you can change this behavior via;
Tools-> Options…-> tab Mail Format-> button Internet Format-> option: When an HTML message contains pictures located on the Internet , send a copy of the pictures instead of the reference to their location.
In Outlook 2007 and 2010, this can behavior can only be changed via the Registry.
Key: HKEY_CURRENT_USER\Software\Microsoft\Office\\Outlook\Options\Mail
Value name; Send Pictures With Document
Value: 0
For more info about this registry key see; Where did "HTML options" go in Outlook 2007/2010?
Insert image as link
When inserting the image into your signature, you must again make sure that the image is linked. If you do not do this, then the current image will be downloaded and saved within your signature and wouldn’t update when you change it on-line.
Outlook 2003
Right click in the Signature Editor (do not use Advanced Edit) and choose; Insert Image…
Type the Internet address (URL) to the image in full when prompted for the Picture Source.
Click OK
Outlook 2007 and Outlook 2010
Click on the Picture icon in the Signature Editor
As the file name, type the Internet address (URL) to the image in full.
Instead of clicking on Insert, click on the little down arrow on the Insert button and choose; Link to File
Create a hyperlink
Once the image has been added, you can make it clickable and point it to a website via the the Hyperlink function.
Outlook 2003
Right click on the inserted image and choose; Edit Hyperlink
Outlook 2007 and Outlook 2010
Select the image and click on the Hyperlink icon
It seems to be more a matter of how the client displays it. Different clients are going to deal with the image in different ways, especially from a security standpoint. Have you tried linking to an image directly from the Web?
Here's some additional info:
http://www.howto-outlook.com/faq/imagesignature.htm

Resources