Anchor tabs, image to image and one page to another

You don’t need to alter image code, but the surrounding containers. In some cases you may need to add a container. This often means editing templates. There should be some way to override templates. The usual way is to create a child theme. Copy templates you want to edit from the parent to child, then edit as required. In the case of plugin templates, it depends on the plugin. For example, WooCommerce templates are overridden by copying templates into the same relative folder structure in your child theme as that used by WC.

The tricky part is determining what template to edit. There are plugins that help you determine the main template file, but often the actual file is a partial template that is included into the main. You should be able to correlate HTML on the template with that on the actual page. If the item you are looking to modify seems to be related to a call to get_template_part(), then locate that partial template file and locate your item there.

Img tags can come from a number of functions, or be coded directly on the template. Check the page’s HTML source to see if an anchor link already wraps the image. If so, you need to modify the href attribute. Otherwise, the img tag needs to be wrapped with an anchor tag. Generic example:
<a href="<?php echo site_url('/foobar/#snafu'); ?>"><img src="<?php echo content_url('/uploads/foobar.jpg'); ?>" /></a>

In that example, the anchor tag’s href attribute will end up being something like httр://example.com/foobar/#snafu . In this URL, “foobar” is a page slug and #snafu is a jump or skip link to a particular element on the page with the name or ID of “snafu”. The target image of that link might look something like this:
<img id="snafu" src="<?php echo content_url('/uploads/snafu.jpg'); ?>" />

I’ve presented code as it may appear in template code. If you are writing content in the page edit screen, you cannot enter PHP code. You can still write proper HTML using the text view tab, hardcoding the equivalent of the PHP code, for example:
<img id="snafu" src="httр://example.com/wp-content/uploads/snafu.jpg" />

hi and thanks for your swift reply,

sounds like to me that the best way for me to go about this is editing the html in the text view tab as I have tried parent/child themes and completely screwed my site in the past (I’m a total amateur, can you tell?!)

I have looked and isolated this code (the other two look similar)

[vc_column width=”1/4″][vc_single_image image=”1011″ img_size=”full” add_caption=”yes” alignment=”center”][/vc_column]

I understand i need to edit this by adding in the href but it’s not looking like normal code.

I understand I need to add this in somewhere:

“>” />

but I don’t understand where it fits in with the code that is there. Sorry, I am struggling.

THe same goes for the img id of the “final location” image – this is what i get when i “inspect element”

and am not sure where the img id should go?

Sorry to be a massive pain and thank you in advance,
Jenny

oh crap, sorry it has just shown the actual image, will retry and send now

“final location” image:

oh my life. I don’t know why it’s doing that ??

Please ignore all of the above – I have managed to work out out using visual composer itself. the best thing to use is the Row ID – no coding required!

I still thank you for your comprehensive and quick answer.

thank you ??