For support with any of our Shopify themes, please email support@giraffic.co and include link to your store.

For support with any of our Tumblr themes, please email tumblr@giraffic.co and include link to your blog and what theme you're using.

We try to respond within 2 days. Please note: we do not offer support for HTML and CSS customizations.

Contact

Shopify: support@giraffic.co

Tumblr: tumblr@giraffic.co

Ask the Community

Post a Public Question

Inserting photos from a URL on text posts

Last Updated: Mar 28, 2013 12:01AM GMT

Tumblr's new Dashboard is great, but unfortunately they removed the option to insert a photo from a URL on text posts. This means that the only option to insert a photo on text posts is to upload, however, Tumblr caps these photos at a max width of 500px. This is a problem if you want to have large images in your text posts, like for putting photos of food in recipes when using Cookbook theme for example. I have blogged more about this here, but for now lets look at a solution on how to insert a photo from a URL from now on.

So basically the old way, you could just paste in a photo url and it'll insert it into the paste. Pretty easy for everyone really. But now you can only insert a photo from a URL if you edit the HTML of a post. Anyone who knows a bit of HTML can easily do this. But for those who don't, then here's a guide for what I think is the easiest/best way how.

1. For starters, you need images that you want to use. I've got three photos from a train trip in Switzerland I want to insert in a text post. 

‚Äč

2. For this example I'm going to use Flickr to host the photos. Wherever you host the files is fine, but Flickr already does come with a way to generate the HTML code if that isn't your strong point. 



3. Upload your photos to Flickr.



4. Once your photos are uploaded, you want to go to the individual photo page of the photo you want to insert. On the top left you'll see a "share" button. This will bring up a list of familiar sites such as Facebook / Twitter, but what we are interested in is the "grab the HTML/BB Code" link at the bottom.



5. The default code Flickr provide is for 500px wide, which isn't enough for what we want. We want at least 800px to work on most wide content, so I'm choosing the medium option. 



6. As you can see, Flickr has already generated an image tag for you in HTML, (which includes a link tag back to the photo). You just need to copy that code. 




7. Now go to your Tumblr text post. Here's one I've prepared earlier: 



8. You need to click on the "HTML" button to enable HTML mode. 

9. Then paste in the code you copied from Flickr. If you didn't use Flickr and you have your own image url, you basically need to insert an img tag, which will go something like <img src="URL GOES HERE" alt="PIC DESCRIPTION" />. It's usually best to wrap it around a <p> tag, as most themes will have styles set for paragraphs and images contained within them.




10. Flickr by default puts in the code for the image to link back to the original on Flickr. If you don't want this to happen, you will need to remove the code so that it just leaves the "<img>" tag left. 



11. Now go back to your text preview and the image shall appear. 



12. Publish the blog post and you shall now see a lovely full width image on your blog!


So it takes a bit more effort than before, but if your blog supports high res images then it's worth the time to make those images stand out. 

support@girafficthemes.com
http://assets2.desk.com/
false
girafficthemes
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete