I had set up Galleria Plugin successfully. But the problem is that the thumbnails for each picture is not generating. My code is below
<div id="galleria">
<img title="Image title" src="images/1.jpg">
<img title="Image title" src="images/2.jpg">
<img title="Image title" src="images/3.jpg">
<img title="Image title" src="images/4.jpg">
<img title="Image title" src="images/5.jpg">
<img title="Image title" src="images/6.jpg">
<img title="Image title" src="images/7.jpg">
<img title="Image title" src="images/8.jpg">
<img title="Image title" src="images/9.jpg">
<img title="Image title" src="images/10.jpg">
</div>
jQuery:
<script>
Galleria.loadTheme('js/galleria.classic.js');
$('#galleria').galleria();
</script>
What can I try next?
Never used the script, but what i advise is:
check your jQuery framework file path
check your image paths, try using
exact paths not relative
set script tag with
type="text/javascript" attribute
Good luck
Actually, i changed the display:none for the slideshow window to visibility:hidden and its working!. thanks for all who answered
Related
My end goal is to create a gallery of Images that when clicked link to an external website. This needs to be done through Advanced Custom Fields, so I made a repeater that has the image and link in the same row:
link1 | cover_image1
link2 | cover_image2
Right now I'm inserting this code into a text editor inside my webpage. I also imported some short-code from here, that allows me to use %ROW% as an iterator.
"attachments" is the parent repeater and "link" and "cover_image" are the children.
[acf_repeater field="attachments"]
external url = [acf field ='attachments_%ROW%_link']
image url = [acf field ='attachments_%ROW%_cover_image']
<a href =[acf field ='attachments_%ROW%_link'] >
<img src = [acf field ='attachments_%ROW%_cover_image'] width="300" height="214" />
</a>
[/acf_repeater]
The webpage renders this:
Where the broken image contains this code:
<img src="[acf" field="attachments_0_cover_image" ]="" width="300" height="214">
I think [acf field ='attachments_%ROW%_cover_image'] in <img> isn't resolving all the way to the url, as external url = and image url = both render the correct urls.
Wordpress also converts my code to this after saving, so its probably a syntax error?
[acf_repeater field="attachments"]
external url = [acf field = attachments_%ROW%_link]
image url = [acf field = attachments_%ROW%_cover_image]
<a href="[acf">
<img src="[acf" width="300" height="214" />
</a>
[/acf_repeater]
I'm not sure how to properly convert [acf field ='attachments_%ROW%_cover_image'] to a url in the <img> and I could use some help on the proper syntax. Thank you so much for you help!
html for the attribute per Arian:
<div class="fl-module fl-module-rich-text fl-node-5d4926759d7aa"
data-node="5d4926759d7aa">
<div class="fl-module-content fl-node-content">
<div class="fl-rich-text">
<p>Agenda: https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/cute-cat-photos-1593441022.jpg?crop=0.669xw:1.00xh;0.166xw,0&resize=640:*</p>
<p>Video Links: </p>
<p>Thumbnails: </p>
<p></p>
<p>external url = https://www.youtube.com/watch?v=uHKfrz65KSU<br>
image url = http://wordpress.local/wp-content/uploads/Thumbnail_1.png</p>
<p><a href="[acf" field="attachments_0_link" ]=""><br>
<img src="[acf" field="attachments_0_cover_image" ]="" width="300" height="214"><br>
</a></p>
<p><br></p>
<p>external url = https://www.youtube.com/watch?v=X2lIovmNsUY<br>
image url = http://wordpress.local/wp-content/uploads/Thumbnail_2-1.png</p>
<p><a href="[acf" field="attachments_1_link" ]=""><br>
<img src="[acf" field="attachments_1_cover_image" ]="" width="300" height="214"><br>
</a></p>
<p><br></p>
<p>external url = https://www.youtube.com/watch?v=hDJkFLnmFHU<br>
image url = http://wordpress.local/wp-content/uploads/Thumbnail_3-1.png</p>
<p><a href="[acf" field="attachments_2_link" ]=""><br>
<img src="[acf" field="attachments_2_cover_image" ]="" width="300" height="214"><br>
</a></p>
<p><br></p>
</div>
</div>
</div>
Not a wordpress guy, but seems like wordpress prevents expanding/executing shortcodes with parameters within html attributes, maybe this could work as workaround if you can put php code there:
<?php
$link = do_shortcode("[acf field ='attachments_%ROW%_link']");
$cover_img = do_shortcode("[acf field ='attachments_%ROW%_cover_image']");
?>
<a href="<?= $link ?>">
<img src="<?= $cover_img ?>" width="300" height="214" />
</a>
Actually i found comment on this:
It appears it's using the same quotes for the HTML attribute and the shortcode's attributes that create problems.
at here
so this may work too:
<a href="[acf field ='attachments_%ROW%_link']">
<img src="[acf field ='attachments_%ROW%_cover_image']" width="300" height="214" />
</a>
or without shortcode quotes:
<a href="[acf field=attachments_%ROW%_link]">
<img src="[acf field=attachments_%ROW%_cover_image]" width="300" height="214" />
</a>
last option i can think of is creating parameter-less shortcodes like this:
function acflink_shortcode() {
return do_shortcode("[acf field ='attachments_%ROW%_link']");
}
add_shortcode('acflink', 'acflink_shortcode');
function acfimage_shortcode() {
return do_shortcode("[acf field ='attachments_%ROW%_cover_image']");
}
add_shortcode('acfimage', 'acfimage_shortcode');
then using in editor like:
<a href="[acflink]">
<img src="[acfimage]" width="300" height="214" />
</a>
I am trying to create a function to extract one image from HTML snippet but not only for img tag, I want to do it for almost all posible configurations, for example, if I pass any of thus HTML snippet, the function must to give me the URL for one image (any one):
HTML 1
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600"> (this is the easy)
HTML 2
<div class="bg-img attachment-homepage-sml-thumb size-homepage-sml-thumb lazyloaded" data-bg="https://www.example.com/wp-content/uploads/2019/01/img_pink_flowers.webp" style="background-image: url('https://www.example.com/wp-content/uploads/2019/01/img_pink_flowers.webp');"></div>
HTML 3
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
HTML 4
<picture loading="lazy" class="wp-image-204 size-medium aligncenter">
<source type="image/webp" srcset="https://example.com/wp-content/uploads/img_pink_flowers.jpg.webp 270w, https://example.com/wp-content/uploads/img_pink_flowers.jpg.webp 45w, https://example.com/wp-content/uploads/img_pink_flowers.jpg.webp 629w" sizes="(max-width: 270px) 100vw, 270px">
<img loading="lazy" src="https://example.com/wp-content/uploads/img_pink_flowers.jpg" alt="" srcset="https://example.com/wp-content/uploads/img_pink_flowers.jpg 270w, https://example.com/wp-content/uploads/img_pink_flowers-45x50.jpg 45w, https://example.com/wp-content/uploads/img_pink_flowers.jpg 629w" sizes="(max-width: 270px) 100vw, 270px" width="270" height="300">
</picture>
For IMG tag I have no problem and I don't want to create a custom script for each possible HTML, I think there must to be simple.
I have no code right now because, only for IMG.
Thank you very much
I've encountered this issue a couple times but have always found a "hack" way around it. Is there a special way to link an image in a WordPress template to an outside url beyond the typical a href tag? Here's the images I'm trying to link to outside urls:
<div class="socialMedia">
Follow Us: <br />
<img src="<?php echo get_bloginfo('template_url') ?>/images/facebook.png" alt="facebook"/>
<img src="<?php echo get_bloginfo('template_url') ?>/images/twitter.png" alt="twitter"/>
<img src="<?php echo get_bloginfo('template_url') ?>/images/googleplus.png" alt="google plus"/>
<img src="<?php echo get_bloginfo('template_url') ?>/images/instagram.png" alt="instagram"/>
</div><!--.socialMedia-->
<div class="socialMedia">
Follow Us: <br />
<a href="<?php echo get_bloginfo('template_url') ?>/images/facebook.png" target="_blank" > <img src="<?php echo get_bloginfo('template_url') ?>/images/facebook.png" alt="facebook"/> </a>
</div><!--.socialMedia-->
did you mean it!!?
<li><a href='#'>Core Transformation</a>
<img alt='arrow' src=**'http://localhost/wordpress1/wp-content/themes/twentytwelve/images/header-triangle.png'** /></li>
<li><a href=**'#'**>LINKS</a></li>
<li><a href=**'#'**>Contact Us</a></li>
How can I replace the src and href using the site_url() function?
You can use the following ways :
<img src="<?php bloginfo('template_url'); ?>/images/image.jpg" />
<img src="<?php echo get_template_directory_uri();?>/images/image.jpg" />
<img src="<?php home_url();?>/images/image.jpg" />
<img src="<?php echo site_url();?>/images/image.jpg"/>
you can do it same for href
More details refer codex
<img src="<?php echo site_url();?>/images/image.jpg"/>
or a better option would be:
<img src="<?php bloginfo('template_url'); ?>/images/image.jpg" />
You can do similarly for href
site_url() is used to append text on url.. so if you want to navigate to your directory and fetch something you can use it like this..
site_url('/images/default.jpg');
you can replace your src with following way:
<img src="<?php bloginfo('template_url'); ?>/images/yourimagename.extension" />
for more information about wordpress go to http://www.wpbeginner.com/wp-themes/wordpress-theme-cheat-sheet-for-beginners
that will help you more in future.
Still you getting any issues with that,then comment it.
I'm looking for a way to modify a HTML Document based on a number of occurring tags. For example
<img src="" alt="" />1></a>
<img src="" alt="" />1></a>
<img src="" alt="" />1></a>
<img src="" alt="" />1></a>
Must become:
<div>
<img src="" alt="" />1></a>
<img src="" alt="" />1></a>
<img src="" alt="" />1></a>
<img src="" alt="" />1></a>
</div>"
...
That is, for every 4 occurencies of <img> there must be a div tag added to the page. For those of you wondering why I can't simply write this - those tags are dinamically generated via other scripts.
Furthermore, only 1 img might be present, or 1231. However, the PHP script must add <div> tag at the begginig of every first <img>and </div> on every 4th and then another <div>. If there are only 3,2 or 1 instances, then </div> must come after the last one.
Any ideas ?
Please excuse the numerous edits, I was having problem with Firefox not showing the editor.
var tags = $('tag');
var group = new Array();
var i, g = 0;
$.each(tags, function() {
if(i == 4) {
g++;
group[g] = $('<div></div>').appendTo($('body'));
}
$(this).appendTo(group[g]);
i++;
});
Or something similar to that