Two Easy Ways to Click to Enlarge Photos in Your Posts
Two Easy Ways to Click to Enlarge Photos in Your Posts
Here’s two different easy ways to add an “enlarge photo” function to your posts. I'll be using my photo of Ozzie's nose in the examples
Method 1
The first one is a modified version of @majes.tytyty’s tutorial.
After using @majes.tytyty’s method for over a month or so, I noticed that there was a pattern to the links that were generated when you copied and pasted your image kink to a new browser window. I realized that step probably wasn’t necessary at all.
I just keep the common code saved in a text file and copy and paste it below the code that Steemit generates for my uploaded image. The just copy the unique file name that Steemit gives to my file (the code that’s between the two “/”s) and paste it into my “Enlarge photo” URL between the “/” and the “)”
Copy and save this code to a text file. Copy and paste it below the code for the image that you want to enlarge.
[Click here to enlarge photo]( https://steemit-production-imageproxy-upload.s3.amazonaws.com/)
The Steemit code for my image looks like this
The DQmUMTBKDU3TyHNC1vMThUbUwiQxsTEA6JjbLerx1adVfY5 is the Steemit generated file name that you want to use in the "Enlarge Photo" URL.
Your final code should look like this:
[Click here to enlarge photo]( https://steemit-production-imageproxy-upload.s3.amazonaws.com/DQmUMTBKDU3TyHNC1vMThUbUwiQxsTEA6JjbLerx1adVfY5)
Method 1 example
Method 2
This method was sent to me by @taroyoma. This method is pretty easy and straight forward too. It makes your image a clickable link.
Just enclose the code that Steemit generates for your image in square brackets “[“and “]”. Then copy the whole URL part including the parentheses and paste it just after the “]”. To finish you might want to add something like Click the above photo to enlarge on the next line.
The code for your photo should look something like this:
[](https://steemitimages.com/DQmUMTBKDU3TyHNC1vMThUbUwiQxsTEA6JjbLerx1adVfY5/OzzieNose.jpg)
Method 2 Example
Click the above photo to enlarge
I'll let you decide which method you prefer to use. Thanks again to @majes.tytyty and @taroyoma for their tutorials.
All photos and text in my posts are my original work.
@originalworks
Please visit my galleries on the following sites:
Society6
Fine Art America
Follow me on Facebook
Enjoy!
Roger
Thanks for this post!! I don't know why the first one always seems so difficult for me?? If I edit my photos in Google photos, and copy and paste the edited version in my post here...does that make any difference? I wouldn't think so, but...well, let's face it...I'm a little challenged when it comes to this sometimes haha. Can't wait to try out Option #2 :)
I'm glad that you found this post. I was thinking about you when I put it up. I think both methods are pretty easy. It's just a matter of preference. I've started using the second method in my last couple of posts.
It should make a difference if you paste your image in from google or not. A thing that I found out today is that you have to pay attention to spaces in the markup. I had a space between the [] and the () and it screwed things up!
I'm glad I found it too!! I pinned it to my desktop so I can find it quickly when I need it!
And my next post with pictures, I'm trying the second option. And yes, I realised just how finicky it all is last time I used it! Obviously the more you do it, the easier it gets I assume :)
Thanks again!
Very good!!!
Thanks Hon!
Is that your wife??:) If so, I had no idea she was on here as well Roger ;)
Yes! That's Sheila! She writes about her art work. She's more chatty then I am. LOL!
Oh that's awesome!! She talks, you cook haha Tell her hi and I'll have to make my way over to her page! It's fun that you're both on here!
That would be great! She's a little discouraged right now.
Aww ok, I'm all over that!!
Thank you Lynn are a sweetheart!!!
Congrats on your ballpoint macro win. I loved the perspective. These are great resources. Here is an additional way I got from @juliank :
[(drop image)]( (paste image url) )
Be sure to click on the image to view full screen!
You drop the image between the first set of parenthesis and then copy the address created between the last set of parenthesis.
Thank you @papacrusher! I think that gives you the same markup as in my Method 2, but it looks like an even easier way to get here! Awesome! I wonder which way the end users prefer... click on a link or click on the image? I learned from my years developing software that what may be cool for the developer may be totally useless for the client! I wish there was a way we could do a poll!
Thank you! This is a very handy tool to have!
Thank you for your comments!
The pleasure is always mine.
Ah, yes. I had been thinking about doing this. There have been many posts I've read where I wish I could see the pictures larger. I think I like the 2nd method best.
Thank you @derekrichardson! Check out @papachrusher's comment above. It might be an even easier way to do the same thing! Your photos are awesome it would be great to see them full screen!
Oh thank you for this easy to understand post! I have tried to look this up before, but I get lost. I am NOT technically savvy at ALL, but this is SO freaking easy. I'm pinning this to my bookmarks bar until I have it committed to memory.
Thank you Byn! Let me know if you have any questions!
Nice helpful post and templates by @juliank - https://steemit.com/blog/@juliank/happy-tuesday-steemit-share-your-landscape-photography.
Still working on this @rwedegis thanks for your advice and guidance. What I don't like is that once enlarged you need to back to original article, escape does not work, it is a back click to original URL, unless I am missing something here.
Right, this code just opens the image up in the same window. I'm not sure how much code they let you put in your post. It recognizes some HTML, but not all. It's probably to keep things safe. Thank you for your comments.