I'd like to have a gallery just with one set of pictures in one size. This pictures would rendered in a specific size on the page and if I click on an image, a lightbox gallery with the picture in original size opens.
The part with the smaller pictures is already done with this TypoScript code:
tt_content.image.20.1.file.maxH = 177
tt_content.image.20.1.file.maxW = 267
now I'd like to automatic wrap all images on a page in an a-tag, reference on themself and add a class and rel attribute.
Is that possible?
I read something about imageLinkWrap and tried a tutorial but it doesn't work. It was this code:
tt_content.image.20.1.imageLinkWrap {
JSwindow = 0
directImageLink = 1
linkParams.ATagParams {
dataWrap = class = "lightbox" rel="lightbox{field:uid}"
}
}
Shouldn't it wrap the image with an a-tag with class and rel params?
EDIT: one Problem solved.
I forgot to overwrite the imageLinkWrap with
tt_content.image.20.1.imageLinkWrap >
and to enable it with
tt_content.image.20.1.imageLinkWrap.enable=1
Related
I'm a very basic coding person that needs something to work, but IDK how. I have a website where I have 4 images. When you hover over those img they become slightly darker, but I wish there was a way to show some text as well (preview of how it should work: https://imgur.com/a/r5cOW2R)
Here's the link to my GitHub code: https://github.com/Ezzol/HCI-Portfolio
Can anyone explain to me what I need to do to add that hovereffect you can see in my design at the imgur link?
You would want to use the CSS hover event. Here's a good example on how to do that.
https://www.w3schools.com/howto/howto_css_image_overlay.asp
you probably need to use javascript as well, and do an EventListener to tell when it is being hovered over, and then use .style to change it, for example:
var text = document.getElementById("text");
var exampleimg = document.getElementById("exampleimg");
exampleimg.addEventListener("mouseover", examplechange);
exampleimg.addEventListener("mouseout", examplechangeback);
function examplechange(event)
{
text.style.display = "block";
}
function examplechangeback()
{
text.style.display = "none";
}
add a h1/h2/h3/p element to your page, and give it the id "text" then style it how you want and set the display to none.
I need to get the width and height of a background image, I've seen examples where these can be easily retrieved ONLY IF the properties are set in CSS.
Is there anyway to get width and height when they are not set in the CSS either inline or in a CSS file?
This is all I have to work with...
element.style {
background-image: url(generated-by-cms.jpg);
}
Thanks!
I don't think you are able to get it via CSS if you didn't set the property up. As the image is being loaded externally, the CSS file has no clue about the size. Furthermore, if you are trying to set it up via background-image, the image will be restricted by the element size.
What you can do however is load the image via Javascript (since you already have the url anyway) and then set your element to the dimensions you want. For example, let's say your HTML file contains an img tag with the id "myimg"
<img id="myimg"></img> <!-- an empty image -->
You can then set up your Javascript like this:
var img = new Image(); // an empty image object
img.src = 'someurl'; // image url
// this is fired after 'someurl' is loaded.
img.onload = function() {
document.getElementById('myimg').src = img.src;
document.getElementById('myimg').width = img.width;
document.getElementById('myimg').height = img.height;
}
Note that you don't have to set the empty image or it's properties if you don't want to. You can manipulate img.width and img.height properties and use it elsewhere if needed.
I want to develop new features in Quod Libet music player.
I need to increase size of specific scrollbar.
There's a function already exists to apply css to a widget:
def add_css(widget, css):
"""Add css for the widget, overriding the theme.
Can raise GLib.GError in case the css is invalid
"""
if not isinstance(css, bytes):
css = css.encode("utf-8")
provider = Gtk.CssProvider()
provider.load_from_data(css)
context = widget.get_style_context()
context.add_provider(provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)
So I try to apply css as this:
self.scrollwin = sw = ScrolledWindow()
sw.set_shadow_type(Gtk.ShadowType.IN)
#get scrollbar
vscrollbar = sw.get_vscrollbar()
# 1rst attempt
# qltk.add_css(vscrollbar, '* slider {min-width: 20px;}')
#2nd attempt
qltk.add_css(vscrollbar, 'scrollbar.vertical slider {min-width: 20px;}')
I've got same error with 2 attempts:
'min-width' is not a valid property name (3)
Update 1
I try #Herbalist solution, scrollbar component is resized but "slider" always have same size. It add spaces on right and on left of "slider".
vscrollbar.set_size_request(50,-1)
Is it possible to resize slider of scrollbar ?
Screenshot of result (I outline part of scrollbar in green):
I'm not able to success with css, so I use deprecated method:
GtkRange:slider-width has been deprecated since version 3.20 and
should not be used in newly-written code.
Use the min-height/min-width CSS properties on the slider element. The
value of this style property is ignored.
As this:
qltk.add_css(vscrollbar, '* {-GtkRange-slider-width:40px}')
get_vscrollbar() returns a Gtk.Widget so you could try setting the "width-request" property
Disable width and height fields from image properties I am using ckeditor 4
CKEDITOR.replace('<%=txtCkEditor.ClientID %>', {allowedContent:'img[!src,alt];'});
By using above method it shows only image properties with width and height hidden and rest of the controls also get visible false. Kindly suggest me a solution for disabling the width and height fields from image properties windows.
Thanks in advance.
I'm not sure I entirely understand your question. It seems you want to hide the fields that allow input of height and width. Your initial solution doesn't seem to affect the dialog box, but what content gets saved. These are very different kinds of solutions. My answer assumes you're seeking to alter the image properties dialog box fields.
Based on this earlier question, I recommend adding the following configuration:
CKEDITOR.on('dialogDefinition', function(ev) {
var editor = ev.editor;
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'image') {
var infoTab = dialogDefinition.getContents( 'info' );
infoTab.remove( 'txtWidth' ); // Remove width element from Info tab
infoTab.remove( 'txtHeight' ); // Remove height element from Info tab
}
});
I am trying to get the picture of a div in a html page using html2canvas.
I am using this code
$('.classname').html2canvas({
onrendered: function (canvas) { data1=canvas.toDataURL("image/png");
var data = {
action: 'screen_response',
base64data: data1
};
$.post(ajaxurl, data, function(response) {
//document.getElementById('bar').style.display = 'none';
//alert("asdasd");
});
//alert(data1);
} });
The image I am getting after this shows of size 1663*4205 .But when I open the image ,,it comes so small.. than i tried with jpg .. than i got to know that html2canvas actually scanning the whole page and generating a screenshot of whole html page .
Please see this pic click here
white color is the div pic which i require .. and the black is the whole pic.
Please tell me how can i get the screenshot image of my div only. because i have import it in PDF too.
SOLUTION : I got the solution . include the newly released js files of html2canvas. It will work .