I have a Tumblr and where are my Home and Ask links I want to put a PNG image with the words of the font I want. But I want the link to redirect to what I've originally put in the links of the blog. What should I add in the HTML to manage do that?
This is possible.
What you can do is create your png images and then upload them to tumblr here: http://www.tumblr.com/themes/upload_static_file
Make a note of the file link. Then in your theme you can code the links to have images instead of text.
This will depend on your theme to some extent, but it could look something like this:
<a href="/">
<img src="http://static.tumblr.com/yourfile.png" />
</a>
<a href="/ask">
<img src="http://static.tumblr.com/yourfile2.png" />
</a>
Related
As in the photo above, I would like to get rid of the scroll bar along with the history of all the likes and reblogs which are located once you click on the photo on my blog. Where would I locate this in the custom CSS on tumblr and which code would I use?
I have been looking at this code, but not sure where to go next.
{block:Photo}
{block:IndexPage}{LinkOpenTag}<div class="photo"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width=250px/></div>{LinkCloseTag}
<ul class="like_and_reblog_buttons">
Thank you.
OK, so in the template on line 408 I simply wrapped the notes component in html comments so they don't get rendered in the browser.
Simply changing:
{block:PostNotes}
</center></center>
<div class="notes">{PostNotes}</div>
{/block:PostNotes}
</div>
{/block:Posts}
To:
<!--
{block:PostNotes}
<div class="notes">{PostNotes}</div>
{/block:PostNotes}
</div>
{/block:Posts}
-->
Full html template saved here: https://pastebin.com/yva5npcW
I've also removed the redundant
</center></center> that tag is obsolete:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center
Nothing is being rendered in those erroneous tags.
Before:
After:
When github.com renders an image in a readme.md, it automatically links the image in an a tag.
Using either
![][http://example.com/path/image]
or
<img src="http://example.com/path/image" />
The actual rendered content will appear as
<img src="https://camo.githubusercontent.com/8a545f12e16ff12f..." alt="" data-canonical-src="http://example.com/path/image" style="max-width:100%;">
I understand the github image caching (on camo.githubusercontent.com), and that's fine, but I don't want the a tag to wrap my image.
I'm not sure if this is part of the github flavored automatic URL linking, or something specific images.
I am able to provide my own link (using my own a tag), but what I really want is no link, no a tag.
Is this possible?
thanks!
You can wrap the image in a link that points to #:
[](#)
<img src="http://example.com/path/image" />
It will still be clickable, but won't open a new page, at least.
You can use the <picture> tag to prevent GitHub from auto linking to the image.
<picture>
<img alt="Image Alt Text" src="http://example.com/path/image">
</picture>
Pass linkImagesToOriginal: false to gatsby-remark-images should be able to resolve this issue.
{
resolve: 'gatsby-remark-images',
options: {
linkImagesToOriginal: false,
},
}
If you click on your badge, you think to see an image, but it is usually a html page with html-tags. That's why badges links to a different page by default.
#Tamás Sengel answer isn't bad, but looks like there were side effects like visual glitches #Igor mentioned.
I solved this problem by simply referring to my github page:
[](https://github.com/Ismoh/NoitaMP)
It's a static badge build with shields.io and shouldn't link to source.
The snippet below is exactly what you need to "remove" the a tag for images. Markdown will render all the img's tags around the a. For me (using Gatsby) the option "linkImagesToOriginal: false" removed perfectly and now all the images are NOT clickable.
{
resolve: 'gatsby-remark-images',
options: {
linkImagesToOriginal: false,
},
}
This method works the best for me: linking the image to itself
<a id="image1" href="#image1"><img alt="alt text" src="http://example.com/path/image.png" /></a>
I am using Fancybox gallery with cushyCMS for my client. It will be useful if I can create more main images as a series of photos for particular thumbnail, but in this case I want to hide empty src images so there are no white images when pictures are extended and client doesn`t fill it.
<li>
<div class="wrap">
<a class="fancybox" rel="group1" href="images/GaleryPicSixSM.png">
<img id="thumbnailSix" class="cushycms thumbnail" src="index_15_1769179488.png" caption="thumbnail 6" />
</a>
<img id="mainPicutureSix" class="cushycms main" src="" caption="main image 6">
</div>
</li>
Is there anyway how I can hide automatically empty src in case that client will not find relevant picture ? Unfortunately there is no possibility in cushyCMS for my client to add a more pictures under one thumbnail.
If you can use jQuery, the following code would do the trick:
$('img [src=""]').hide();
I have a tumblr blog on which I post short webcomic stories. I want that when I post a few pages in a single post, they appear small, but when I click it enlarges and one can browse through the comic.
I would like to have something similar to this.
How can I set it up?
You can achieve this by implementing the Pirobox plugin in your theme: http://www.pirolab.it/pirobox/
You will then need to edit the photoset code in your theme to something like this:
{block:Photoset}
<div class="photo">
{block:Photos}
<a rel="gallery" class="pirobox_gall" href="{PhotoURL-HighRes}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
{/block:Photos}
</div>
{/block:Photoset}
And make sure you also adjust the photo-post block so they also open in Pirobox when clicked.
{block:Photo}
<div class="photo">
<a rel="single" class="pirobox" href="{PhotoURL-HighRes}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
</div>
<div class="caption">
{Caption}
</div>
{/block:Photo}
Add a link to the Pirobox js file in the "head" of your theme.
<script type="text/javascript" src="http://static.tumblr.com/ajtokgb/DfDluuzg8/pirobox_extended.js"></script>
Add this before the "head" or preferably in the "body" section near your other scripts.
<script type="text/javascript">
$(document).ready(function() {
$().piroBox_ext({
piro_speed : 700,
bg_alpha : 0.5,
piro_scroll : true // pirobox always positioned at the center of the page
});
});
</script>
And you will need to style it with CSS of course. You can also look into the "fancybox plugin" which does something similar.
Now when people click on a photo from one of your posts, an enlarged version of the picture will open up and they will be able to browse through the pictures from that specific post.
Note: This method will only work with photo posts. Every theme is different, you will need to adjust the code to suit your theme.
I am having a problem using fancybox with expression engine.
Basically I have different galleries set-up using matrix plugin. Each gallery has around 10 images. Basically I want the thumbnail to open up fancybox and fancybox to be able to scroll through the images in that matrix entry/gallery.
Sounds simple but I can’t seem to get fancybox to scroll through the images, it just stays on the first image.
This is my code for the thumbnails:
<ul id="image_gallery">
{exp:channel:entries channel="gallery_images"}
<li>
<a class="grouped_elements" href="{title_permalink='gallery/view'}" rel="{title}">
{gallery_image limit="1"}
{exp:imgsizer:size src="{image}" width="200px" height="180px"}
<img src="{sized}" width="{width}" height="{height}" alt="" />
{/exp:imgsizer:size}
{/gallery_image}
</a>
<h1>{title}</h1>
</li>
{/exp:channel:entries}
</ul>
This is my code for the fancybox template:
{exp:channel:entries channel="gallery_images"}
<ul id="img_gallery">
{gallery_image}
<li>
{exp:imgsizer:size src="{image}" width="650px" height="500px"}
<img src="{sized}" width="{width}" height="{height}" alt=""/>
{/exp:imgsizer:size}
</li>
{/gallery_image}
</ul>{/exp:channel:entries}
Everything works fine except for the image scrolling.
I’d appreciate any help!
Without seeing the output of your ExpressionEngine tags, it's difficult to understand where the problem is. However, your problem may be as simple as making sure all of the images in a gallery share the same HTML relationship attribute.
Fancybox Galleries are created from elements who share the same rel="" attribute:
<a class="gallery" rel="set_1" href="#"><img src="1.jpg" alt=""/></a>
<a class="gallery" rel="set_1" href="#"><img src="2.jpg" alt=""/></a>
<a class="gallery" rel="set_1" href="#"><img src="3.jpg" alt=""/></a>
<script>
$('a.gallery').fancybox();
</script>
In looking over your code, you're using the ExpressionEngine {title} tag as the rel="" attribute.
Since the title of your channel entry likely contains spaces and other special characters, a better choice would be to use the URL Title field, {title_permalink}.
The {title_permalink} tag converts the channel entry title to be URL-safe using either hyphens or underscores as character separators (using the Word Separator for URL Titles setting in the Global Channel Preferences).
Your updated thumbnail code would then be:
<a class="grouped_elements" href="{title_permalink='gallery/view'}" rel="{title_permalink}">
<img src="{sized}" width="{width}" height="{height}" alt="" />
</a>
If this doesn't work, perhaps you can provide a more complete code sample such as a jsFiddle or Pastie to help us understand where the problem may be.