I'm using OctoberCMS and my thumbnail gallery is generated this way:
<img src="{{ image.thumb(250, 250, {mode:'crop', offset: [0,100]} ) }}">
The offset value will "overshoot" the picture, if the picture format is 1:1.
I'm looking for a way to get the very top of every image size, like the css property
background-position: 0% 0%;
Do you have any ideas?
Here's a picture, where you can see that twig "overshoots" in the top row:
Example
For this, you can use background-image property of CSS and with background-image property you can use background-position property.
For background-position property, you have more options here.
Note: For using backgrond-image property you have to use auto mode in thumbnail generator function.
If you have defined any link on that image you can use background-image property on the link and give inline CSS on it, like below
<a href="your_url"
style="background-position: center top; background-image: url({{image.getThumb(250, 250, 'auto')}})">
</a>
or Instead of <a> tag, You can use any HTML tags like <div> and give CSS Properties(particular height and width) for that <div> and manage your view.
Try this, and tell me your reviews.
Related
I am using PrimeFaces 7.0 on WildFly 16, JSF 2.3. (I also tried with PrimeFaces 6.2- but nothing changed).
I am using p:galleria tag as follows:
<p:galleria value="#{exposeBean.images}" var="image" panelWidth="500" panelHeight="313" showCaption="false">
<p:graphicImage id="image" value="#{image}" alt="#{image}" title="#{image}"/>
</p:galleria>
The above functionality works as expected, however the picture currenlty chosen does not fade at the bottom, where the rest of the images of the gallery are shown- see here:
What can be the reason, how can I solve it?
My minimal, working example seems to have something to do with the size of the images I use (at least, it seems to be like this.) :
https://github.com/alexmivonwien/pf.gall.git
After comparing the generated HTML and CSS in my case and in the case of the primeface galleria showcase I found the following difference:
1.) My own generated HTML and CSS:
note that the first "li" child under the "ul" element
<ul class="ui-galleria-panel-wrapper" style="width: 500px; height: 313px;">
has the CSS style (there is no display:none here):
<li class="ui-galleria-panel" style="width: 500px; height: 313px;">
2.) The HTML and CSS on the primefaces showcase:
Note that the first "li" element under the "ul" element
<ul class="ui-galleria-panel-wrapper" style="width: 500px; height: 313px;">
has the css style (there is a display:none here):
<li class="ui-galleria-panel" style="width: 500px; height: 313px; display: none;">
The only way this can be reproduced in the PrimeFaces showcase is by assigning an explicit height to the images. E.g. adding a css rule via a browser developer tool like img {height: 364px} makes this happen. This makes the big image btw not fully show what is in the thumbnail, it is cut-off at the right. And this can be seen in your screen dump as well. In the thumbnail there is way more visible of the sink on the right than in the big image. So this is with 100% certainty caused by some css that resizes the image or with a wrong aspect of the image compared to ttge dimensions put om the p:galeria
The actual technical cause of this is however not visible in the code in your question. Next time, always create a [mcve], by reducing more and more and more until you are either left with a very small piece of (complete, verifyable, executable) code that demonstrates the problem, OR you found the solution...
Effectively this problem is all plain css html related and nothing PrimeFaces specific.
I'am actually working on a responsive design and i'm quite stuck:
I need to set image-type children position to absolute in their div parent, and keep the lower section under this parent. But actually, the only solution i have is to set a fixed height for this parent (in that case, a relative margin for the lower section wouldn't work in a dynamic structure). The problem is that the images, set to max-width: 100%; to keep their dimensions flexible, expand with the page, and the lower section is no more well positioned on resize:
<div id='page'>
<div id='b0'><img /><img /></div>
<section id='s0'><h2>section title</h2><p>hjkhjkhjk</p></section>
</div>
And the CSS:
#page{max-width:1024px; margin: 0 auto;}
#b0{position: relative; height:25%;}/* doesn't work, 100px instead work but responsive design fails */
#b0 img{position: absolute;}
Does anyone have a solution for that ?
Thank's in advance
Simplier solution :
Consists in setting each image to position: absolute; except the last one :
#b0 img:last-child{position: relative;
keeping an element in the "flood" provides its parent the needed height value.
Ok, I now have a very simple mixed solution using Both CSS and Javascript:
As the primary need is "mobile first" design, i've introduced un min-height for the images container in a smartphoine targeted media query css file:
In the head tag:
<link rel='stylesheet' media='screen and (min-width:320px)' type='text/css' href='css/css.css' />
Then the CSS:
#b0{position: relative; min-height:82px;}
And a little bit of Javascript:
$(document).ready(function(){window.onresize=function(){$('#b0').css({'height' :( this.innerWidth * .25)+'px'})}});
So this mixed solution needs Javascript activated, a min-height to be set up for each media query step, and a percentage for the container height calculated with global and maximum page dimensions: in my case:
#page{max-width: 1024px;}
and a container height at about 280px;
Hope this can help someone someday ;-)
So I have a custom image size i'd like to output, I've tried the following:
{profile_logo:thumbnail wrap="image"}
But you don't get height and widths which isn't ideal so I tried:
{profile_logo}
<img src="{url:thumbnail}" alt="{title}" width="{width}" height="{height}" />
{/profile_logo}
However this outputs the original files width and height, so the only option I'm left with is to hardcode the height and width which isn't ideal
{profile_logo}
<img src="{url:thumbnail}" alt="{title}" width="80" height="52" />
{/profile_logo}
Is there anyway to dynamically output the thumbnail height and width? Have tried {width:thumbnail} but it doesn't work.
Cheers!
You are correct - there is no stock way to output an image tag with height and width parameters for custom image sizes from EE file fields.
You can take a look at the GWCode FileInfo add-on, it could get that info for you from the raw URL (don't use the "wrap" param).
{exp:gwcode_fileinfo:single file="{profile_logo:thumbnail}"}
<img src="{file_url}" width="{image_width}" height="{image_height}" alt="" />
{/exp:gwcode_fileinfo:single}
These days I never want these parameters on my images, as when doing repsonsive layouts with fluid images make your images resize disproportionately.
When I insert an image in Dreamweaver: how do I align it freely like move and place the image wherever I want istead of using the alignments?
You may want to use a "div" element and put your image inside of it.
Or you can set style of the image as "position absolute".
You can use align attribute in HTML code in the div tag.
<div align="center">
This is some text!
</div>
You should have to use a div with its property of float(either left or right)
You can use in such a way as follows:
<div id="xyz" style="float : left; position:relative">
hello world
</div>
In my Sharepoint masterpage I have added an <img> to the top of the <body> of the page so that I can use some CSS to set the <img> to fill the screen.
However I want a different image to be displayed depending on the theme in use. I currently use the following inside the masterpage:
<img alt="" id="fullscreen" src="/_layouts/images/Background.png" />
Is it possible to capture the name of the theme in use and append that to the file name so I can simple adjust file names to match there theme?
Or failing that can I add something to src=" " that will make the URL theme specific?
I think the idea is to reference the images from your theme CSS. So if an image changes between themes, the url to that image is stored in each of the theme CSS files.
You master page can then simply contain an element with always the same CSS class.
What about defaulting the images to hidden, and in the CSS for the theme you want it shown in, show it?
For example:
In your master page:
<img src="theme1.jpg" alt="" id="theme1fullscreen" style="display: hidden;" />
<img src="theme2.jpg" alt="" id="theme2fullscreen" style="display: hidden;" />
<img src="theme3.jpg" alt="" id="theme3fullscreen" style="display: hidden;" />
In the css for Theme X:
#themeXfullscreen {
display: block;
height: 100%;
width: 100%;
}
This way, you have the images and locations in the master page, and can hide and show the appropriate one based on the theme.